Hotfix: Add back copy Typeform redirect url link and update screenshot (#4569)

* Add back copy Typeform redirect url link and update screenshot

* Delete unused files

packages/app-store/ee/routing_forms/components/FormActions.tsx

@@ -28,6 +28,7 @@ import {
 
 import { EmbedButton, EmbedDialog } from "@components/Embed";
 
+import getFieldIdentifier from "../lib/getFieldIdentifier";
 import { SerializableForm } from "../types/types";
 import { App_RoutingForms_Form } from ".prisma/client";
 
@@ -280,6 +281,7 @@ type FormActionType =
   | "embed"
   | "duplicate"
   | "download"
+  | "copyRedirectUrl"
   | "create";
 
 type FormActionProps<T> = {
@@ -302,6 +304,12 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
   const dropdown = dropdownCtxValue?.dropdown;
   const embedLink = `forms/${routingForm?.id}`;
   const formLink = `${CAL_URL}/${embedLink}`;
+  let redirectUrl = `${CAL_URL}/router?form=${routingForm?.id}`;
+
+  routingForm?.fields?.forEach((field) => {
+    redirectUrl += `&${getFieldIdentifier(field)}={Recalled_Response_For_This_Field}`;
+  });
+
   const { t } = useLocale();
   const router = useRouter();
   const actionData: Record<
@@ -339,6 +347,12 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
     create: {
       onClick: () => openModal(router, { action: "new" }),
     },
+    copyRedirectUrl: {
+      onClick: () => {
+        navigator.clipboard.writeText(redirectUrl);
+        showToast("Typeform Redirect URL copied! You can go and set the URL in Typeform form.", "success");
+      },
+    },
     toggle: {
       render: ({ routingForm, label = "", ...restProps }) => {
         if (!routingForm) {

packages/app-store/ee/routing_forms/components/SingleForm.tsx

@@ -2,20 +2,13 @@ import { App_RoutingForms_Form } from "@prisma/client";
 import { useRouter } from "next/router";
 import { useForm, UseFormReturn } from "react-hook-form";
 
+import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
 import { Form } from "@calcom/ui/form/fields";
 import { showToast } from "@calcom/ui/v2";
-import {
-  ButtonGroup,
-  TextAreaField,
-  TextField,
-  Tooltip,
-  DropdownMenuSeparator,
-  Button,
-  VerticalDivider,
-} from "@calcom/ui/v2";
+import { ButtonGroup, TextAreaField, TextField, Tooltip, Button, VerticalDivider } from "@calcom/ui/v2";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { ShellMain } from "@calcom/ui/v2/core/Shell";
 import Banner from "@calcom/ui/v2/core/banner";
@@ -41,6 +34,8 @@ const Actions = ({
   };
 }) => {
   const { t } = useLocale();
+  const { data: typeformApp } = useApp("typeform");
+
   return (
     <div className="flex items-center">
       <FormAction className="self-center" data-testid="toggle-form" action="toggle" routingForm={form} />
@@ -65,8 +60,9 @@ const Actions = ({
           size="icon"
           type="button"
           StartIcon={Icon.FiLink}
-          tooltip={t("copy_link")}
+          tooltip={t("copy_link_to_form")}
         />
+
         <Tooltip content="Download Responses">
           <FormAction
             data-testid="download-responses"
@@ -96,7 +92,20 @@ const Actions = ({
           type="button"
           tooltip={t("delete")}
         />
+        {typeformApp ? (
+          <FormActionsDropdown form={form}>
+            <FormAction
+              routingForm={form}
+              action="copyRedirectUrl"
+              color="minimal"
+              type="button"
+              StartIcon={Icon.FiLink}>
+              {t("Copy Typeform Redirect Url")}
+            </FormAction>
+          </FormActionsDropdown>
+        ) : null}
       </ButtonGroup>
+
       <div className="flex md:hidden">
         <FormActionsDropdown form={form}>
           <FormAction
@@ -115,8 +124,8 @@ const Actions = ({
             routingForm={form}
             color="minimal"
             type="button"
-            StartIcon={Icon.FiCopy}>
-            {t("copy")}
+            StartIcon={Icon.FiLink}>
+            {t("copy_link_to_form")}
           </FormAction>
           <FormAction
             action="download"
@@ -136,6 +145,16 @@ const Actions = ({
             StartIcon={Icon.FiCode}>
             {t("embed")}
           </FormAction>
+          {typeformApp ? (
+            <FormAction
+              routingForm={form}
+              action="copyRedirectUrl"
+              color="minimal"
+              type="button"
+              StartIcon={Icon.FiLink}>
+              {t("Copy Typeform Redirect Url")}
+            </FormAction>
+          ) : null}
           <FormAction
             action="_delete"
             routingForm={form}

packages/app-store/ee/routing_forms/pages/forms/[...appPages].tsx

@@ -1,4 +1,5 @@
 // TODO: i18n
+import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { AppGetServerSidePropsContext, AppPrisma, AppUser } from "@calcom/types/AppGetServerSideProps";
 import { Icon } from "@calcom/ui/Icon";
@@ -18,6 +19,7 @@ export default function RoutingForms({
   appUrl,
 }: inferSSRProps<typeof getServerSideProps> & { appUrl: string }) {
   const { t } = useLocale();
+  const { data: typeformApp } = useApp("typeform");
 
   function NewFormButton() {
     return (
@@ -115,6 +117,16 @@ export default function RoutingForms({
                                   StartIcon={Icon.FiCopy}>
                                   {t("duplicate")}
                                 </FormAction>
+                                {typeformApp ? (
+                                  <FormAction
+                                    routingForm={form}
+                                    action="copyRedirectUrl"
+                                    color="minimal"
+                                    type="button"
+                                    StartIcon={Icon.FiLink}>
+                                    {t("Copy Typeform Redirect Url")}
+                                  </FormAction>
+                                ) : null}
                                 <DropdownMenuSeparator className="h-px bg-gray-200" />
                                 <FormAction
                                   action="_delete"

packages/app-store/typeform/components/CopyRedirectUrlButton.tsx

@@ -1,32 +0,0 @@
-import getFieldIdentifier from "@calcom/app-store/ee/routing_forms/lib/getFieldIdentifier";
-import { SerializableForm } from "@calcom/app-store/ee/routing_forms/types/types";
-import { CAL_URL } from "@calcom/lib/constants";
-import useApp from "@calcom/lib/hooks/useApp";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
-import { Icon } from "@calcom/ui/Icon";
-
-import { App_RoutingForms_Form } from ".prisma/client";
-
-export default function CopyRedirectUrlButton({ form }: { form: SerializableForm<App_RoutingForms_Form> }) {
-  const { t } = useLocale();
-
-  const { data: typeformApp } = useApp("typeform");
-
-  let typeformRedirectUrl = `${CAL_URL}/router?form=${form.id}`;
-  form.fields?.forEach((field) => {
-    typeformRedirectUrl += `&${getFieldIdentifier(field)}={Recalled_Response_For_This_Field}`;
-  });
-  return typeformApp ? (
-    <button
-      onClick={() => {
-        navigator.clipboard.writeText(typeformRedirectUrl);
-        showToast("Typeform Redirect URL copied! You can go and set the URL in Typeform form.", "success");
-      }}
-      type="button"
-      className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900">
-      <Icon.FiLink className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
-      {t("Copy Typeform Redirect URL")}
-    </button>
-  ) : null;
-}

packages/app-store/typeform/components/index.ts

@@ -1 +0,0 @@
-export { default as CopyRedirectUrlButton } from "./CopyRedirectUrlButton";