fix: localize remaining hardcoded strings in PayPal setup (calcom#27908)

* chore: add en locale key-value for paypal setup

* fix: add translation function for paypal setup

* chore: avoid merge conflicts

Author: SinghaAnirban005

apps/web/components/apps/paypal/Setup.tsx

@@ -15,10 +15,17 @@ export default function PayPalSetup() {
   const [newSecretKey, setNewSecretKey] = useState("");
   const router = useRouter();
   const { t } = useLocale();
-  const integrations = trpc.viewer.apps.integrations.useQuery({ variant: "payment", appId: "paypal" });
+
+  const integrations = trpc.viewer.apps.integrations.useQuery({
+    variant: "payment",
+    appId: "paypal",
+  });
+
   const [paypalPaymentAppCredentials] = integrations.data?.items || [];
   const [credentialId] = paypalPaymentAppCredentials?.userCredentialIds || [-1];
+
   const showContent = !!integrations.data && integrations.isSuccess && !!credentialId;
+
   const saveKeysMutation = trpc.viewer.apps.updateAppCredentials.useMutation({
     onSuccess: () => {
       showToast(t("keys_have_been_saved"), "success");
@@ -39,12 +46,13 @@ export default function PayPalSetup() {
         <div className="bg-default border-subtle m-auto max-w-[43em] overflow-auto rounded border pb-10 md:p-10">
           <div className="ml-2 ltr:mr-2 rtl:ml-2 md:ml-5">
             <div className="invisible md:visible">
-              <img className="h-11" src="/api/app-store/paypal/icon.svg" alt="Paypal Payment Logo" />
-              <p className="text-default mt-5 text-lg">Paypal</p>
+              <img className="h-11" src="/api/app-store/paypal/icon.svg" alt={t("paypal_payment_logo")} />
+              <p className="text-default mt-5 text-lg">{t("paypal")}</p>
             </div>
+
             <form autoComplete="off" className="mt-5">
               <TextField
-                label="Client Id"
+                label={t("client_id")}
                 type="text"
                 name="client_id"
                 id="client_id"
@@ -55,7 +63,7 @@ export default function PayPalSetup() {
               />
 
               <TextField
-                label="Secret Key"
+                label={t("secret_key")}
                 type="password"
                 name="access_token"
                 id="access_token"
@@ -65,7 +73,6 @@ export default function PayPalSetup() {
                 onChange={(e) => setNewSecretKey(e.target.value)}
               />
 
-              {/* Button to submit */}
               <div className="mt-5 flex flex-row justify-end">
                 <Button
                   color="primary"
@@ -82,43 +89,39 @@ export default function PayPalSetup() {
                 </Button>
               </div>
             </form>
+
             <div>
-              <p className="text-lgf text-default mt-5 font-bold">Getting started with Paypal APP</p>
-              <p className="text-default font-semi mt-2">
-                Here in Cal.com we offer Paypal as one of our payment gateway. You can use your own Paypal
-                Business account to receive payments from your customers enabling and setting up price and
-                currency for each of your event types.
-              </p>
+              <p className="text-lgf text-default mt-5 font-bold">{t("paypal_getting_started")}</p>
+
+              <p className="text-default font-semi mt-2">{t("paypal_description")}</p>
 
               <p className="text-lgf text-default mt-5 inline-flex font-bold">
-                <CircleAlertIcon className="mr-2 mt-1 h-4 w-4" /> Important requirements:
+                <CircleAlertIcon className="mr-2 mt-1 h-4 w-4" />
+                {t("important_requirements")}
               </p>
+
               <ul className="text-default ml-1 mt-2 list-disc pl-2">
-                <li>Paypal Business account</li>
-                <li>Paypal Developer account</li>
+                <li>{t("paypal_business_account")}</li>
+                <li>{t("paypal_developer_account")}</li>
               </ul>
 
-              <p className="text-default mb-2 mt-5 font-bold">Resources:</p>
+              <p className="text-default mb-2 mt-5 font-bold">{t("resources")}</p>
+
               <a
                 className="text-orange-600 underline"
                 target="_blank"
                 href="https://developer.paypal.com/api/rest/#link-getclientidandclientsecret"
                 rel="noreferrer">
-                Link to Paypal developer API REST Setup Guide:
-                https://developer.paypal.com/api/rest/#link-getclientidandclientsecret
+                {t("paypal_rest_setup_guide")}
               </a>
 
-              <p className="text-lgf text-default mt-5 font-bold">Setup instructions</p>
-              <p className="text-default font-semi mt-2">
-                Remember to only proceed with the following steps if your account has already been upgraded to
-                a business account. Also keep in mind that some of the following steps might be different
-                since Paypal offers different experiences based on your country.
-              </p>
+              <p className="text-lgf text-default mt-5 font-bold">{t("paypal_setup_instructions")}</p>
+
+              <p className="text-default font-semi mt-2">{t("paypal_setup_note")}</p>
 
               <ol className="text-default ml-1 mt-5 list-decimal pl-2">
-                {/* @TODO: translate */}
                 <li>
-                  Log into your Paypal Developer account and create a new app{" "}
+                  {t("paypal_step_1")}{" "}
                   <a
                     target="_blank"
                     href="https://developer.paypal.com/dashboard/applications/live"
@@ -128,39 +131,38 @@ export default function PayPalSetup() {
                   </a>
                   .
                 </li>
-                <li>Choose a name for your application.</li>
-                <li>Click on the Create App button</li>
+
+                <li>{t("paypal_step_2")}</li>
+                <li>{t("paypal_step_3")}</li>
 
                 <li>
-                  Go back to{" "}
+                  {t("paypal_step_4_part_1")}{" "}
                   <a
                     className="text-orange-600 underline"
                     href="https://developer.paypal.com/dashboard/applications/live">
-                    dashboard
+                    {t("dashboard")}
                   </a>
-                  , click on new app created.
+                  , {t("paypal_step_4_part_2")}
                 </li>
-                <li>Copy the Client ID and Secret Key using copy buttons one by one.</li>
-                <li>Paste them on the required field and save them.</li>
-                <li>You should be all setup after this.</li>
+
+                <li>{t("paypal_step_5")}</li>
+                <li>{t("paypal_step_6")}</li>
+                <li>{t("paypal_step_7")}</li>
               </ol>
+
               <p className="text-default mt-5 inline-flex font-bold">
                 <CircleAlertIcon className="mr-2 mt-1 h-4 w-4" />
-                Reminder:
-              </p>
-              <p className="text-default mt-2">
-                Our integration creates a specific webhook on your Paypal account that we use to report back
-                transactions to our system. If you delete this webhook, we will not be able to report back and
-                you should Uninstall and Install the app again for this to work again. Uninstalling the app
-                won&apos;t delete your current event type price/currency configuration but you would not be
-                able to receive bookings.
+                {t("reminder")}:
               </p>
+
+              <p className="text-default mt-2">{t("paypal_webhook_reminder")}</p>
             </div>
           </div>
         </div>
       ) : (
         <AppNotInstalledMessage appName="paypal" />
       )}
+
       <Toaster position="bottom-right" />
     </div>
   );

apps/web/public/static/locales/en/common.json

@@ -4632,5 +4632,26 @@
   "last_6_months": "Last 6 months",
   "last_12_months": "Last 12 months",
   "calendar_events_disabled_video_limitation": "When calendar events are disabled, meeting links cannot be generated for apps whose link generation is tied to calendar event creation, for example, Google Meet and Microsoft Teams. Other video apps like Cal Video will continue to work.",
+  "paypal": "PayPal",
+  "paypal_getting_started": "Getting started with Paypal APP",
+  "important_requirements": "Important requirements:",
+  "paypal_description": "Here in Cal.com we offer Paypal as one of our payment gateway. You can use your own Paypal Business account to receive payments from your customers enabling and setting up price and currency for each of your event types.",
+  "paypal_payment_logo": "PayPal payment logo",
+  "secret_key": "Secret key",
+  "paypal_business_account": "PayPal Business account",
+  "paypal_developer_account": "PayPal Developer account",
+  "paypal_rest_setup_guide": "Link to PayPal Developer REST API setup guide",
+  "paypal_setup_instructions": "Setup instructions",
+  "paypal_setup_note": "Remember to only proceed with the following steps if your account has already been upgraded to a business account. Also keep in mind that some of the following steps might be different since PayPal offers different experiences based on your country.",
+  "paypal_step_1": "Log into your PayPal Developer account and create a new app",
+  "paypal_step_2": "Choose a name for your application.",
+  "paypal_step_3": "Click on the Create App button.",
+  "paypal_step_4_part_1": "Go back to the",
+  "paypal_step_4_part_2": "and click on the newly created app.",
+  "paypal_step_5": "Copy the Client ID and Secret key using the copy buttons one by one.",
+  "paypal_step_6": "Paste them in the required fields and save them.",
+  "paypal_step_7": "You should be all set up after this.",
+  "dashboard": "dashboard",
+  "paypal_webhook_reminder": "Our integration creates a specific webhook on your PayPal account that we use to report back transactions to our system. If you delete this webhook, we will not be able to report back and you should uninstall and install the app again for this to work properly. Uninstalling the app won't delete your current event type price/currency configuration but you will not be able to receive bookings.",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }