From 161f5c7000c301f388c79147a42a66e34cb8a089 Mon Sep 17 00:00:00 2001 From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Date: Wed, 11 Jan 2023 13:41:45 -0500 Subject: [PATCH] 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 Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- apps/web/public/static/locales/en/common.json | 1 + .../workflows/components/AddActionDialog.tsx | 4 +-- .../components/WorkflowStepContainer.tsx | 8 +++--- .../features/ee/workflows/lib/getOptions.ts | 2 +- .../ui/components/form/select/components.tsx | 25 ++++++++++++++++++- 5 files changed, 33 insertions(+), 7 deletions(-) diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index e37b21a0cb..b739d8f763 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/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", diff --git a/packages/features/ee/workflows/components/AddActionDialog.tsx b/packages/features/ee/workflows/components/AddActionDialog.tsx index a38bf4e03d..0e5872acf3 100644 --- a/packages/features/ee/workflows/components/AddActionDialog.tsx +++ b/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} /> ); }} diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx index eaab69dd97..98cd276894 100644 --- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx +++ b/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} /> ); }} diff --git a/packages/features/ee/workflows/lib/getOptions.ts b/packages/features/ee/workflows/lib/getOptions.ts index 557bbf93ab..7ccd63ca8c 100644 --- a/packages/features/ee/workflows/lib/getOptions.ts +++ b/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, }; }); } diff --git a/packages/ui/components/form/select/components.tsx b/packages/ui/components/form/select/components.tsx index 2508769002..cff98754ae 100644 --- a/packages/ui/components/form/select/components.tsx +++ b/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) => { + const { t } = useLocale(); + const router = useRouter(); + return ( - {props.label} {props.isSelected && } + <> + {props.label} + {(props.data as unknown as ExtendedOption).needsUpgrade && ( + + + + )} + {props.isSelected && } + ); };