🪟 🔧 Add CTA to Talk to Sales for sub-1 hour jobs (#6335)

Co-authored-by: Joey Marshment-Howell <josephkmh@users.noreply.github.com>
airbytehq · May 8, 2023 · e23b237 · e23b237
1 parent 0c2e414
commit e23b237
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 9 deletions.
diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/ScheduleField.module.scss b/airbyte-webapp/src/components/connection/ConnectionForm/ScheduleField.module.scss
@@ -12,7 +12,11 @@
   min-width: 150px;
 }
 
-.errorMessage {
-  color: colors.$red;
-  margin-top: variables.$spacing-sm;
+.chatWithUsBtn {
+  all: unset;
+  text-decoration: underline;
+
+  &:hover {
+    cursor: pointer;
+  }
 }
diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/ScheduleField.tsx b/airbyte-webapp/src/components/connection/ConnectionForm/ScheduleField.tsx
@@ -1,8 +1,9 @@
 import { Field, FieldInputProps, FieldProps, FormikProps, useField } from "formik";
-import { ChangeEvent, useCallback, useMemo } from "react";
+import React, { ChangeEvent, useCallback, useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { ControlLabels } from "components";
+import { Box } from "components/ui/Box";
 import { DropDown, DropDownOptionDataItem } from "components/ui/DropDown";
 import { FlexContainer } from "components/ui/Flex";
 import { Input } from "components/ui/Input";
@@ -13,6 +14,8 @@ import { ConnectionScheduleData, ConnectionScheduleType } from "core/request/Air
 import { Action, Namespace } from "core/services/analytics";
 import { useAnalyticsService } from "core/services/analytics";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
+import { useIntercom } from "packages/cloud/services/thirdParty/intercom";
+import { isCloudApp } from "utils/app";
 import { links } from "utils/links";
 
 import availableCronTimeZones from "./availableCronTimeZones.json";
@@ -26,6 +29,16 @@ const CRON_DEFAULT_VALUE = {
   cronExpression: "0 0 12 * * ?",
 };
 
+const CronErrorChatWithUsButton: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
+  const { show } = useIntercom();
+
+  return (
+    <button type="button" className={styles.chatWithUsBtn} onClick={show}>
+      {children}
+    </button>
+  );
+};
+
 export const ScheduleField: React.FC = () => {
   const { formatMessage } = useIntl();
   const { connection, mode } = useConnectionFormService();
@@ -199,9 +212,22 @@ export const ScheduleField: React.FC = () => {
                 />
               </FlexContainer>
               {cronValidationError && (
-                <Text className={styles.errorMessage} data-testid="cronExpressionError">
-                  <FormattedMessage id={cronValidationError} />
-                </Text>
+                <Box mt="sm">
+                  <Text color="red" data-testid="cronExpressionError">
+                    <FormattedMessage
+                      id={cronValidationError}
+                      {...(isCloudApp() && cronValidationError === "form.cronExpression.underOneHourNotAllowed"
+                        ? {
+                            values: {
+                              lnk: (btnText: React.ReactNode) => (
+                                <CronErrorChatWithUsButton>{btnText}</CronErrorChatWithUsButton>
+                              ),
+                            },
+                          }
+                        : {})}
+                    />
+                  </Text>
+                </Box>
               )}
             </FormFieldLayout>
           )}

diff --git a/airbyte-webapp/src/components/ui/Text/Text.module.scss b/airbyte-webapp/src/components/ui/Text/Text.module.scss
@@ -57,6 +57,10 @@
   color: colors.$green;
 }
 
+.red {
+  color: colors.$red;
+}
+
 .bold,
 .text > strong {
   font-weight: 600;

diff --git a/airbyte-webapp/src/components/ui/Text/Text.tsx b/airbyte-webapp/src/components/ui/Text/Text.tsx
@@ -4,7 +4,7 @@ import React, { HTMLAttributes } from "react";
 import styles from "./Text.module.scss";
 
 type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
-type TextColor = "darkBlue" | "grey" | "grey300" | "green";
+type TextColor = "darkBlue" | "grey" | "grey300" | "green" | "red";
 type TextElementType = "p" | "span" | "div";
 type TextHTMLElement = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
 
@@ -35,6 +35,7 @@ const colors: Record<TextColor, string> = {
   green: styles.green,
   grey: styles.grey,
   grey300: styles.grey300,
+  red: styles.red,
 };
 
 const textAlignments: Record<TextAlignment, string> = {

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -514,7 +514,7 @@
   "form.cronExpression": "Cron expression",
   "form.cronExpression.placeholder": "Cron expression",
   "form.cronExpression.error": "Invalid cron expression",
-  "form.cronExpression.underOneHourNotAllowed": "Syncs cannot execute more frequently than once per hour",
+  "form.cronExpression.underOneHourNotAllowed": "Interested in syncing more frequently than once an hour? <lnk>Chat with us</lnk> to unlock this feature.",
   "form.cronExpression.message": "Enter a <lnk>cron expression</lnk> for when syncs should run (ex. \"0 0 12 * * ?\" => Will sync at 12:00 PM every day)",
   "form.frequency.placeholder": "Select a frequency",
   "form.frequency.message": "Set how often data should sync to the destination",