fix zapier app settings (#7161)

Co-authored-by: CarinaWolli <wollencarina@gmail.com>

apps/web/components/AppListCard.tsx

@@ -63,8 +63,8 @@ export default function AppListCard(props: AppListCardProps) {
   }, []);
 
   return (
-    <div className={`p-4 ${highlight ? "bg-yellow-100" : ""}`}>
-      <div className="flex  gap-x-3">
+    <div className={`${highlight ? "bg-yellow-100" : ""}`}>
+      <div className="flex gap-x-3 p-4">
         {logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
         <div className="flex grow flex-col gap-y-1 truncate">
           <div className="flex items-center gap-x-2">

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

@@ -1598,5 +1598,6 @@
   "booking_with_payment_cancelled": "Paying for this event is no longer possible",
   "booking_with_payment_cancelled_already_paid": "A refund for this booking payment it's on the way.",
   "booking_with_payment_cancelled_refunded": "This booking payment has been refunded.",
-  "booking_confirmation_failed": "Booking confirmation failed"
+  "booking_confirmation_failed": "Booking confirmation failed",
+  "get_started_zapier_templates": "Get started with Zapier templates"
 }

packages/app-store/_components/AppSettings.tsx

@@ -5,7 +5,7 @@ import { DynamicComponent } from "./DynamicComponent";
 export const AppSettings = (props: { slug: string }) => {
   return (
     <DynamicComponent<typeof AppSettingsComponentsMap>
-      wrapperClassName="border-t border-gray-200 bg-gray-100"
+      wrapperClassName="border-t border-gray-200 p-6"
       componentMap={AppSettingsComponentsMap}
       {...props}
     />

packages/app-store/weather_in_your_calendar/components/AppSettingsInterface.tsx

@@ -15,7 +15,7 @@ export default function AppSettings() {
   const [location, setLocation] = useState("");
 
   return (
-    <div className="space-y-4 px-4 pt-4 pb-4 text-sm">
+    <div className="space-y-4 text-sm">
       <TextField
         placeholder="San Francisco"
         value={location}

packages/app-store/zapier/components/AppSettingsInterface.tsx

@@ -1,3 +1,5 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
 import TemplateCard from "./TemplateCard";
 
 export type Template = {
@@ -12,58 +14,62 @@ const templates: Template[] = [
     icon: "gmail.svg",
     app: "Gmail",
     text: "Send emails via Gmail for scheduled events",
-    link: "https://zapier.com/editor/170116665?attempt_id=6e954288-db41-43e8-8417-4a7b8f1a1166",
+    link: "https://zapier.com/app/editor/template/1071345",
   },
   {
     icon: "googleSheets.svg",
     app: "Google Sheets",
     text: "Create Google Sheets rows for scheduled events",
-    link: "https://workflows.zapier.com/?attempt_id=a086d136-b084-45bc-a6aa-c9f460b05b7d&template=1082047",
+    link: "https://zapier.com/app/editor/template/1082047",
   },
   {
     icon: "salesforce.svg",
     app: "Salesforce",
     text: "Create Salesforce leads from new bookings",
-    link: "https://zapier.com/editor/170116721?attempt_id=9f939229-ee89-4391-b9c7-f4645c60dbd4",
+    link: "https://zapier.com/app/editor/template/1082050",
   },
   {
     icon: "todoist.svg",
     app: "Todoist",
     text: "Create Todoist tasks for scheduled events",
-    link: "https://zapier.com/editor/170116746?attempt_id=d4501c34-c3f2-4e62-b5a2-034fbf39320d",
+    link: "https://zapier.com/app/editor/template/1082073",
   },
   {
     icon: "gmail.svg",
     app: "Gmail",
     text: "Send emails via Gmail for rescheduled events",
-    link: "https://zapier.com/editor/170116757?attempt_id=40e837b6-93e1-4bff-9cd7-5c8df1b0741e",
+    link: "https://zapier.com/app/editor/template/1083605",
   },
   {
     icon: "gmail.svg",
     app: "Gmail",
     text: "Send emails via Gmail for cancelled events",
-    link: "https://zapier.com/editor/170116884?attempt_id=e52a2a0a-cea8-4d95-93ca-f010b3aceda1",
+    link: "https://zapier.com/app/editor/template/1083609",
   },
   {
     icon: "gmail.svg",
     app: "Gmail",
     text: "Send emails via Gmail after scheduled meetings end",
-    link: "https://zapier.com/editor/170116896?attempt_id=28a54a64-e1e4-4a93-b5e9-1258a083581d",
+    link: "https://zapier.com/app/editor/template/1083613",
   },
   {
     icon: "googleCalendar.svg",
     app: "Google Calendar",
     text: "Add new bookings to Google Calendar",
-    link: "https://zapier.com/editor/170116908?attempt_id=e2b7f20c-8825-42f8-a031-5134a02b7311",
+    link: "https://zapier.com/app/editor/template/1083651",
   },
 ];
 
 export default function AppSettings() {
+  const { t } = useLocale();
   return (
-    <div className="grid gap-4 p-4 md:grid-cols-2">
-      {templates.map((template, index) => (
-        <TemplateCard key={index} template={template} />
-      ))}
-    </div>
+    <>
+      <div className="text-sm font-semibold leading-4 ">{t("get_started_zapier_templates")}</div>
+      <div className="mt-4 grid gap-4 md:grid-cols-2">
+        {templates.map((template, index) => (
+          <TemplateCard key={index} template={template} />
+        ))}
+      </div>
+    </>
   );
 }

packages/app-store/zapier/components/TemplateCard.tsx

@@ -4,8 +4,8 @@ import type { Template } from "./AppSettingsInterface";
 
 export default function TemplateCard({ template }: { template: Template }) {
   return (
-    <div className="rounded-md border border-gray-200 bg-white p-5">
-      <div className="min-h-16 flex items-start justify-start">
+    <div className="min-h-16 sticky rounded-md border border-gray-200 bg-white p-5">
+      <div className="flex items-start justify-start">
         <div>
           <div className="mr-4 flex h-12 w-12 items-center justify-center rounded-md p-1">
             <img className="h-8" alt={template.app} src={`/api/app-store/zapier/${template.icon}`} />
@@ -18,14 +18,12 @@ export default function TemplateCard({ template }: { template: Template }) {
           </div>
         </div>
       </div>
-      <div className="relative float-right ml-auto mt-4 hidden h-full sm:block">
-        <Button
-          color="secondary"
-          className="absolute bottom-0 right-0 w-[90px]"
-          target="_blank"
-          href={template.link}>
-          Use Zap
-        </Button>
+      <div className="hidden w-full sm:block">
+        <div className="float-right">
+          <Button color="secondary" className=" w-[90px]" target="_blank" href={template.link}>
+            Use Zap
+          </Button>
+        </div>
       </div>
       <div className="mt-2 block w-full sm:hidden">
         <div className="float-right">