Adds "Upgrade" paywall to Workflow SMS features instead of disabling them (#6412)

* adds upgrade badge to dropdown

* add space between batch and check

* add upgrade tool tip

* fix import

* code clean up

* fix type error

* fix type error

* fix type errors

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

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

@@ -1492,6 +1492,7 @@
   "invalid_admin_password": "You are set as an admin but you do not have a password length of at least 15 characters",
   "change_password_admin": "Change Password to gain admin access",
   "username_already_taken": "Username is already taken",
+  "upgrade_to_enable_feature": "You need to upgrade to enable this feature. Click to upgrade.",
   "new_attendee": "New Attendee",
   "awaiting_approval": "Awaiting Approval",
   "requires_google_calendar": "This app requires a Google Calendar connection",

packages/features/ee/workflows/components/AddActionDialog.tsx

@@ -136,8 +136,8 @@ export const AddActionDialog = (props: IAddActionDialog) => {
                         isOptionDisabled={(option: {
                           label: string;
                           value: WorkflowActions;
-                          disabled: boolean;
-                        }) => option.disabled}
+                          needsUpgrade: boolean;
+                        }) => option.needsUpgrade}
                       />
                     );
                   }}

packages/features/ee/workflows/components/WorkflowStepContainer.tsx

@@ -36,6 +36,7 @@ import {
   TextField,
   Editor,
   AddVariablesDropdown,
+  Tooltip,
 } from "@calcom/ui";
 
 import { DYNAMIC_TEXT_VARIABLES } from "../lib/constants";
@@ -54,6 +55,7 @@ type WorkflowStepProps = {
 export default function WorkflowStepContainer(props: WorkflowStepProps) {
   const { t, i18n } = useLocale();
   const utils = trpc.useContext();
+
   const { step, form, reload, setReload } = props;
   const { data: _verifiedNumbers } = trpc.viewer.workflows.getVerifiedNumbers.useQuery();
   const verifiedNumbers = _verifiedNumbers?.map((number) => number.phoneNumber);
@@ -264,7 +266,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
     const selectedAction = {
       label: actionString.charAt(0).toUpperCase() + actionString.slice(1),
       value: step.action,
-      disabled: false,
+      needsUpgrade: false,
     };
 
     const selectedTemplate = { label: t(`${step.template.toLowerCase()}`), value: step.template };
@@ -382,8 +384,8 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         isOptionDisabled={(option: {
                           label: string;
                           value: WorkflowActions;
-                          disabled: boolean;
-                        }) => option.disabled}
+                          needsUpgrade: boolean;
+                        }) => option.needsUpgrade}
                       />
                     );
                   }}

packages/features/ee/workflows/lib/getOptions.ts

@@ -13,7 +13,7 @@ export function getWorkflowActionOptions(t: TFunction, isTeamsPlan?: boolean) {
       return {
         label: actionString.charAt(0).toUpperCase() + actionString.slice(1),
         value: action,
-        disabled: isSMSAction && !isTeamsPlan,
+        needsUpgrade: isSMSAction && !isTeamsPlan,
       };
     });
 }

packages/ui/components/form/select/components.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from "next/router";
 import {
   components as reactSelectComponents,
   ControlProps,
@@ -12,8 +13,11 @@ import {
 } from "react-select";
 
 import { classNames } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import { Icon } from "../../../components/icon";
+import { Badge } from "../../badge";
+import { Tooltip } from "../../tooltip";
 
 export const InputComponent = <
   Option,
@@ -35,6 +39,12 @@ export const InputComponent = <
   );
 };
 
+type ExtendedOption = {
+  value: string | number;
+  label: string;
+  needsUpgrade?: boolean;
+};
+
 export const OptionComponent = <
   Option,
   IsMulti extends boolean = false,
@@ -43,6 +53,9 @@ export const OptionComponent = <
   className,
   ...props
 }: OptionProps<Option, IsMulti, Group>) => {
+  const { t } = useLocale();
+  const router = useRouter();
+
   return (
     <reactSelectComponents.Option
       {...props}
@@ -52,7 +65,17 @@ export const OptionComponent = <
         props.isFocused && "dark:!bg-darkgray-200 !bg-gray-100",
         props.isSelected && "dark:!bg-darkgray-300 !bg-neutral-900"
       )}>
-      <span>{props.label}</span> {props.isSelected && <Icon.FiCheck className="h-4 w-4" />}
+      <>
+        <span className="mr-auto">{props.label}</span>
+        {(props.data as unknown as ExtendedOption).needsUpgrade && (
+          <Tooltip content={t("upgrade_to_enable_feature")}>
+            <button type="button" onClick={() => router.replace("/teams")}>
+              <Badge variant="gray">{t("upgrade")}</Badge>
+            </button>
+          </Tooltip>
+        )}
+        {props.isSelected && <Icon.FiCheck className="ml-2 h-4 w-4" />}
+      </>
     </reactSelectComponents.Option>
   );
 };