From 74803b8270db99b8693d004de86d32cc4793c116 Mon Sep 17 00:00:00 2001 From: Aman Agarwal Date: Mon, 9 Dec 2024 12:49:19 +0530 Subject: [PATCH 01/11] feat: adding new integration premium tags --- app/client/src/ce/constants/messages.ts | 25 +++ app/client/src/ce/utils/analyticsUtilTypes.ts | 10 +- .../CreateNewDatasourceTab.tsx | 5 +- .../IntegrationEditor/DatasourceHome.tsx | 4 +- .../Editor/IntegrationEditor/NewQuery.tsx | 4 +- .../PremiumDatasources/ContactForm.tsx | 168 ++++++++++++++++++ .../PremiumDatasources/index.tsx | 78 ++++++++ app/client/src/utils/formhelpers.ts | 24 +++ 8 files changed, 314 insertions(+), 4 deletions(-) create mode 100644 app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx create mode 100644 app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index 02ae2a652d9c..7d2b43d6955c 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -2544,3 +2544,28 @@ export const CUSTOM_WIDGET_BUILDER_TAB_TITLE = { STYLE: () => "Style", JS: () => "Javascript", }; + +export const PREMIUM_DATASOURCES = { + RELEVANT_EMAIL_DESCRIPTION: () => + "Unblock advanced integrations. Let our team guide you in selecting the plan that fits your needs. Schedule a call now to see how Appsmith can transform your workflows!", + NON_RELEVANT_EMAIL_DESCRIPTION: () => + "Unblock advanced integrations. Let our team guide you in selecting the plan that fits your needs. Give us your email and the Appsmith team will reach out to you soon.", + COMING_SOON_SUFFIX: () => "Coming soon", + COMING_SOON_DESCRIPTION: () => + "The Appsmith Team is actively working on it. We’ll let you know when this integration is live. ", + LEARN_MORE: () => "Learn more about Premium", + SCHEDULE_CALL: () => "Schedule a call", + SUBMIT: () => "Submit", + NOTIFY_ME: () => "Notify me", + SUCCESS_TOAST_MESSAGE: () => + "Thank you! The Appsmith Team will contact you shortly.", + FORM_EMAIL: { + LABEL: () => "Email", + DESCRIPTION: () => + "Appsmith might use this email to follow up on your integration interest.", + NAME: "email", + ERROR: () => "Please enter email", + }, + PREMIUM_TAG: () => "Premium", + SOON_TAG: () => "Soon", +}; diff --git a/app/client/src/ce/utils/analyticsUtilTypes.ts b/app/client/src/ce/utils/analyticsUtilTypes.ts index ede9702143ea..cd65088106cb 100644 --- a/app/client/src/ce/utils/analyticsUtilTypes.ts +++ b/app/client/src/ce/utils/analyticsUtilTypes.ts @@ -352,7 +352,8 @@ export type EventName = | BUILDING_BLOCKS_EVENTS | "VISIT_SELF_HOST_DOCS" | "CANVAS_HOVER" - | "MALFORMED_USAGE_PULSE"; + | "MALFORMED_USAGE_PULSE" + | PREMIUM_DATASOURCES_EVENTS; type HOMEPAGE_CREATE_APP_FROM_TEMPLATE_EVENTS = | "TEMPLATE_DROPDOWN_CLICK" @@ -466,3 +467,10 @@ export type CUSTOM_WIDGET_EVENTS = | "CUSTOM_WIDGET_BUILDER_DEBUGGER_VISIBILITY_CHANGED" | "CUSTOM_WIDGET_API_TRIGGER_EVENT" | "CUSTOM_WIDGET_API_UPDATE_MODEL"; + +export type PREMIUM_DATASOURCES_EVENTS = + | "PREMIUM_INTEGRATION_CTA" + | "PREMIUM_MODAL_RELEVANT_LEARN_MORE" + | "PREMIUM_MODAL_NOT_RELEVANT_LEARN_MORE" + | "PREMIUM_MODAL_RELEVANT_SCHEDULE_CALL" + | "PREMIUM_MODAL_NOT_RELEVANT_SUBMIT"; diff --git a/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx b/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx index 8bbdc69257f4..541f4d8d952d 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx @@ -40,6 +40,7 @@ import { useParentEntityInfo } from "ee/hooks/datasourceEditorHooks"; import AIDataSources from "./AIDataSources"; import Debugger from "../DataSourceEditor/Debugger"; import { isPluginActionCreating } from "PluginActionEditor/store"; +import { PremiumDatasources } from "./PremiumDatasources"; const NewIntegrationsContainer = styled.div` ${thinScrollbar}; @@ -169,7 +170,9 @@ function CreateNewDatasource({ parentEntityType={parentEntityType} showMostPopularPlugins={showMostPopularPlugins} showUnsupportedPluginDialog={showUnsupportedPluginDialog} - /> + > + {showMostPopularPlugins && } + ); } diff --git a/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx b/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx index 85eee49230eb..adbb9d50963f 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { type ReactNode } from "react"; import styled from "styled-components"; import { connect } from "react-redux"; import { initialize } from "redux-form"; @@ -132,6 +132,7 @@ interface DatasourceHomeScreenProps { // eslint-disable-next-line @typescript-eslint/no-explicit-any showUnsupportedPluginDialog: (callback: any) => void; isAirgappedInstance?: boolean; + children?: ReactNode; } interface ReduxDispatchProps { @@ -294,6 +295,7 @@ class DatasourceHomeScreen extends React.Component { ); })} + {this.props.children} ); diff --git a/app/client/src/pages/Editor/IntegrationEditor/NewQuery.tsx b/app/client/src/pages/Editor/IntegrationEditor/NewQuery.tsx index 15ea740854db..78fec8f8a883 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/NewQuery.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/NewQuery.tsx @@ -56,7 +56,9 @@ class QueryHomeScreen extends React.Component { parentEntityType={parentEntityType} showMostPopularPlugins={showMostPopularPlugins} showUnsupportedPluginDialog={showUnsupportedPluginDialog} - /> + > + {this.props.children} + ); } diff --git a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx new file mode 100644 index 000000000000..db1c133c681d --- /dev/null +++ b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx @@ -0,0 +1,168 @@ +import { Button, Flex, ModalHeader, toast } from "@appsmith/ads"; +import { createMessage, PREMIUM_DATASOURCES } from "ee/constants/messages"; +import type { AppState } from "ee/reducers"; +import React, { useCallback } from "react"; +import { connect } from "react-redux"; +import { + Field, + formValueSelector, + getFormSyncErrors, + reduxForm, + type FormErrors, + type InjectedFormProps, +} from "redux-form"; +import { getCurrentUser } from "selectors/usersSelectors"; +import styled from "styled-components"; +import { isEmail, isRelevantEmail } from "utils/formhelpers"; +import ReduxFormTextField from "components/utils/ReduxFormTextField"; +import AnalyticsUtil from "ee/utils/AnalyticsUtil"; + +const FormWrapper = styled.form` + display: flex; + flex-direction: column; + gap: var(--ads-spaces-7); +`; + +const PremiumDatasourceContactForm = ( + props: PremiumDatasourceContactFormProps, +) => { + const onSubmit = () => { + submitEvent(); + toast.show(createMessage(PREMIUM_DATASOURCES.SUCCESS_TOAST_MESSAGE), { + kind: "success", + }); + props.closeModal(); + }; + + const validRelevantEmail = isRelevantEmail(props.email || ""); + + const onClickLearnMore = useCallback(() => { + AnalyticsUtil.logEvent( + validRelevantEmail + ? "PREMIUM_MODAL_RELEVANT_LEARN_MORE" + : "PREMIUM_MODAL_NOT_RELEVANT_LEARN_MORE", + { + integrationName: props.integrationName, + email: props.email, + }, + ); + }, [props.email, props.integrationName]); + + const submitEvent = useCallback(() => { + AnalyticsUtil.logEvent( + validRelevantEmail + ? "PREMIUM_MODAL_RELEVANT_SCHEDULE_CALL" + : "PREMIUM_MODAL_NOT_RELEVANT_SUBMIT", + { + integrationName: props.integrationName, + email: props.email, + isEnterprise: props.isEnterprise, + }, + ); + }, [props.email, props.integrationName, props.isEnterprise]); + + return ( + <> + {`${props.integrationName} ${props.isEnterprise ? `- ${createMessage(PREMIUM_DATASOURCES.COMING_SOON_SUFFIX)}` : ""}`} + +

+ {props.isEnterprise + ? createMessage(PREMIUM_DATASOURCES.COMING_SOON_DESCRIPTION) + : validRelevantEmail + ? createMessage(PREMIUM_DATASOURCES.RELEVANT_EMAIL_DESCRIPTION) + : createMessage( + PREMIUM_DATASOURCES.NON_RELEVANT_EMAIL_DESCRIPTION, + )} +

+ + + {!props.isEnterprise && ( + + )} + + + + + ); +}; + +const PREMIUM_INTEGRATION_CONTACT_FORM = "PREMIUM_INTEGRATION_CONTACT_FORM"; + +const selector = formValueSelector(PREMIUM_INTEGRATION_CONTACT_FORM); + +interface PremiumDatasourceContactFormValues { + email?: string; +} + +type PremiumDatasourceContactFormProps = PremiumDatasourceContactFormValues & { + formSyncErrors?: FormErrors; + closeModal: () => void; + integrationName: string; + isEnterprise: boolean; +} & InjectedFormProps< + PremiumDatasourceContactFormValues, + { + formSyncErrors?: FormErrors; + closeModal: () => void; + integrationName: string; + isEnterprise: boolean; + } + >; + +const validate = (values: PremiumDatasourceContactFormValues) => { + const errors: Partial = {}; + + if (!values.email || !isEmail(values.email)) { + errors.email = createMessage(PREMIUM_DATASOURCES.FORM_EMAIL.ERROR); + } + + return errors; +}; + +export default connect((state: AppState) => { + const currentUser = getCurrentUser(state); + + return { + email: selector(state, "email"), + initialValues: { + email: currentUser?.email, + }, + formSyncErrors: getFormSyncErrors(PREMIUM_INTEGRATION_CONTACT_FORM)(state), + }; +}, null)( + reduxForm< + PremiumDatasourceContactFormValues, + { + formSyncErrors?: FormErrors; + closeModal: () => void; + integrationName: string; + isEnterprise: boolean; + } + >({ + validate, + form: PREMIUM_INTEGRATION_CONTACT_FORM, + enableReinitialize: true, + })(PremiumDatasourceContactForm), +); diff --git a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx new file mode 100644 index 000000000000..08157e7158c2 --- /dev/null +++ b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx @@ -0,0 +1,78 @@ +import React, { useState } from "react"; +import { ApiCard, CardContentWrapper } from "../NewApi"; +import AnalyticsUtil from "ee/utils/AnalyticsUtil"; +import { getAssetUrl } from "ee/utils/airgapHelpers"; +import { Modal, ModalContent, Tag } from "@appsmith/ads"; +import styled from "styled-components"; +import ContactForm from "./ContactForm"; +import { createMessage, PREMIUM_DATASOURCES } from "ee/constants/messages"; + +const PREMIUM_INTEGRATIONS = [ + { + name: "Zendesk", + icon: "", + }, + { + name: "Salesforce", + icon: "", + }, +]; + +const ModalContentWrapper = styled(ModalContent)` + max-width: 518px; +`; + +export function PremiumDatasources() { + const [selectedIntegration, setSelectedIntegration] = useState(""); + const handleOnClick = (name: string) => { + AnalyticsUtil.logEvent("PREMIUM_INTEGRATION_CTA", { + integrationName: name, + }); + setSelectedIntegration(name); + }; + + const onOpenChange = (isOpen: boolean) => { + if (!isOpen) { + setSelectedIntegration(""); + } + }; + + const isEnterprise = false; + + return ( + <> + {PREMIUM_INTEGRATIONS.map((integration) => ( + { + handleOnClick(integration.name); + }} + > + + {integration.name} +

{integration.name}

+ + {isEnterprise + ? createMessage(PREMIUM_DATASOURCES.SOON_TAG) + : createMessage(PREMIUM_DATASOURCES.PREMIUM_TAG)} + + + + ))} + + + setSelectedIntegration("")} + integrationName={selectedIntegration} + isEnterprise={isEnterprise} + /> + + + + ); +} diff --git a/app/client/src/utils/formhelpers.ts b/app/client/src/utils/formhelpers.ts index 3ff8ed1e97d7..1ec525d76e7a 100644 --- a/app/client/src/utils/formhelpers.ts +++ b/app/client/src/utils/formhelpers.ts @@ -29,3 +29,27 @@ export const isEmail = (value: string) => { return re.test(value); }; + +export function isRelevantEmail(email: string) { + const generalDomains = [ + "gmail.com", + "yahoo.com", + "outlook.com", + "hotmail.com", + "aol.com", + "icloud.com", + "protonmail.com", + "zoho.com", + "yandex.com", + ]; + + // Extract the domain from the email + const domain = email.split("@")[1]?.toLowerCase(); + + if (!domain) { + return false; + } + + // Check if the domain exists in the list of general domains + return !generalDomains.includes(domain); +} From 27957691639779d143be7c6a60aa0892f84e2c2b Mon Sep 17 00:00:00 2001 From: Aman Agarwal Date: Wed, 11 Dec 2024 18:26:24 +0530 Subject: [PATCH 02/11] chore: added premium tags datasources for knowing user's request --- .../PremiumDatasources/ContactForm.tsx | 15 ++++++---- .../PremiumDatasources/index.tsx | 28 ++++++++++++------- app/client/src/ce/utils/analyticsUtilTypes.ts | 4 ++- .../PremiumDatasources/index.tsx | 3 ++ .../CreateNewDatasourceTab.tsx | 2 +- 5 files changed, 34 insertions(+), 18 deletions(-) rename app/client/src/{pages/Editor => ce/pages}/IntegrationEditor/PremiumDatasources/ContactForm.tsx (92%) rename app/client/src/{pages/Editor => ce/pages}/IntegrationEditor/PremiumDatasources/index.tsx (79%) create mode 100644 app/client/src/ee/pages/IntegrationEditor/PremiumDatasources/index.tsx diff --git a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx b/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx similarity index 92% rename from app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx rename to app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx index db1c133c681d..260a80a367c3 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx +++ b/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx @@ -16,6 +16,7 @@ import styled from "styled-components"; import { isEmail, isRelevantEmail } from "utils/formhelpers"; import ReduxFormTextField from "components/utils/ReduxFormTextField"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; +import { ENTERPRISE_PRICING_PAGE } from "constants/ThirdPartyConstants"; const FormWrapper = styled.form` display: flex; @@ -42,21 +43,23 @@ const PremiumDatasourceContactForm = ( ? "PREMIUM_MODAL_RELEVANT_LEARN_MORE" : "PREMIUM_MODAL_NOT_RELEVANT_LEARN_MORE", { - integrationName: props.integrationName, + integration_name: props.integrationName, email: props.email, }, ); + window.open(ENTERPRISE_PRICING_PAGE, "_blank"); }, [props.email, props.integrationName]); const submitEvent = useCallback(() => { AnalyticsUtil.logEvent( - validRelevantEmail - ? "PREMIUM_MODAL_RELEVANT_SCHEDULE_CALL" - : "PREMIUM_MODAL_NOT_RELEVANT_SUBMIT", + props.isEnterprise + ? "SOON_NOTIFY_REQUEST" + : validRelevantEmail + ? "PREMIUM_MODAL_RELEVANT_SCHEDULE_CALL" + : "PREMIUM_MODAL_NOT_RELEVANT_SUBMIT", { - integrationName: props.integrationName, + integration_name: props.integrationName, email: props.email, - isEnterprise: props.isEnterprise, }, ); }, [props.email, props.integrationName, props.isEnterprise]); diff --git a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx b/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/index.tsx similarity index 79% rename from app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx rename to app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/index.tsx index 08157e7158c2..cd8feb5aa6ab 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx +++ b/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/index.tsx @@ -1,5 +1,8 @@ import React, { useState } from "react"; -import { ApiCard, CardContentWrapper } from "../NewApi"; +import { + ApiCard, + CardContentWrapper, +} from "../../../../pages/Editor/IntegrationEditor/NewApi"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { getAssetUrl } from "ee/utils/airgapHelpers"; import { Modal, ModalContent, Tag } from "@appsmith/ads"; @@ -10,11 +13,11 @@ import { createMessage, PREMIUM_DATASOURCES } from "ee/constants/messages"; const PREMIUM_INTEGRATIONS = [ { name: "Zendesk", - icon: "", + icon: "https://assets.appsmith.com/zendesk-icon.png", }, { name: "Salesforce", - icon: "", + icon: "https://assets.appsmith.com/salesforce-icon.png", }, ]; @@ -22,12 +25,19 @@ const ModalContentWrapper = styled(ModalContent)` max-width: 518px; `; -export function PremiumDatasources() { +export default function PremiumDatasources({ + isEnterprise, +}: { + isEnterprise?: boolean; +}) { const [selectedIntegration, setSelectedIntegration] = useState(""); const handleOnClick = (name: string) => { - AnalyticsUtil.logEvent("PREMIUM_INTEGRATION_CTA", { - integrationName: name, - }); + AnalyticsUtil.logEvent( + isEnterprise ? "SOON_INTEGRATION_CTA" : "PREMIUM_INTEGRATION_CTA", + { + integration_name: name, + }, + ); setSelectedIntegration(name); }; @@ -37,8 +47,6 @@ export function PremiumDatasources() { } }; - const isEnterprise = false; - return ( <> {PREMIUM_INTEGRATIONS.map((integration) => ( @@ -69,7 +77,7 @@ export function PremiumDatasources() { setSelectedIntegration("")} integrationName={selectedIntegration} - isEnterprise={isEnterprise} + isEnterprise={!!isEnterprise} /> diff --git a/app/client/src/ce/utils/analyticsUtilTypes.ts b/app/client/src/ce/utils/analyticsUtilTypes.ts index cd65088106cb..f355b243ceff 100644 --- a/app/client/src/ce/utils/analyticsUtilTypes.ts +++ b/app/client/src/ce/utils/analyticsUtilTypes.ts @@ -473,4 +473,6 @@ export type PREMIUM_DATASOURCES_EVENTS = | "PREMIUM_MODAL_RELEVANT_LEARN_MORE" | "PREMIUM_MODAL_NOT_RELEVANT_LEARN_MORE" | "PREMIUM_MODAL_RELEVANT_SCHEDULE_CALL" - | "PREMIUM_MODAL_NOT_RELEVANT_SUBMIT"; + | "PREMIUM_MODAL_NOT_RELEVANT_SUBMIT" + | "SOON_INTEGRATION_CTA" + | "SOON_NOTIFY_REQUEST"; diff --git a/app/client/src/ee/pages/IntegrationEditor/PremiumDatasources/index.tsx b/app/client/src/ee/pages/IntegrationEditor/PremiumDatasources/index.tsx new file mode 100644 index 000000000000..d6e5ecae047d --- /dev/null +++ b/app/client/src/ee/pages/IntegrationEditor/PremiumDatasources/index.tsx @@ -0,0 +1,3 @@ +export * from "ce/pages/IntegrationEditor/PremiumDatasources"; +import { default as PremiumDatasources } from "ce/pages/IntegrationEditor/PremiumDatasources"; +export default PremiumDatasources; diff --git a/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx b/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx index 541f4d8d952d..6c0815ca0425 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx @@ -40,7 +40,7 @@ import { useParentEntityInfo } from "ee/hooks/datasourceEditorHooks"; import AIDataSources from "./AIDataSources"; import Debugger from "../DataSourceEditor/Debugger"; import { isPluginActionCreating } from "PluginActionEditor/store"; -import { PremiumDatasources } from "./PremiumDatasources"; +import PremiumDatasources from "ee/pages/IntegrationEditor/PremiumDatasources"; const NewIntegrationsContainer = styled.div` ${thinScrollbar}; From 06bceb5a7a7ec42454c28200f0e4311eada90535 Mon Sep 17 00:00:00 2001 From: Aman Agarwal Date: Mon, 16 Dec 2024 17:43:38 +0530 Subject: [PATCH 03/11] chore: segregated components from ce and ee --- .../constants/PremiumDatasourcesConstants.ts | 10 +++ app/client/src/ce/constants/messages.ts | 7 +- .../PremiumDatasources/ContactForm.tsx | 86 +++++++++---------- .../PremiumDatasources/index.tsx | 32 ++----- .../src/ce/utils/PremiumDatasourcesHelpers.ts | 67 +++++++++++++++ .../constants/PremiumDatasourcesConstants.ts | 1 + .../src/ee/utils/PremiumDatasourcesHelpers.ts | 1 + .../utils/ProductRamps/RampsControlList.ts | 2 + 8 files changed, 126 insertions(+), 80 deletions(-) create mode 100644 app/client/src/ce/constants/PremiumDatasourcesConstants.ts create mode 100644 app/client/src/ce/utils/PremiumDatasourcesHelpers.ts create mode 100644 app/client/src/ee/constants/PremiumDatasourcesConstants.ts create mode 100644 app/client/src/ee/utils/PremiumDatasourcesHelpers.ts diff --git a/app/client/src/ce/constants/PremiumDatasourcesConstants.ts b/app/client/src/ce/constants/PremiumDatasourcesConstants.ts new file mode 100644 index 000000000000..f7843907137b --- /dev/null +++ b/app/client/src/ce/constants/PremiumDatasourcesConstants.ts @@ -0,0 +1,10 @@ +export const PREMIUM_INTEGRATIONS = [ + { + name: "Zendesk", + icon: "https://assets.appsmith.com/zendesk-icon.png", + }, + { + name: "Salesforce", + icon: "https://assets.appsmith.com/salesforce-icon.png", + }, +]; diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index 126f11672f4a..03bbd31cbafc 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -2584,13 +2584,9 @@ export const PREMIUM_DATASOURCES = { "Unblock advanced integrations. Let our team guide you in selecting the plan that fits your needs. Schedule a call now to see how Appsmith can transform your workflows!", NON_RELEVANT_EMAIL_DESCRIPTION: () => "Unblock advanced integrations. Let our team guide you in selecting the plan that fits your needs. Give us your email and the Appsmith team will reach out to you soon.", - COMING_SOON_SUFFIX: () => "Coming soon", - COMING_SOON_DESCRIPTION: () => - "The Appsmith Team is actively working on it. We’ll let you know when this integration is live. ", LEARN_MORE: () => "Learn more about Premium", SCHEDULE_CALL: () => "Schedule a call", SUBMIT: () => "Submit", - NOTIFY_ME: () => "Notify me", SUCCESS_TOAST_MESSAGE: () => "Thank you! The Appsmith Team will contact you shortly.", FORM_EMAIL: { @@ -2600,6 +2596,5 @@ export const PREMIUM_DATASOURCES = { NAME: "email", ERROR: () => "Please enter email", }, - PREMIUM_TAG: () => "Premium", - SOON_TAG: () => "Soon", + TAG_TEXT: () => "Premium", }; diff --git a/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx b/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx index 260a80a367c3..4e8b1b42fc2a 100644 --- a/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx +++ b/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx @@ -2,7 +2,7 @@ import { Button, Flex, ModalHeader, toast } from "@appsmith/ads"; import { createMessage, PREMIUM_DATASOURCES } from "ee/constants/messages"; import type { AppState } from "ee/reducers"; import React, { useCallback } from "react"; -import { connect } from "react-redux"; +import { connect, useSelector } from "react-redux"; import { Field, formValueSelector, @@ -13,10 +13,21 @@ import { } from "redux-form"; import { getCurrentUser } from "selectors/usersSelectors"; import styled from "styled-components"; -import { isEmail, isRelevantEmail } from "utils/formhelpers"; +import { isEmail } from "utils/formhelpers"; import ReduxFormTextField from "components/utils/ReduxFormTextField"; -import AnalyticsUtil from "ee/utils/AnalyticsUtil"; -import { ENTERPRISE_PRICING_PAGE } from "constants/ThirdPartyConstants"; +import { PRICING_PAGE_URL } from "constants/ThirdPartyConstants"; +import { getAppsmithConfigs } from "ee/configs"; +import { getInstanceId } from "ee/selectors/tenantSelectors"; +import { pricingPageUrlSource } from "ee/utils/licenseHelpers"; +import { RampFeature, RampSection } from "utils/ProductRamps/RampsControlList"; +import { + getContactFormModalDescription, + getContactFormModalTitle, + getContactFormSubmitButtonText, + handleLearnMoreClick, + handleSubmitEvent, + shouldLearnMoreButtonBeVisible, +} from "ee/utils/PremiumDatasourcesHelpers"; const FormWrapper = styled.form` display: flex; @@ -27,6 +38,17 @@ const FormWrapper = styled.form` const PremiumDatasourceContactForm = ( props: PremiumDatasourceContactFormProps, ) => { + const instanceId = useSelector(getInstanceId); + const appsmithConfigs = getAppsmithConfigs(); + + const redirectPricingURL = PRICING_PAGE_URL( + appsmithConfigs.pricingUrl, + pricingPageUrlSource, + instanceId, + RampFeature.PremiumDatasources, + RampSection.PremiumDatasourcesContactModal, + ); + const onSubmit = () => { submitEvent(); toast.show(createMessage(PREMIUM_DATASOURCES.SUCCESS_TOAST_MESSAGE), { @@ -35,48 +57,25 @@ const PremiumDatasourceContactForm = ( props.closeModal(); }; - const validRelevantEmail = isRelevantEmail(props.email || ""); - const onClickLearnMore = useCallback(() => { - AnalyticsUtil.logEvent( - validRelevantEmail - ? "PREMIUM_MODAL_RELEVANT_LEARN_MORE" - : "PREMIUM_MODAL_NOT_RELEVANT_LEARN_MORE", - { - integration_name: props.integrationName, - email: props.email, - }, + handleLearnMoreClick( + props.integrationName, + props.email || "", + redirectPricingURL, ); - window.open(ENTERPRISE_PRICING_PAGE, "_blank"); - }, [props.email, props.integrationName]); + }, [redirectPricingURL, props.email, props.integrationName]); const submitEvent = useCallback(() => { - AnalyticsUtil.logEvent( - props.isEnterprise - ? "SOON_NOTIFY_REQUEST" - : validRelevantEmail - ? "PREMIUM_MODAL_RELEVANT_SCHEDULE_CALL" - : "PREMIUM_MODAL_NOT_RELEVANT_SUBMIT", - { - integration_name: props.integrationName, - email: props.email, - }, - ); - }, [props.email, props.integrationName, props.isEnterprise]); + handleSubmitEvent(props.integrationName, props.email || ""); + }, [props.email, props.integrationName]); return ( <> - {`${props.integrationName} ${props.isEnterprise ? `- ${createMessage(PREMIUM_DATASOURCES.COMING_SOON_SUFFIX)}` : ""}`} + + {getContactFormModalTitle(props.integrationName)} + -

- {props.isEnterprise - ? createMessage(PREMIUM_DATASOURCES.COMING_SOON_DESCRIPTION) - : validRelevantEmail - ? createMessage(PREMIUM_DATASOURCES.RELEVANT_EMAIL_DESCRIPTION) - : createMessage( - PREMIUM_DATASOURCES.NON_RELEVANT_EMAIL_DESCRIPTION, - )} -

+

{getContactFormModalDescription(props.email || "")}

- {!props.isEnterprise && ( + {shouldLearnMoreButtonBeVisible() && ( @@ -123,14 +118,12 @@ type PremiumDatasourceContactFormProps = PremiumDatasourceContactFormValues & { formSyncErrors?: FormErrors; closeModal: () => void; integrationName: string; - isEnterprise: boolean; } & InjectedFormProps< PremiumDatasourceContactFormValues, { formSyncErrors?: FormErrors; closeModal: () => void; integrationName: string; - isEnterprise: boolean; } >; @@ -161,7 +154,6 @@ export default connect((state: AppState) => { formSyncErrors?: FormErrors; closeModal: () => void; integrationName: string; - isEnterprise: boolean; } >({ validate, diff --git a/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/index.tsx b/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/index.tsx index cd8feb5aa6ab..67af138b3a91 100644 --- a/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/index.tsx +++ b/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/index.tsx @@ -3,41 +3,22 @@ import { ApiCard, CardContentWrapper, } from "../../../../pages/Editor/IntegrationEditor/NewApi"; -import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { getAssetUrl } from "ee/utils/airgapHelpers"; import { Modal, ModalContent, Tag } from "@appsmith/ads"; import styled from "styled-components"; import ContactForm from "./ContactForm"; import { createMessage, PREMIUM_DATASOURCES } from "ee/constants/messages"; - -const PREMIUM_INTEGRATIONS = [ - { - name: "Zendesk", - icon: "https://assets.appsmith.com/zendesk-icon.png", - }, - { - name: "Salesforce", - icon: "https://assets.appsmith.com/salesforce-icon.png", - }, -]; +import { PREMIUM_INTEGRATIONS } from "ee/constants/PremiumDatasourcesConstants"; +import { handlePremiumDatasourceClick } from "ee/utils/PremiumDatasourcesHelpers"; const ModalContentWrapper = styled(ModalContent)` max-width: 518px; `; -export default function PremiumDatasources({ - isEnterprise, -}: { - isEnterprise?: boolean; -}) { +export default function PremiumDatasources() { const [selectedIntegration, setSelectedIntegration] = useState(""); const handleOnClick = (name: string) => { - AnalyticsUtil.logEvent( - isEnterprise ? "SOON_INTEGRATION_CTA" : "PREMIUM_INTEGRATION_CTA", - { - integration_name: name, - }, - ); + handlePremiumDatasourceClick(name); setSelectedIntegration(name); }; @@ -65,9 +46,7 @@ export default function PremiumDatasources({ />

{integration.name}

- {isEnterprise - ? createMessage(PREMIUM_DATASOURCES.SOON_TAG) - : createMessage(PREMIUM_DATASOURCES.PREMIUM_TAG)} + {createMessage(PREMIUM_DATASOURCES.TAG_TEXT)} @@ -77,7 +56,6 @@ export default function PremiumDatasources({ setSelectedIntegration("")} integrationName={selectedIntegration} - isEnterprise={!!isEnterprise} /> diff --git a/app/client/src/ce/utils/PremiumDatasourcesHelpers.ts b/app/client/src/ce/utils/PremiumDatasourcesHelpers.ts new file mode 100644 index 000000000000..b3de8b9317a0 --- /dev/null +++ b/app/client/src/ce/utils/PremiumDatasourcesHelpers.ts @@ -0,0 +1,67 @@ +import { createMessage, PREMIUM_DATASOURCES } from "ee/constants/messages"; +import AnalyticsUtil from "./AnalyticsUtil"; +import { isRelevantEmail } from "utils/formhelpers"; + +export const handlePremiumDatasourceClick = (integrationName: string) => { + AnalyticsUtil.logEvent("PREMIUM_INTEGRATION_CTA", { + integration_name: integrationName, + }); +}; + +export const handleLearnMoreClick = ( + integrationName: string, + email: string, + redirectPricingURL: string, +) => { + const validRelevantEmail = isRelevantEmail(email); + + AnalyticsUtil.logEvent( + validRelevantEmail + ? "PREMIUM_MODAL_RELEVANT_LEARN_MORE" + : "PREMIUM_MODAL_NOT_RELEVANT_LEARN_MORE", + { + integration_name: integrationName, + email, + }, + ); + + window.open(redirectPricingURL, "_blank"); +}; + +export const handleSubmitEvent = (integrationName: string, email: string) => { + const validRelevantEmail = isRelevantEmail(email); + + AnalyticsUtil.logEvent( + validRelevantEmail + ? "PREMIUM_MODAL_RELEVANT_SCHEDULE_CALL" + : "PREMIUM_MODAL_NOT_RELEVANT_SUBMIT", + { + integration_name: integrationName, + email, + }, + ); +}; + +export const getContactFormModalTitle = (integrationName: string) => { + return integrationName; +}; + +export const getContactFormModalDescription = (email: string) => { + const validRelevantEmail = isRelevantEmail(email); + + return validRelevantEmail + ? createMessage(PREMIUM_DATASOURCES.RELEVANT_EMAIL_DESCRIPTION) + : createMessage(PREMIUM_DATASOURCES.NON_RELEVANT_EMAIL_DESCRIPTION); +}; + +export const shouldLearnMoreButtonBeVisible = () => { + return true; +}; + +export const getContactFormSubmitButtonText = (email: string) => { + const validRelevantEmail = isRelevantEmail(email); + + return validRelevantEmail + ? createMessage(PREMIUM_DATASOURCES.SCHEDULE_CALL) + : createMessage(PREMIUM_DATASOURCES.SUBMIT); +}; diff --git a/app/client/src/ee/constants/PremiumDatasourcesConstants.ts b/app/client/src/ee/constants/PremiumDatasourcesConstants.ts new file mode 100644 index 000000000000..958baf0a54aa --- /dev/null +++ b/app/client/src/ee/constants/PremiumDatasourcesConstants.ts @@ -0,0 +1 @@ +export * from "ce/constants/PremiumDatasourcesConstants"; diff --git a/app/client/src/ee/utils/PremiumDatasourcesHelpers.ts b/app/client/src/ee/utils/PremiumDatasourcesHelpers.ts new file mode 100644 index 000000000000..f168ffd26e65 --- /dev/null +++ b/app/client/src/ee/utils/PremiumDatasourcesHelpers.ts @@ -0,0 +1 @@ +export * from "ce/utils/PremiumDatasourcesHelpers"; diff --git a/app/client/src/utils/ProductRamps/RampsControlList.ts b/app/client/src/utils/ProductRamps/RampsControlList.ts index 22a87521d324..28bf0d5f3de2 100644 --- a/app/client/src/utils/ProductRamps/RampsControlList.ts +++ b/app/client/src/utils/ProductRamps/RampsControlList.ts @@ -22,6 +22,7 @@ export enum RampSection { BottomBarEnvSwitcher = "bottom_bar_env_switcher", DSEditor = "ds_editor", AdminSettings = "admin_settings", + PremiumDatasourcesContactModal = "premium_datasources_contact_modal", } export enum RampFeature { @@ -32,6 +33,7 @@ export enum RampFeature { Branding = "branding", Sso = "sso", Provisioning = "provisioning", + PremiumDatasources = "premium_datasources", } export const INVITE_USER_TO_APP: SupportedRampsType = { From 2503ac54191c87f08293cc10e01f659f0715b5a8 Mon Sep 17 00:00:00 2001 From: Aman Agarwal Date: Mon, 16 Dec 2024 22:56:00 +0530 Subject: [PATCH 04/11] chore: added the check for isBusinessOrEnterprise instance --- app/client/src/ce/constants/messages.ts | 7 +- .../PremiumDatasources/ContactForm.tsx | 25 +++++-- .../PremiumDatasources/index.tsx | 13 +++- .../src/ce/utils/PremiumDatasourcesHelpers.ts | 73 ++++++++++++++----- 4 files changed, 87 insertions(+), 31 deletions(-) diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index f8ef27e2a2d8..85762e7e71c3 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -2600,5 +2600,10 @@ export const PREMIUM_DATASOURCES = { NAME: "email", ERROR: () => "Please enter email", }, - TAG_TEXT: () => "Premium", + PREMIUM_TAG: () => "Premium", + SOON_TAG: () => "Soon", + COMING_SOON_SUFFIX: () => "Coming soon", + COMING_SOON_DESCRIPTION: () => + "The Appsmith Team is actively working on it. We’ll let you know when this integration is live. ", + NOTIFY_ME: () => "Notify me", }; diff --git a/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx b/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx index 4e8b1b42fc2a..b9f9f509b2b9 100644 --- a/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx +++ b/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx @@ -17,7 +17,7 @@ import { isEmail } from "utils/formhelpers"; import ReduxFormTextField from "components/utils/ReduxFormTextField"; import { PRICING_PAGE_URL } from "constants/ThirdPartyConstants"; import { getAppsmithConfigs } from "ee/configs"; -import { getInstanceId } from "ee/selectors/tenantSelectors"; +import { getInstanceId, isFreePlan } from "ee/selectors/tenantSelectors"; import { pricingPageUrlSource } from "ee/utils/licenseHelpers"; import { RampFeature, RampSection } from "utils/ProductRamps/RampsControlList"; import { @@ -40,6 +40,7 @@ const PremiumDatasourceContactForm = ( ) => { const instanceId = useSelector(getInstanceId); const appsmithConfigs = getAppsmithConfigs(); + const isFreePlanInstance = useSelector(isFreePlan); const redirectPricingURL = PRICING_PAGE_URL( appsmithConfigs.pricingUrl, @@ -66,16 +67,25 @@ const PremiumDatasourceContactForm = ( }, [redirectPricingURL, props.email, props.integrationName]); const submitEvent = useCallback(() => { - handleSubmitEvent(props.integrationName, props.email || ""); + handleSubmitEvent( + props.integrationName, + props.email || "", + !isFreePlanInstance, + ); }, [props.email, props.integrationName]); return ( <> - {getContactFormModalTitle(props.integrationName)} + {getContactFormModalTitle(props.integrationName, !isFreePlanInstance)} -

{getContactFormModalDescription(props.email || "")}

+

+ {getContactFormModalDescription( + props.email || "", + !isFreePlanInstance, + )} +

- {shouldLearnMoreButtonBeVisible() && ( + {shouldLearnMoreButtonBeVisible(!isFreePlanInstance) && ( diff --git a/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/index.tsx b/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/index.tsx index 67af138b3a91..59ac7fe9f3d3 100644 --- a/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/index.tsx +++ b/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/index.tsx @@ -7,9 +7,13 @@ import { getAssetUrl } from "ee/utils/airgapHelpers"; import { Modal, ModalContent, Tag } from "@appsmith/ads"; import styled from "styled-components"; import ContactForm from "./ContactForm"; -import { createMessage, PREMIUM_DATASOURCES } from "ee/constants/messages"; import { PREMIUM_INTEGRATIONS } from "ee/constants/PremiumDatasourcesConstants"; -import { handlePremiumDatasourceClick } from "ee/utils/PremiumDatasourcesHelpers"; +import { + getTagText, + handlePremiumDatasourceClick, +} from "ee/utils/PremiumDatasourcesHelpers"; +import { isFreePlan } from "ee/selectors/tenantSelectors"; +import { useSelector } from "react-redux"; const ModalContentWrapper = styled(ModalContent)` max-width: 518px; @@ -17,8 +21,9 @@ const ModalContentWrapper = styled(ModalContent)` export default function PremiumDatasources() { const [selectedIntegration, setSelectedIntegration] = useState(""); + const isFreePlanInstance = useSelector(isFreePlan); const handleOnClick = (name: string) => { - handlePremiumDatasourceClick(name); + handlePremiumDatasourceClick(name, !isFreePlanInstance); setSelectedIntegration(name); }; @@ -46,7 +51,7 @@ export default function PremiumDatasources() { />

{integration.name}

- {createMessage(PREMIUM_DATASOURCES.TAG_TEXT)} + {getTagText(!isFreePlanInstance)} diff --git a/app/client/src/ce/utils/PremiumDatasourcesHelpers.ts b/app/client/src/ce/utils/PremiumDatasourcesHelpers.ts index b3de8b9317a0..0481f434d567 100644 --- a/app/client/src/ce/utils/PremiumDatasourcesHelpers.ts +++ b/app/client/src/ce/utils/PremiumDatasourcesHelpers.ts @@ -2,10 +2,22 @@ import { createMessage, PREMIUM_DATASOURCES } from "ee/constants/messages"; import AnalyticsUtil from "./AnalyticsUtil"; import { isRelevantEmail } from "utils/formhelpers"; -export const handlePremiumDatasourceClick = (integrationName: string) => { - AnalyticsUtil.logEvent("PREMIUM_INTEGRATION_CTA", { - integration_name: integrationName, - }); +export const getTagText = (isBusinessOrEnterprise?: boolean) => { + return isBusinessOrEnterprise + ? createMessage(PREMIUM_DATASOURCES.SOON_TAG) + : createMessage(PREMIUM_DATASOURCES.PREMIUM_TAG); +}; + +export const handlePremiumDatasourceClick = ( + integrationName: string, + isBusinessOrEnterprise?: boolean, +) => { + AnalyticsUtil.logEvent( + isBusinessOrEnterprise ? "SOON_INTEGRATION_CTA" : "PREMIUM_INTEGRATION_CTA", + { + integration_name: integrationName, + }, + ); }; export const handleLearnMoreClick = ( @@ -28,13 +40,19 @@ export const handleLearnMoreClick = ( window.open(redirectPricingURL, "_blank"); }; -export const handleSubmitEvent = (integrationName: string, email: string) => { +export const handleSubmitEvent = ( + integrationName: string, + email: string, + isBusinessOrEnterprise?: boolean, +) => { const validRelevantEmail = isRelevantEmail(email); AnalyticsUtil.logEvent( - validRelevantEmail - ? "PREMIUM_MODAL_RELEVANT_SCHEDULE_CALL" - : "PREMIUM_MODAL_NOT_RELEVANT_SUBMIT", + isBusinessOrEnterprise + ? "SOON_NOTIFY_REQUEST" + : validRelevantEmail + ? "PREMIUM_MODAL_RELEVANT_SCHEDULE_CALL" + : "PREMIUM_MODAL_NOT_RELEVANT_SUBMIT", { integration_name: integrationName, email, @@ -42,26 +60,41 @@ export const handleSubmitEvent = (integrationName: string, email: string) => { ); }; -export const getContactFormModalTitle = (integrationName: string) => { - return integrationName; +export const getContactFormModalTitle = ( + integrationName: string, + isBusinessOrEnterprise?: boolean, +) => { + return `${integrationName} ${isBusinessOrEnterprise ? `- ${createMessage(PREMIUM_DATASOURCES.COMING_SOON_SUFFIX)}` : ""}`; }; -export const getContactFormModalDescription = (email: string) => { +export const getContactFormModalDescription = ( + email: string, + isBusinessOrEnterprise?: boolean, +) => { const validRelevantEmail = isRelevantEmail(email); - return validRelevantEmail - ? createMessage(PREMIUM_DATASOURCES.RELEVANT_EMAIL_DESCRIPTION) - : createMessage(PREMIUM_DATASOURCES.NON_RELEVANT_EMAIL_DESCRIPTION); + return isBusinessOrEnterprise + ? createMessage(PREMIUM_DATASOURCES.COMING_SOON_DESCRIPTION) + : validRelevantEmail + ? createMessage(PREMIUM_DATASOURCES.RELEVANT_EMAIL_DESCRIPTION) + : createMessage(PREMIUM_DATASOURCES.NON_RELEVANT_EMAIL_DESCRIPTION); }; -export const shouldLearnMoreButtonBeVisible = () => { - return true; +export const shouldLearnMoreButtonBeVisible = ( + isBusinessOrEnterprise?: boolean, +) => { + return !isBusinessOrEnterprise; }; -export const getContactFormSubmitButtonText = (email: string) => { +export const getContactFormSubmitButtonText = ( + email: string, + isBusinessOrEnterprise?: boolean, +) => { const validRelevantEmail = isRelevantEmail(email); - return validRelevantEmail - ? createMessage(PREMIUM_DATASOURCES.SCHEDULE_CALL) - : createMessage(PREMIUM_DATASOURCES.SUBMIT); + return isBusinessOrEnterprise + ? createMessage(PREMIUM_DATASOURCES.NOTIFY_ME) + : validRelevantEmail + ? createMessage(PREMIUM_DATASOURCES.SCHEDULE_CALL) + : createMessage(PREMIUM_DATASOURCES.SUBMIT); }; From 4a9747400d7146f267590370fcd7170b3fe4137e Mon Sep 17 00:00:00 2001 From: Aman Agarwal Date: Mon, 16 Dec 2024 23:07:03 +0530 Subject: [PATCH 05/11] chore: fixes for suggestions --- .../IntegrationEditor/PremiumDatasources/ContactForm.tsx | 4 ++-- .../pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx | 2 +- app/client/src/utils/ProductRamps/RampsControlList.ts | 1 + app/client/src/utils/formhelpers.ts | 4 ++-- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx b/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx index b9f9f509b2b9..77d88cb3a893 100644 --- a/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx +++ b/app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx @@ -72,7 +72,7 @@ const PremiumDatasourceContactForm = ( props.email || "", !isFreePlanInstance, ); - }, [props.email, props.integrationName]); + }, [props.email, props.integrationName, isFreePlanInstance]); return ( <> @@ -99,7 +99,7 @@ const PremiumDatasourceContactForm = ( {shouldLearnMoreButtonBeVisible(!isFreePlanInstance) && (