From 41850c7f59f3b4f290babda567f64f9fb65e1b03 Mon Sep 17 00:00:00 2001
From: Meet Patel <meetcpatel906@gmail.com>
Date: Mon, 24 Jul 2023 19:44:28 +0530
Subject: [PATCH] fix: routing-forms protected with LicenseRequired (#9521)

---
 .../routing-forms/components/SingleForm.tsx   |   7 +-
 .../pages/forms/[...appPages].tsx             | 330 +++++++++---------
 2 files changed, 173 insertions(+), 164 deletions(-)

diff --git a/packages/app-store/routing-forms/components/SingleForm.tsx b/packages/app-store/routing-forms/components/SingleForm.tsx
index f3fb4031f3..2c965fffee 100644
--- a/packages/app-store/routing-forms/components/SingleForm.tsx
+++ b/packages/app-store/routing-forms/components/SingleForm.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
 import { Controller, useFormContext } from "react-hook-form";
 
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { ShellMain } from "@calcom/features/shell/Shell";
 import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -540,7 +541,11 @@ export default function SingleFormWrapper({ form: _form, ...props }: SingleFormC
   if (!form) {
     throw new Error(t("something_went_wrong"));
   }
-  return <SingleForm form={form} {...props} />;
+  return (
+    <LicenseRequired>
+      <SingleForm form={form} {...props} />
+    </LicenseRequired>
+  );
 }
 
 export const getServerSidePropsForSingleFormView = async function getServerSidePropsForSingleFormView(
diff --git a/packages/app-store/routing-forms/pages/forms/[...appPages].tsx b/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
index bd5c23a0ce..54345f2012 100644
--- a/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { useFormContext } from "react-hook-form";
 
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import SkeletonLoaderTeamList from "@calcom/features/ee/teams/components/SkeletonloaderTeamList";
 import { FilterResults } from "@calcom/features/filters/components/FilterResults";
 import { TeamsFilter } from "@calcom/features/filters/components/TeamsFilter";
@@ -119,182 +120,185 @@ export default function RoutingForms({
   ];
 
   return (
-    <ShellMain
-      heading="Routing Forms"
-      CTA={hasPaidPlan && forms?.length ? <NewFormButton /> : null}
-      subtitle={t("routing_forms_description")}>
-      <UpgradeTip
-        title={t("teams_plan_required")}
-        description={t("routing_forms_are_a_great_way")}
-        features={features}
-        background="/tips/routing-forms"
-        isParentLoading={<SkeletonLoaderTeamList />}
-        buttons={
-          <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
-            <ButtonGroup>
-              <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
-                {t("upgrade")}
-              </Button>
-              <Button color="minimal" href="https://go.cal.com/teams-video" target="_blank">
-                {t("learn_more")}
-              </Button>
-            </ButtonGroup>
-          </div>
-        }>
-        <FormActionsProvider appUrl={appUrl}>
-          <div className="-mx-4 md:-mx-8">
-            <div className="mb-10 w-full px-4 pb-2 sm:px-6 md:px-8">
-              <div className="flex">
-                <TeamsFilter />
-              </div>
-              <FilterResults
-                queryRes={queryRes}
-                emptyScreen={
-                  <EmptyScreen
-                    Icon={GitMerge}
-                    headline={t("create_your_first_form")}
-                    description={t("create_your_first_form_description")}
-                    buttonRaw={<NewFormButton />}
-                  />
-                }
-                noResultsScreen={
-                  <EmptyScreen
-                    Icon={GitMerge}
-                    headline={t("no_results_for_filter")}
-                    description={t("change_filter_common")}
-                  />
-                }
-                SkeletonLoader={SkeletonLoaderTeamList}>
-                <div className="bg-default mb-16 overflow-hidden">
-                  <List data-testid="routing-forms-list">
-                    {forms?.map(({ form, readOnly }) => {
-                      if (!form) {
-                        return null;
-                      }
+    <LicenseRequired>
+      <ShellMain
+        heading="Routing Forms"
+        CTA={hasPaidPlan && forms?.length ? <NewFormButton /> : null}
+        subtitle={t("routing_forms_description")}>
+        <UpgradeTip
+          title={t("teams_plan_required")}
+          description={t("routing_forms_are_a_great_way")}
+          features={features}
+          background="/tips/routing-forms"
+          isParentLoading={<SkeletonLoaderTeamList />}
+          buttons={
+            <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+              <ButtonGroup>
+                <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
+                  {t("upgrade")}
+                </Button>
+                <Button color="minimal" href="https://go.cal.com/teams-video" target="_blank">
+                  {t("learn_more")}
+                </Button>
+              </ButtonGroup>
+            </div>
+          }>
+          <FormActionsProvider appUrl={appUrl}>
+            <div className="-mx-4 md:-mx-8">
+              <div className="mb-10 w-full px-4 pb-2 sm:px-6 md:px-8">
+                <div className="flex">
+                  <TeamsFilter />
+                </div>
+                <FilterResults
+                  queryRes={queryRes}
+                  emptyScreen={
+                    <EmptyScreen
+                      Icon={GitMerge}
+                      headline={t("create_your_first_form")}
+                      description={t("create_your_first_form_description")}
+                      buttonRaw={<NewFormButton />}
+                    />
+                  }
+                  noResultsScreen={
+                    <EmptyScreen
+                      Icon={GitMerge}
+                      headline={t("no_results_for_filter")}
+                      description={t("change_filter_common")}
+                    />
+                  }
+                  SkeletonLoader={SkeletonLoaderTeamList}>
+                  <div className="bg-default mb-16 overflow-hidden">
+                    <List data-testid="routing-forms-list">
+                      {forms?.map(({ form, readOnly }) => {
+                        if (!form) {
+                          return null;
+                        }
 
-                      const description = form.description || "";
-                      form.routes = form.routes || [];
-                      const fields = form.fields || [];
-                      const userRoutes = form.routes.filter((route) => !isFallbackRoute(route));
-                      return (
-                        <ListLinkItem
-                          key={form.id}
-                          href={appUrl + "/form-edit/" + form.id}
-                          heading={form.name}
-                          disabled={readOnly}
-                          subHeading={description}
-                          className="space-x-2 rtl:space-x-reverse"
-                          actions={
-                            <>
-                              {form.team?.name && (
-                                <div className="border-r-2 border-neutral-300">
-                                  <Badge className="ltr:mr-2 rtl:ml-2" variant="gray">
-                                    {form.team.name}
-                                  </Badge>
-                                </div>
-                              )}
-                              <FormAction
-                                disabled={readOnly}
-                                className="self-center"
-                                action="toggle"
-                                routingForm={form}
-                              />
-                              <ButtonGroup combined>
-                                <Tooltip content={t("preview")}>
+                        const description = form.description || "";
+                        form.routes = form.routes || [];
+                        const fields = form.fields || [];
+                        const userRoutes = form.routes.filter((route) => !isFallbackRoute(route));
+                        return (
+                          <ListLinkItem
+                            key={form.id}
+                            href={appUrl + "/form-edit/" + form.id}
+                            heading={form.name}
+                            disabled={readOnly}
+                            subHeading={description}
+                            className="space-x-2 rtl:space-x-reverse"
+                            actions={
+                              <>
+                                {form.team?.name && (
+                                  <div className="border-r-2 border-neutral-300">
+                                    <Badge className="ltr:mr-2 rtl:ml-2" variant="gray">
+                                      {form.team.name}
+                                    </Badge>
+                                  </div>
+                                )}
+                                <FormAction
+                                  disabled={readOnly}
+                                  className="self-center"
+                                  action="toggle"
+                                  routingForm={form}
+                                />
+                                <ButtonGroup combined>
+                                  <Tooltip content={t("preview")}>
+                                    <FormAction
+                                      action="preview"
+                                      routingForm={form}
+                                      target="_blank"
+                                      StartIcon={ExternalLink}
+                                      color="secondary"
+                                      variant="icon"
+                                    />
+                                  </Tooltip>
                                   <FormAction
-                                    action="preview"
                                     routingForm={form}
-                                    target="_blank"
-                                    StartIcon={ExternalLink}
+                                    action="copyLink"
                                     color="secondary"
                                     variant="icon"
+                                    StartIcon={LinkIcon}
+                                    tooltip={t("copy_link_to_form")}
                                   />
-                                </Tooltip>
-                                <FormAction
-                                  routingForm={form}
-                                  action="copyLink"
-                                  color="secondary"
-                                  variant="icon"
-                                  StartIcon={LinkIcon}
-                                  tooltip={t("copy_link_to_form")}
-                                />
-                                <FormAction
-                                  routingForm={form}
-                                  action="embed"
-                                  color="secondary"
-                                  variant="icon"
-                                  StartIcon={Code}
-                                  tooltip={t("embed")}
-                                />
-                                <FormActionsDropdown disabled={readOnly}>
                                   <FormAction
-                                    action="edit"
                                     routingForm={form}
-                                    color="minimal"
-                                    className="!flex"
-                                    StartIcon={Edit}>
-                                    {t("edit")}
-                                  </FormAction>
-                                  <FormAction
-                                    action="download"
-                                    routingForm={form}
-                                    color="minimal"
-                                    StartIcon={Download}>
-                                    {t("download_responses")}
-                                  </FormAction>
-                                  <FormAction
-                                    action="duplicate"
-                                    routingForm={form}
-                                    color="minimal"
-                                    className="w-full"
-                                    StartIcon={Copy}>
-                                    {t("duplicate")}
-                                  </FormAction>
-                                  {typeformApp?.isInstalled ? (
+                                    action="embed"
+                                    color="secondary"
+                                    variant="icon"
+                                    StartIcon={Code}
+                                    tooltip={t("embed")}
+                                  />
+                                  <FormActionsDropdown disabled={readOnly}>
                                     <FormAction
-                                      data-testid="copy-redirect-url"
+                                      action="edit"
                                       routingForm={form}
-                                      action="copyRedirectUrl"
                                       color="minimal"
-                                      type="button"
-                                      StartIcon={LinkIcon}>
-                                      {t("Copy Typeform Redirect Url")}
+                                      className="!flex"
+                                      StartIcon={Edit}>
+                                      {t("edit")}
                                     </FormAction>
-                                  ) : null}
-                                  <FormAction
-                                    action="_delete"
-                                    routingForm={form}
-                                    color="destructive"
-                                    className="w-full"
-                                    StartIcon={Trash}>
-                                    {t("delete")}
-                                  </FormAction>
-                                </FormActionsDropdown>
-                              </ButtonGroup>
-                            </>
-                          }>
-                          <div className="flex flex-wrap gap-1">
-                            <Badge variant="gray" startIcon={Menu}>
-                              {fields.length} {fields.length === 1 ? "field" : "fields"}
-                            </Badge>
-                            <Badge variant="gray" startIcon={GitMerge}>
-                              {userRoutes.length} {userRoutes.length === 1 ? "route" : "routes"}
-                            </Badge>
-                            <Badge variant="gray" startIcon={MessageCircle}>
-                              {form._count.responses} {form._count.responses === 1 ? "response" : "responses"}
-                            </Badge>
-                          </div>
-                        </ListLinkItem>
-                      );
-                    })}
-                  </List>
-                </div>
-              </FilterResults>
+                                    <FormAction
+                                      action="download"
+                                      routingForm={form}
+                                      color="minimal"
+                                      StartIcon={Download}>
+                                      {t("download_responses")}
+                                    </FormAction>
+                                    <FormAction
+                                      action="duplicate"
+                                      routingForm={form}
+                                      color="minimal"
+                                      className="w-full"
+                                      StartIcon={Copy}>
+                                      {t("duplicate")}
+                                    </FormAction>
+                                    {typeformApp?.isInstalled ? (
+                                      <FormAction
+                                        data-testid="copy-redirect-url"
+                                        routingForm={form}
+                                        action="copyRedirectUrl"
+                                        color="minimal"
+                                        type="button"
+                                        StartIcon={LinkIcon}>
+                                        {t("Copy Typeform Redirect Url")}
+                                      </FormAction>
+                                    ) : null}
+                                    <FormAction
+                                      action="_delete"
+                                      routingForm={form}
+                                      color="destructive"
+                                      className="w-full"
+                                      StartIcon={Trash}>
+                                      {t("delete")}
+                                    </FormAction>
+                                  </FormActionsDropdown>
+                                </ButtonGroup>
+                              </>
+                            }>
+                            <div className="flex flex-wrap gap-1">
+                              <Badge variant="gray" startIcon={Menu}>
+                                {fields.length} {fields.length === 1 ? "field" : "fields"}
+                              </Badge>
+                              <Badge variant="gray" startIcon={GitMerge}>
+                                {userRoutes.length} {userRoutes.length === 1 ? "route" : "routes"}
+                              </Badge>
+                              <Badge variant="gray" startIcon={MessageCircle}>
+                                {form._count.responses}{" "}
+                                {form._count.responses === 1 ? "response" : "responses"}
+                              </Badge>
+                            </div>
+                          </ListLinkItem>
+                        );
+                      })}
+                    </List>
+                  </div>
+                </FilterResults>
+              </div>
             </div>
-          </div>
-        </FormActionsProvider>
-      </UpgradeTip>
-    </ShellMain>
+          </FormActionsProvider>
+        </UpgradeTip>
+      </ShellMain>
+    </LicenseRequired>
   );
 }