only show invite link for app.cal.dev (#2807)

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Omar López <zomars@me.com>

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

@@ -822,13 +822,15 @@
   "generate_api_key": "Generate Api Key",
   "your_unique_api_key": "Your unique API key",
   "copy_safe_api_key": "Copy this API key and save it somewhere safe. If you lose this key you have to generate a new one.",
-  "zapier_setup_instructions": "<0>Go to: <1>Zapier Invite Link</1></0><1>Log into your Zapier account and create a new Zap.</1><2>Select Cal.com as your Trigger app. Also choose a Trigger event.</2><3>Choose your account and then enter your Unique API Key.</3><4>Test your Trigger.</4><5>You're set!</5>",
+  "zapier_setup_instructions": "<0>Log into your Zapier account and create a new Zap.</0><1>Select Cal.com as your Trigger app. Also choose a Trigger event.</1><2>Choose your account and then enter your Unique API Key.</2><3>Test your Trigger.</3><4>You're set!</4>",
   "install_zapier_app": "Please first install the Zapier App in the app store.",
   "go_to_app_store": "Go to App Store",
   "calendar_error": "Something went wrong, try reconnecting your calendar with all necessary permissions",
   "calendar_no_busy_slots": "There are no busy slots",
   "booking_details": "Booking details",
   "or_lowercase": "or",
   "nevermind": "Nevermind",
-  "cancel_event": "Cancel event"
+  "cancel_event": "Cancel event",
+  "go_to": "Go to: ",
+  "zapier_invite_link": "Zapier Invite Link"
 }

packages/app-store/zapier/pages/setup/index.tsx

@@ -33,6 +33,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
   );
   const [credentialId] = zapierCredentials?.credentialIds || [false];
   const showContent = integrations.data && integrations.isSuccess && credentialId;
+  const isCalDev = process.env.NEXT_PUBLIC_WEBAPP_URL === "https://app.cal.dev";
 
   async function createApiKey() {
     const event = { note: "Zapier", expiresAt: null, appId: ZAPIER };
@@ -48,7 +49,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
 
   if (integrations.isLoading) {
     return (
-      <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200">
+      <div className="absolute z-50 flex items-center w-full h-screen bg-gray-200">
         <Loader />
       </div>
     );
@@ -57,7 +58,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
   return (
     <div className="flex h-screen bg-gray-200">
       {showContent ? (
-        <div className="m-auto rounded bg-white p-10">
+        <div className="p-10 m-auto bg-white rounded">
           <div className="flex flex-row">
             <div className="mr-5">
               <Icon />
@@ -74,8 +75,8 @@ export default function ZapierSetup(props: IZapierSetupProps) {
               ) : (
                 <>
                   <div className="mt-1 text-xl">{t("your_unique_api_key")}</div>
-                  <div className="my-2 mt-3 flex">
-                    <div className="mr-1 w-full rounded bg-gray-100 p-3 pr-5">{newApiKey}</div>
+                  <div className="flex my-2 mt-3">
+                    <div className="w-full p-3 pr-5 mr-1 bg-gray-100 rounded">{newApiKey}</div>
                     <Tooltip content="copy to clipboard">
                       <Button
                         onClick={() => {
@@ -84,7 +85,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
                         }}
                         type="button"
                         className="px-4 text-base ">
-                        <ClipboardCopyIcon className="mr-2 h-5 w-5 text-neutral-100" />
+                        <ClipboardCopyIcon className="w-5 h-5 mr-2 text-neutral-100" />
                         {t("copy")}
                       </Button>
                     </Tooltip>
@@ -96,13 +97,16 @@ export default function ZapierSetup(props: IZapierSetupProps) {
               )}
 
               <ol className="mt-5 mb-5 ml-5 mr-5 list-decimal">
-                <Trans i18nKey="zapier_setup_instructions">
+                {isCalDev && (
                   <li>
-                    Go to:
+                    {t("go_to")}
                     <a href={props.inviteLink} className="text-orange-600 underline">
-                      Zapier Invite Link
+                      {t("zapier_invite_link")}
                     </a>
                   </li>
+                )
+                }
+                <Trans i18nKey="zapier_setup_instructions">
                   <li>Log into your Zapier account and create a new Zap.</li>
                   <li>Select Cal.com as your Trigger app. Also choose a Trigger event.</li>
                   <li>Choose your account and then enter your Unique API Key.</li>