From 4429b880b9b0b8eef9a1d6a7bb55e3f0f152d3d7 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Fri, 13 Jan 2023 16:09:44 +0100 Subject: [PATCH 01/11] add svgs --- .../CardsSvg.tsx | 63 ++ .../ConnectorGridSvg.tsx | 864 ++++++++++++++++++ .../FreeSvg.tsx | 46 + .../MailSvg.tsx | 26 + 4 files changed, 999 insertions(+) create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/CardsSvg.tsx create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/ConnectorGridSvg.tsx create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/FreeSvg.tsx create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/MailSvg.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/CardsSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/CardsSvg.tsx new file mode 100644 index 000000000000..612e01de66fa --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/CardsSvg.tsx @@ -0,0 +1,63 @@ +export const CardSVG = () => { + return ( + + + + + + + + + + + + + + + + + + ); +}; diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/ConnectorGridSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/ConnectorGridSvg.tsx new file mode 100644 index 000000000000..c7416839e351 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/ConnectorGridSvg.tsx @@ -0,0 +1,864 @@ +export const ConnectorGridSvg = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/FreeSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/FreeSvg.tsx new file mode 100644 index 000000000000..18bc35d6aa6f --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/FreeSvg.tsx @@ -0,0 +1,46 @@ +export const FreeSVG = () => { + return ( + + + + + + + + + + + + + + ); +}; diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/MailSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/MailSvg.tsx new file mode 100644 index 000000000000..2429f0100529 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/MailSvg.tsx @@ -0,0 +1,26 @@ +export const MailSVG = () => { + return ( + + + + + + + + ); +}; From 070bbedee9bfa9c4c8e9c3ba49563aae2add448a Mon Sep 17 00:00:00 2001 From: josephkmh Date: Fri, 13 Jan 2023 16:10:34 +0100 Subject: [PATCH 02/11] add enrollment modal logic --- .../src/components/ui/Button/types.tsx | 2 +- .../hooks/services/Experiment/experiments.ts | 1 + airbyte-webapp/src/locales/en.json | 9 +- .../EnrollmentModal.module.scss | 34 +++++ .../EnrollmentModal.tsx | 134 ++++++++++++++++++ .../index.ts | 1 + .../packages/cloud/lib/domain/stripe/types.ts | 1 + .../components/RemainingCredits.tsx | 1 + 8 files changed, 181 insertions(+), 2 deletions(-) create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.module.scss create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/index.ts diff --git a/airbyte-webapp/src/components/ui/Button/types.tsx b/airbyte-webapp/src/components/ui/Button/types.tsx index 09e46b431047..f05e9a6d5f99 100644 --- a/airbyte-webapp/src/components/ui/Button/types.tsx +++ b/airbyte-webapp/src/components/ui/Button/types.tsx @@ -1,7 +1,7 @@ import React from "react"; type ButtonSize = "xs" | "sm" | "lg"; -type ButtonVariant = "primary" | "secondary" | "danger" | "light" | "clear" | "dark"; +export type ButtonVariant = "primary" | "secondary" | "danger" | "light" | "clear" | "dark"; export interface ButtonProps extends React.ButtonHTMLAttributes { clickable?: boolean; diff --git a/airbyte-webapp/src/hooks/services/Experiment/experiments.ts b/airbyte-webapp/src/hooks/services/Experiment/experiments.ts index 8fdc7c54e01d..86806f34a0f1 100644 --- a/airbyte-webapp/src/hooks/services/Experiment/experiments.ts +++ b/airbyte-webapp/src/hooks/services/Experiment/experiments.ts @@ -28,4 +28,5 @@ export interface Experiments { "connection.autoDetectSchemaChanges": boolean; "connection.columnSelection": boolean; "connection.newTableDesign": boolean; + "workspace.freeConnectorsProgram.visible": boolean; } diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index 35f0e9fda57a..92e8fc8ce5ce 100644 --- a/airbyte-webapp/src/locales/en.json +++ b/airbyte-webapp/src/locales/en.json @@ -737,5 +737,12 @@ "jobs.noAttemptsFailure": "Failed to start job.", - "cloudApi.loginCallbackUrlError": "There was an error connecting to the developer portal. Please try again." + "cloudApi.loginCallbackUrlError": "There was an error connecting to the developer portal. Please try again.", + + "freeConnectorProgram.enrollmentModal.title": "Free connector program", + "freeConnectorProgram.enrollmentModal.free": "Alpha and Beta Connectors are free while you're in the program. The whole Connection is free until both Connectors have move into General Availability (GA)", + "freeConnectorProgram.enrollmentModal.emailNotification": "We will let you know through email before a Connector you use moves to GA", + "freeConnectorProgram.enrollmentModal.cardOnFile": "When both Connectors are in GA, the Connection will no longer be free. You'll need to have a credit card on file to enroll so Airbyte can handle a Connection's transition to paid service.", + "freeConnectorProgram.enrollmentModal.cancelButtonText": "Cancel", + "freeConnectorProgram.enrollmentModal.enrollButtonText": "Enroll now!" } diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.module.scss b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.module.scss new file mode 100644 index 000000000000..e5687923681b --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.module.scss @@ -0,0 +1,34 @@ +@use "scss/colors"; +@use "scss/variables"; + +.header { + overflow: hidden; + position: relative; + background: colors.$blue-100; + height: 120px; + border-top-left-radius: variables.$border-radius-lg; + border-top-right-radius: variables.$border-radius-lg; +} + +.headerBackgroundImageContainer { + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +.pill { + z-index: 2; +} + +.contentWrapper { + width: 490px; + padding: 0 variables.$spacing-xl variables.$spacing-2xl; +} + +.contentHeader { + margin: variables.$spacing-xl 0; +} + +.iconContainer { + flex: 0 0 82px; +} diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx new file mode 100644 index 000000000000..8d8727095c7e --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx @@ -0,0 +1,134 @@ +import React, { useState } from "react"; +import { FormattedMessage } from "react-intl"; + +import { Button, ButtonVariant } from "components/ui/Button"; +import { FlexContainer, FlexItem } from "components/ui/Flex"; +import { Heading } from "components/ui/Heading"; +import { ModalFooter } from "components/ui/Modal/ModalFooter"; + +import { useModalService } from "hooks/services/Modal"; +import { StripeCheckoutSessionCreate, StripeCheckoutSessionRead } from "packages/cloud/lib/domain/stripe"; +import { useStripeCheckout } from "packages/cloud/services/stripe/StripeService"; +import { useCurrentWorkspaceId } from "services/workspaces/WorkspacesService"; + +import { CardSVG } from "./CardsSvg"; +import { ConnectorGridSvg } from "./ConnectorGridSvg"; +import styles from "./EnrollmentModal.module.scss"; +import { FreeSVG } from "./FreeSvg"; +import { MailSVG } from "./MailSvg"; + +const STRIPE_SUCCESS_QUERY = "stripeCheckoutSuccess"; + +interface EnrollmentModalContentProps { + closeModal: () => void; + createCheckout: (p: StripeCheckoutSessionCreate) => Promise; + + workspaceId: string; +} + +const EnrollmentModalContent: React.FC = ({ closeModal, createCheckout, workspaceId }) => { + const [isLoading, setIsLoading] = useState(false); + + const startStripeCheckout = async () => { + setIsLoading(true); + // Use the current URL as a success URL but attach the STRIPE_SUCCESS_QUERY to it + const successUrl = new URL(window.location.href); + successUrl.searchParams.set(STRIPE_SUCCESS_QUERY, "true"); + const { stripeUrl } = await createCheckout({ + workspaceId, + successUrl: successUrl.href, + cancelUrl: window.location.href, + stripeMode: "setup", + }); + + // Forward to stripe as soon as we created a checkout session successfully + window.location.assign(stripeUrl); + }; + + return ( + <> + +
+ +
+
Pill #1
+
Pill #2
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + ); +}; + +interface FreeConnectorProgramEnrollmentButtonProps { + buttonTextKey?: string; + variant?: ButtonVariant; +} + +export const FreeConnectorProgramEnrollmentButton: React.FC = ({ + buttonTextKey = "freeConnectorProgram.enrollmentModal.enrollButtonText", + variant = "primary", +}) => { + const { openModal, closeModal } = useModalService(); + const { error, mutateAsync: createCheckout } = useStripeCheckout(); + const workspaceId = useCurrentWorkspaceId(); + + console.log(error); + + const showEnrollmentModal = () => { + openModal({ + title: null, + content: () => ( + + ), + }); + }; + + return ( + + + + + + ); +}; diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/index.ts b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/index.ts new file mode 100644 index 000000000000..b353de441d11 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/index.ts @@ -0,0 +1 @@ +export * from "./EnrollmentModal"; diff --git a/airbyte-webapp/src/packages/cloud/lib/domain/stripe/types.ts b/airbyte-webapp/src/packages/cloud/lib/domain/stripe/types.ts index 355aeedfe7ef..d8df4cb8e771 100644 --- a/airbyte-webapp/src/packages/cloud/lib/domain/stripe/types.ts +++ b/airbyte-webapp/src/packages/cloud/lib/domain/stripe/types.ts @@ -3,6 +3,7 @@ export interface StripeCheckoutSessionCreate { successUrl: string; cancelUrl: string; quantity?: number; + stripeMode: "payment" | "setup"; } export interface StripeCheckoutSessionRead { diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx index 2ca1824542df..21e2944019e1 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx @@ -109,6 +109,7 @@ const RemainingCredits: React.FC = ({ selfServiceCheckoutEnabled }) => { workspaceId: currentWorkspace.workspaceId, successUrl: successUrl.href, cancelUrl: window.location.href, + stripeMode: "payment", }); analytics.track(Namespace.CREDITS, Action.CHECKOUT_START, { actionDescription: "Checkout Start", From 3d1fea309d498899546e12cfcc298877692e1614 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Fri, 13 Jan 2023 16:21:57 +0100 Subject: [PATCH 03/11] syntax cleanup --- .../FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx index 8d8727095c7e..dba036f831d5 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx @@ -22,7 +22,6 @@ const STRIPE_SUCCESS_QUERY = "stripeCheckoutSuccess"; interface EnrollmentModalContentProps { closeModal: () => void; createCheckout: (p: StripeCheckoutSessionCreate) => Promise; - workspaceId: string; } @@ -108,11 +107,9 @@ export const FreeConnectorProgramEnrollmentButton: React.FC { const { openModal, closeModal } = useModalService(); - const { error, mutateAsync: createCheckout } = useStripeCheckout(); + const { mutateAsync: createCheckout } = useStripeCheckout(); const workspaceId = useCurrentWorkspaceId(); - console.log(error); - const showEnrollmentModal = () => { openModal({ title: null, From 7198631ffb668a393d1273bb5ef4c8a99a203405 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Fri, 13 Jan 2023 17:07:12 +0100 Subject: [PATCH 04/11] fix text sizing & spacing --- airbyte-webapp/src/locales/en.json | 2 +- .../EnrollmentModal.tsx | 19 ++++++++++++++++--- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index 59c311c4d44a..f14cf07b329c 100644 --- a/airbyte-webapp/src/locales/en.json +++ b/airbyte-webapp/src/locales/en.json @@ -746,7 +746,7 @@ "cloudApi.loginCallbackUrlError": "There was an error connecting to the developer portal. Please try again.", "freeConnectorProgram.enrollmentModal.title": "Free connector program", - "freeConnectorProgram.enrollmentModal.free": "Alpha and Beta Connectors are free while you're in the program. The whole Connection is free until both Connectors have move into General Availability (GA)", + "freeConnectorProgram.enrollmentModal.free": "Alpha and Beta Connectors are free while you're in the program.The whole Connection is free until both Connectors have move into General Availability (GA)", "freeConnectorProgram.enrollmentModal.emailNotification": "We will let you know through email before a Connector you use moves to GA", "freeConnectorProgram.enrollmentModal.cardOnFile": "When both Connectors are in GA, the Connection will no longer be free. You'll need to have a credit card on file to enroll so Airbyte can handle a Connection's transition to paid service.", "freeConnectorProgram.enrollmentModal.cancelButtonText": "Cancel", diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx index dba036f831d5..a3123aebaf51 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx @@ -5,6 +5,7 @@ import { Button, ButtonVariant } from "components/ui/Button"; import { FlexContainer, FlexItem } from "components/ui/Flex"; import { Heading } from "components/ui/Heading"; import { ModalFooter } from "components/ui/Modal/ModalFooter"; +import { Text } from "components/ui/Text"; import { useModalService } from "hooks/services/Modal"; import { StripeCheckoutSessionCreate, StripeCheckoutSessionRead } from "packages/cloud/lib/domain/stripe"; @@ -62,19 +63,31 @@ const EnrollmentModalContent: React.FC = ({ closeMo - + + {content}, + p2: (content: React.ReactNode) => {content}, + }} + /> + - + + + - + + + From b4d614e5370fb6ea4d8a1a84afa38e330d1b6961 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Fri, 13 Jan 2023 20:09:18 +0100 Subject: [PATCH 05/11] folder & file renaming --- .../CardsSvg.tsx | 0 .../ConnectorGridSvg.tsx | 0 .../EnrollmentButton/EnrollmentButton.tsx | 44 +++++++++++++++++++ .../EnrollmentModal.module.scss | 0 .../EnrollmentModal.tsx | 44 +++---------------- .../FreeSvg.tsx | 0 .../MailSvg.tsx | 0 .../index.ts | 0 8 files changed, 50 insertions(+), 38 deletions(-) rename airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/{FreeConnectorProgramEnrollmentButton => EnrollmentButton}/CardsSvg.tsx (100%) rename airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/{FreeConnectorProgramEnrollmentButton => EnrollmentButton}/ConnectorGridSvg.tsx (100%) create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentButton.tsx rename airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/{FreeConnectorProgramEnrollmentButton => EnrollmentButton}/EnrollmentModal.module.scss (100%) rename airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/{FreeConnectorProgramEnrollmentButton => EnrollmentButton}/EnrollmentModal.tsx (74%) rename airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/{FreeConnectorProgramEnrollmentButton => EnrollmentButton}/FreeSvg.tsx (100%) rename airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/{FreeConnectorProgramEnrollmentButton => EnrollmentButton}/MailSvg.tsx (100%) rename airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/{FreeConnectorProgramEnrollmentButton => EnrollmentButton}/index.ts (100%) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/CardsSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/CardsSvg.tsx similarity index 100% rename from airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/CardsSvg.tsx rename to airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/CardsSvg.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/ConnectorGridSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/ConnectorGridSvg.tsx similarity index 100% rename from airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/ConnectorGridSvg.tsx rename to airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/ConnectorGridSvg.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentButton.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentButton.tsx new file mode 100644 index 000000000000..8c2d5f480676 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentButton.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { FormattedMessage } from "react-intl"; + +import { Button, ButtonVariant } from "components/ui/Button"; +import { FlexContainer, FlexItem } from "components/ui/Flex"; + +import { useModalService } from "hooks/services/Modal"; +import { useStripeCheckout } from "packages/cloud/services/stripe/StripeService"; +import { useCurrentWorkspaceId } from "services/workspaces/WorkspacesService"; + +import { EnrollmentModalContent } from "./EnrollmentModal"; + +interface FreeConnectorProgramEnrollmentButtonProps { + buttonTextKey?: string; + variant?: ButtonVariant; +} + +export const FreeConnectorProgramEnrollmentButton: React.FC = ({ + buttonTextKey = "freeConnectorProgram.enrollmentModal.enrollButtonText", + variant = "primary", +}) => { + const { openModal, closeModal } = useModalService(); + const { mutateAsync: createCheckout } = useStripeCheckout(); + const workspaceId = useCurrentWorkspaceId(); + + const showEnrollmentModal = () => { + openModal({ + title: null, + content: () => ( + + ), + }); + }; + + return ( + + + + + + ); +}; diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.module.scss b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentModal.module.scss similarity index 100% rename from airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.module.scss rename to airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentModal.module.scss diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentModal.tsx similarity index 74% rename from airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx rename to airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentModal.tsx index a3123aebaf51..bf69c54a0b45 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/EnrollmentModal.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentModal.tsx @@ -1,16 +1,13 @@ import React, { useState } from "react"; import { FormattedMessage } from "react-intl"; -import { Button, ButtonVariant } from "components/ui/Button"; +import { Button } from "components/ui/Button"; import { FlexContainer, FlexItem } from "components/ui/Flex"; import { Heading } from "components/ui/Heading"; import { ModalFooter } from "components/ui/Modal/ModalFooter"; import { Text } from "components/ui/Text"; -import { useModalService } from "hooks/services/Modal"; import { StripeCheckoutSessionCreate, StripeCheckoutSessionRead } from "packages/cloud/lib/domain/stripe"; -import { useStripeCheckout } from "packages/cloud/services/stripe/StripeService"; -import { useCurrentWorkspaceId } from "services/workspaces/WorkspacesService"; import { CardSVG } from "./CardsSvg"; import { ConnectorGridSvg } from "./ConnectorGridSvg"; @@ -26,7 +23,11 @@ interface EnrollmentModalContentProps { workspaceId: string; } -const EnrollmentModalContent: React.FC = ({ closeModal, createCheckout, workspaceId }) => { +export const EnrollmentModalContent: React.FC = ({ + closeModal, + createCheckout, + workspaceId, +}) => { const [isLoading, setIsLoading] = useState(false); const startStripeCheckout = async () => { @@ -109,36 +110,3 @@ const EnrollmentModalContent: React.FC = ({ closeMo ); }; - -interface FreeConnectorProgramEnrollmentButtonProps { - buttonTextKey?: string; - variant?: ButtonVariant; -} - -export const FreeConnectorProgramEnrollmentButton: React.FC = ({ - buttonTextKey = "freeConnectorProgram.enrollmentModal.enrollButtonText", - variant = "primary", -}) => { - const { openModal, closeModal } = useModalService(); - const { mutateAsync: createCheckout } = useStripeCheckout(); - const workspaceId = useCurrentWorkspaceId(); - - const showEnrollmentModal = () => { - openModal({ - title: null, - content: () => ( - - ), - }); - }; - - return ( - - - - - - ); -}; diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/FreeSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/FreeSvg.tsx similarity index 100% rename from airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/FreeSvg.tsx rename to airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/FreeSvg.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/MailSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/MailSvg.tsx similarity index 100% rename from airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/MailSvg.tsx rename to airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/MailSvg.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/index.ts b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/index.ts similarity index 100% rename from airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeConnectorProgramEnrollmentButton/index.ts rename to airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/index.ts From dd70f8c995a2375ee627abbc45593f38ec48ad84 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Fri, 13 Jan 2023 20:11:57 +0100 Subject: [PATCH 06/11] shorten names --- .../EnrollmentButton/EnrollmentButton.tsx | 4 ++-- .../FreeConnectorProgram/EnrollmentButton/index.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentButton.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentButton.tsx index 8c2d5f480676..03c825e4e669 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentButton.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentButton.tsx @@ -10,12 +10,12 @@ import { useCurrentWorkspaceId } from "services/workspaces/WorkspacesService"; import { EnrollmentModalContent } from "./EnrollmentModal"; -interface FreeConnectorProgramEnrollmentButtonProps { +interface FCPEnrollmentButtonProps { buttonTextKey?: string; variant?: ButtonVariant; } -export const FreeConnectorProgramEnrollmentButton: React.FC = ({ +export const FCPEnrollmentButton: React.FC = ({ buttonTextKey = "freeConnectorProgram.enrollmentModal.enrollButtonText", variant = "primary", }) => { diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/index.ts b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/index.ts index b353de441d11..7a507190ff8a 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/index.ts +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/index.ts @@ -1 +1 @@ -export * from "./EnrollmentModal"; +export { FCPEnrollmentButton } from "./EnrollmentButton"; From 927f6abc532ad73a0475d6311b71e66086bba1f7 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 16 Jan 2023 11:40:58 +0000 Subject: [PATCH 07/11] rename folder, use hook instead of EnrollmentButton --- .../EnrollmentButton/EnrollmentButton.tsx | 44 ------------------- .../EnrollmentButton/index.ts | 1 - .../CardsSvg.tsx | 0 .../ConnectorGridSvg.tsx | 0 .../EnrollmentModal.module.scss | 0 .../EnrollmentModal.tsx | 15 ++++++- .../FreeSvg.tsx | 0 .../MailSvg.tsx | 0 .../EnrollmentModal/index.ts | 1 + .../useShowEnrollmentModal.tsx | 22 ++++++++++ 10 files changed, 36 insertions(+), 47 deletions(-) delete mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentButton.tsx delete mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/index.ts rename airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/{EnrollmentButton => EnrollmentModal}/CardsSvg.tsx (100%) rename airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/{EnrollmentButton => EnrollmentModal}/ConnectorGridSvg.tsx (100%) rename airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/{EnrollmentButton => EnrollmentModal}/EnrollmentModal.module.scss (100%) rename airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/{EnrollmentButton => EnrollmentModal}/EnrollmentModal.tsx (91%) rename airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/{EnrollmentButton => EnrollmentModal}/FreeSvg.tsx (100%) rename airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/{EnrollmentButton => EnrollmentModal}/MailSvg.tsx (100%) create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/index.ts create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/useShowEnrollmentModal.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentButton.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentButton.tsx deleted file mode 100644 index 03c825e4e669..000000000000 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentButton.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from "react"; -import { FormattedMessage } from "react-intl"; - -import { Button, ButtonVariant } from "components/ui/Button"; -import { FlexContainer, FlexItem } from "components/ui/Flex"; - -import { useModalService } from "hooks/services/Modal"; -import { useStripeCheckout } from "packages/cloud/services/stripe/StripeService"; -import { useCurrentWorkspaceId } from "services/workspaces/WorkspacesService"; - -import { EnrollmentModalContent } from "./EnrollmentModal"; - -interface FCPEnrollmentButtonProps { - buttonTextKey?: string; - variant?: ButtonVariant; -} - -export const FCPEnrollmentButton: React.FC = ({ - buttonTextKey = "freeConnectorProgram.enrollmentModal.enrollButtonText", - variant = "primary", -}) => { - const { openModal, closeModal } = useModalService(); - const { mutateAsync: createCheckout } = useStripeCheckout(); - const workspaceId = useCurrentWorkspaceId(); - - const showEnrollmentModal = () => { - openModal({ - title: null, - content: () => ( - - ), - }); - }; - - return ( - - - - - - ); -}; diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/index.ts b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/index.ts deleted file mode 100644 index 7a507190ff8a..000000000000 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { FCPEnrollmentButton } from "./EnrollmentButton"; diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/CardsSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/CardsSvg.tsx similarity index 100% rename from airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/CardsSvg.tsx rename to airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/CardsSvg.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/ConnectorGridSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/ConnectorGridSvg.tsx similarity index 100% rename from airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/ConnectorGridSvg.tsx rename to airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/ConnectorGridSvg.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentModal.module.scss b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.module.scss similarity index 100% rename from airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentModal.module.scss rename to airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.module.scss diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentModal.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx similarity index 91% rename from airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentModal.tsx rename to airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx index bf69c54a0b45..23816f743501 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/EnrollmentModal.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { FormattedMessage } from "react-intl"; import { Button } from "components/ui/Button"; @@ -28,6 +28,7 @@ export const EnrollmentModalContent: React.FC = ({ createCheckout, workspaceId, }) => { + const isMountedRef = useRef(false); const [isLoading, setIsLoading] = useState(false); const startStripeCheckout = async () => { @@ -43,9 +44,19 @@ export const EnrollmentModalContent: React.FC = ({ }); // Forward to stripe as soon as we created a checkout session successfully - window.location.assign(stripeUrl); + if (isMountedRef.current) { + window.location.assign(stripeUrl); + } }; + // If the user closes the modal while the request is processing, we don't want to redirect them + useEffect(() => { + isMountedRef.current = true; + return () => { + isMountedRef.current = false; + }; + }, []); + return ( <> diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/FreeSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/FreeSvg.tsx similarity index 100% rename from airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/FreeSvg.tsx rename to airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/FreeSvg.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/MailSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/MailSvg.tsx similarity index 100% rename from airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentButton/MailSvg.tsx rename to airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/MailSvg.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/index.ts b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/index.ts new file mode 100644 index 000000000000..eb0c733b2117 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/index.ts @@ -0,0 +1 @@ +export * from "./useShowEnrollmentModal"; diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/useShowEnrollmentModal.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/useShowEnrollmentModal.tsx new file mode 100644 index 000000000000..95d89effb2b8 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/useShowEnrollmentModal.tsx @@ -0,0 +1,22 @@ +import { useModalService } from "hooks/services/Modal"; +import { useStripeCheckout } from "packages/cloud/services/stripe/StripeService"; +import { useCurrentWorkspaceId } from "services/workspaces/WorkspacesService"; + +import { EnrollmentModalContent } from "./EnrollmentModal"; + +export const useShowEnrollmentModal = () => { + const { openModal, closeModal } = useModalService(); + const { mutateAsync: createCheckout } = useStripeCheckout(); + const workspaceId = useCurrentWorkspaceId(); + + return { + showEnrollmentModal: () => { + openModal({ + title: null, + content: () => ( + + ), + }); + }, + }; +}; From 4e4778fe89823d43525fe164786903bbc02e3f53 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 16 Jan 2023 11:57:06 +0000 Subject: [PATCH 08/11] import svgs directly --- .../EnrollmentModal/EnrollmentModal.tsx | 8 +- .../EnrollmentModal/cards.svg | 24 + .../EnrollmentModal/connectorGrid.svg | 439 ++++++++++++++++++ .../EnrollmentModal/free.svg | 13 + .../EnrollmentModal/mail.svg | 14 + 5 files changed, 494 insertions(+), 4 deletions(-) create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/cards.svg create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/connectorGrid.svg create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/free.svg create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/mail.svg diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx index 23816f743501..193c9541d3c3 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx @@ -9,11 +9,11 @@ import { Text } from "components/ui/Text"; import { StripeCheckoutSessionCreate, StripeCheckoutSessionRead } from "packages/cloud/lib/domain/stripe"; -import { CardSVG } from "./CardsSvg"; -import { ConnectorGridSvg } from "./ConnectorGridSvg"; +import { ReactComponent as CardSVG } from "./cards.svg"; +import { ReactComponent as ConnectorGridSvg } from "./connectorGrid.svg"; import styles from "./EnrollmentModal.module.scss"; -import { FreeSVG } from "./FreeSvg"; -import { MailSVG } from "./MailSvg"; +import { ReactComponent as FreeSVG } from "./free.svg"; +import { ReactComponent as MailSVG } from "./mail.svg"; const STRIPE_SUCCESS_QUERY = "stripeCheckoutSuccess"; diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/cards.svg b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/cards.svg new file mode 100644 index 000000000000..a86f40a65816 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/cards.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/connectorGrid.svg b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/connectorGrid.svg new file mode 100644 index 000000000000..da8c9978e4e2 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/connectorGrid.svg @@ -0,0 +1,439 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/free.svg b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/free.svg new file mode 100644 index 000000000000..55c619b2c1d6 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/free.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/mail.svg b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/mail.svg new file mode 100644 index 000000000000..d3c1f86a68a5 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/mail.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + From 7d736568998317175a3818beed79af467544e9a0 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 16 Jan 2023 11:58:35 +0000 Subject: [PATCH 09/11] use width variable --- .../EnrollmentModal/EnrollmentModal.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.module.scss b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.module.scss index e5687923681b..c91b5cf89d8c 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.module.scss +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.module.scss @@ -21,7 +21,7 @@ } .contentWrapper { - width: 490px; + width: variables.$width-modal-sm; padding: 0 variables.$spacing-xl variables.$spacing-2xl; } From 4ff5e547ed8f1590d8d5e25d6e13d093f5c08868 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 16 Jan 2023 11:59:24 +0000 Subject: [PATCH 10/11] remove more anonymous function wrappers --- .../FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx index 193c9541d3c3..066f8af84f4d 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx @@ -107,12 +107,12 @@ export const EnrollmentModalContent: React.FC = ({ - - From 3e88078ff804fcc3d8868b668a68215c58744c9e Mon Sep 17 00:00:00 2001 From: josephkmh Date: Tue, 17 Jan 2023 14:45:40 +0000 Subject: [PATCH 11/11] remove svg components --- .../EnrollmentModal/CardsSvg.tsx | 63 -- .../EnrollmentModal/ConnectorGridSvg.tsx | 864 ------------------ .../EnrollmentModal/FreeSvg.tsx | 46 - .../EnrollmentModal/MailSvg.tsx | 26 - 4 files changed, 999 deletions(-) delete mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/CardsSvg.tsx delete mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/ConnectorGridSvg.tsx delete mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/FreeSvg.tsx delete mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/MailSvg.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/CardsSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/CardsSvg.tsx deleted file mode 100644 index 612e01de66fa..000000000000 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/CardsSvg.tsx +++ /dev/null @@ -1,63 +0,0 @@ -export const CardSVG = () => { - return ( - - - - - - - - - - - - - - - - - - ); -}; diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/ConnectorGridSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/ConnectorGridSvg.tsx deleted file mode 100644 index c7416839e351..000000000000 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/ConnectorGridSvg.tsx +++ /dev/null @@ -1,864 +0,0 @@ -export const ConnectorGridSvg = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/FreeSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/FreeSvg.tsx deleted file mode 100644 index 18bc35d6aa6f..000000000000 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/FreeSvg.tsx +++ /dev/null @@ -1,46 +0,0 @@ -export const FreeSVG = () => { - return ( - - - - - - - - - - - - - - ); -}; diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/MailSvg.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/MailSvg.tsx deleted file mode 100644 index 2429f0100529..000000000000 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/MailSvg.tsx +++ /dev/null @@ -1,26 +0,0 @@ -export const MailSVG = () => { - return ( - - - - - - - - ); -};