diff --git a/packages/twenty-front/index.html b/packages/twenty-front/index.html index e056e223d8..62e26bafb8 100644 --- a/packages/twenty-front/index.html +++ b/packages/twenty-front/index.html @@ -57,23 +57,23 @@ diff --git a/packages/twenty-front/src/modules/auth/constants/OnboardingVerifyPaths.ts b/packages/twenty-front/src/modules/auth/constants/OnboardingVerifyPaths.ts new file mode 100644 index 0000000000..cead1491f5 --- /dev/null +++ b/packages/twenty-front/src/modules/auth/constants/OnboardingVerifyPaths.ts @@ -0,0 +1,6 @@ +import { AppPath } from 'twenty-shared/types'; + +export const ONBOARDING_VERIFY_PATHS = [ + AppPath.Verify, + AppPath.WorkspaceActivation, +]; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/constants/WorkspaceActivationMessages.ts b/packages/twenty-front/src/modules/auth/sign-in-up/constants/WorkspaceActivationMessages.ts deleted file mode 100644 index c6431bd588..0000000000 --- a/packages/twenty-front/src/modules/auth/sign-in-up/constants/WorkspaceActivationMessages.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { msg } from '@lingui/core/macro'; - -export const WORKSPACE_ACTIVATION_MESSAGES = [ - msg`Creating your workspace...`, - msg`Setting up your database...`, - msg`Creating your data model...`, - msg`Prefilling your workspace data...`, -]; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/constants/WorkspaceActivationMessages.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/constants/WorkspaceActivationMessages.tsx new file mode 100644 index 0000000000..3c022065b6 --- /dev/null +++ b/packages/twenty-front/src/modules/auth/sign-in-up/constants/WorkspaceActivationMessages.tsx @@ -0,0 +1,54 @@ +import { StyledOnboardingActivationMessageEmphasis } from '@/onboarding/components/StyledOnboardingActivationMessageEmphasis'; +import { type OnboardingActivationMessage } from '@/onboarding/types/OnboardingActivationMessage'; +import { Trans } from '@lingui/react/macro'; + +export const WORKSPACE_ACTIVATION_MESSAGES: OnboardingActivationMessage[] = [ + { + id: 'creating-workspace', + content: ( + + Creating your{' '} + + workspace + + ... + + ), + }, + { + id: 'setting-up-database', + content: ( + + Setting up your{' '} + + database + + ... + + ), + }, + { + id: 'creating-data-model', + content: ( + + Creating your{' '} + + data model + + ... + + ), + }, + { + id: 'prefilling-workspace-data', + content: ( + + Prefilling your{' '} + + workspace data + + ... + + ), + }, +]; diff --git a/packages/twenty-front/src/modules/auth/utils/isOnOnboardingVerifyPath.ts b/packages/twenty-front/src/modules/auth/utils/isOnOnboardingVerifyPath.ts new file mode 100644 index 0000000000..123ac19b52 --- /dev/null +++ b/packages/twenty-front/src/modules/auth/utils/isOnOnboardingVerifyPath.ts @@ -0,0 +1,9 @@ +import { matchPath } from 'react-router-dom'; +import { isDefined } from 'twenty-shared/utils'; + +import { ONBOARDING_VERIFY_PATHS } from '@/auth/constants/OnboardingVerifyPaths'; + +export const isOnOnboardingVerifyPath = (pathname: string) => + ONBOARDING_VERIFY_PATHS.some((verifyPath) => + isDefined(matchPath(verifyPath, pathname)), + ); diff --git a/packages/twenty-front/src/modules/onboarding/components/OnboardingActivationSteps.tsx b/packages/twenty-front/src/modules/onboarding/components/OnboardingActivationSteps.tsx index ff9cd75ddf..3093295361 100644 --- a/packages/twenty-front/src/modules/onboarding/components/OnboardingActivationSteps.tsx +++ b/packages/twenty-front/src/modules/onboarding/components/OnboardingActivationSteps.tsx @@ -1,8 +1,7 @@ import { SubTitle } from '@/auth/components/SubTitle'; import { useOnboardingMotionTransition } from '@/onboarding/hooks/useOnboardingMotionTransition'; +import { type OnboardingActivationMessage } from '@/onboarding/types/OnboardingActivationMessage'; import { styled } from '@linaria/react'; -import { type MessageDescriptor } from '@lingui/core'; -import { useLingui } from '@lingui/react/macro'; import { motion } from 'framer-motion'; const STEP_OPACITIES = [1, 0.4, 0.12]; @@ -26,7 +25,7 @@ const StyledStepBase = styled.div` const StyledStep = motion.create(StyledStepBase); type OnboardingActivationStepsProps = { - messages: MessageDescriptor[]; + messages: OnboardingActivationMessage[]; messageIndex: number; }; @@ -34,7 +33,6 @@ export const OnboardingActivationSteps = ({ messages, messageIndex, }: OnboardingActivationStepsProps) => { - const { i18n } = useLingui(); const transition = useOnboardingMotionTransition(); return ( @@ -53,7 +51,7 @@ export const OnboardingActivationSteps = ({ }} transition={transition} > - {i18n._(message)} + {message.content} ); })} diff --git a/packages/twenty-front/src/modules/onboarding/components/OnboardingHeader.tsx b/packages/twenty-front/src/modules/onboarding/components/OnboardingHeader.tsx index ee2d2d218a..ef29eff983 100644 --- a/packages/twenty-front/src/modules/onboarding/components/OnboardingHeader.tsx +++ b/packages/twenty-front/src/modules/onboarding/components/OnboardingHeader.tsx @@ -1,7 +1,5 @@ -import { useOnboardingContentWidth } from '@/onboarding/hooks/useOnboardingContentWidth'; -import { useOnboardingMotionTransition } from '@/onboarding/hooks/useOnboardingMotionTransition'; +import { ONBOARDING_CONTENT_BLOCK_WIDTH } from '@/onboarding/constants/OnboardingContentBlockWidth'; import { styled } from '@linaria/react'; -import { motion } from 'framer-motion'; import { useLingui } from '@lingui/react/macro'; import { isDefined } from 'twenty-shared/utils'; import { IconChevronLeft, IconCoins, IconInfoCircle } from 'twenty-ui/icon'; @@ -30,10 +28,10 @@ const StyledLeftSide = styled(StyledSide)` padding-right: ${themeCssVariables.spacing[1]}; `; -const StyledCenter = styled.div<{ contentWidth: number }>` +const StyledCenter = styled.div` align-items: center; display: flex; - flex: 0 1 ${({ contentWidth }) => `${contentWidth}px`}; + flex: 0 1 ${ONBOARDING_CONTENT_BLOCK_WIDTH}px; justify-content: flex-start; min-width: 0; `; @@ -43,7 +41,7 @@ const StyledRightSide = styled(StyledSide)` padding-left: ${themeCssVariables.spacing[1]}; `; -const StyledLogoBase = styled.div` +const StyledLogo = styled.div` background-image: url('/images/integrations/twenty-logo.svg'); background-size: cover; height: ${themeCssVariables.spacing[6]}; @@ -51,8 +49,6 @@ const StyledLogoBase = styled.div` width: ${themeCssVariables.spacing[6]}; `; -const StyledLogo = motion.create(StyledLogoBase); - const StyledFreeCredits = styled.div` align-items: center; color: ${themeCssVariables.font.color.tertiary}; @@ -109,8 +105,6 @@ export const OnboardingHeader = ({ }: OnboardingHeaderProps) => { const { t } = useLingui(); const theme = useTheme(); - const contentWidth = useOnboardingContentWidth(); - const transition = useOnboardingMotionTransition(); return ( @@ -125,8 +119,8 @@ export const OnboardingHeader = ({ /> )} - - + + {isDefined(freeCredits) && ( diff --git a/packages/twenty-front/src/modules/onboarding/components/OnboardingPageLoader.tsx b/packages/twenty-front/src/modules/onboarding/components/OnboardingPageLoader.tsx index 66d694f6b7..70bc87c0b3 100644 --- a/packages/twenty-front/src/modules/onboarding/components/OnboardingPageLoader.tsx +++ b/packages/twenty-front/src/modules/onboarding/components/OnboardingPageLoader.tsx @@ -1,3 +1,4 @@ +import { isOnOnboardingVerifyPath } from '@/auth/utils/isOnOnboardingVerifyPath'; import { OnboardingPulsingLogo } from '@/onboarding/components/OnboardingPulsingLogo'; import { styled } from '@linaria/react'; import { themeCssVariables } from 'twenty-ui/theme-constants'; @@ -12,8 +13,12 @@ const StyledContainer = styled.div` width: 100%; `; +// The verify screen renders its own pulsing logo, so the loader shown before it +// omits the logo to avoid a double-logo flash on cold boot into the verify step. export const OnboardingPageLoader = () => ( - + {!isOnOnboardingVerifyPath(window.location.pathname) && ( + + )} ); diff --git a/packages/twenty-front/src/modules/onboarding/components/OnboardingStepPageLoader.tsx b/packages/twenty-front/src/modules/onboarding/components/OnboardingStepPageLoader.tsx index ada09ba9c4..e93e593ffd 100644 --- a/packages/twenty-front/src/modules/onboarding/components/OnboardingStepPageLoader.tsx +++ b/packages/twenty-front/src/modules/onboarding/components/OnboardingStepPageLoader.tsx @@ -1,17 +1,11 @@ -import { OnboardingPulsingLogo } from '@/onboarding/components/OnboardingPulsingLogo'; import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` - align-items: center; - display: flex; + background: ${themeCssVariables.background.secondary}; flex: 1; - justify-content: center; min-height: 0; width: 100%; `; -export const OnboardingStepPageLoader = () => ( - - - -); +export const OnboardingStepPageLoader = () => ; diff --git a/packages/twenty-front/src/modules/onboarding/components/StyledOnboardingActivationMessageEmphasis.ts b/packages/twenty-front/src/modules/onboarding/components/StyledOnboardingActivationMessageEmphasis.ts new file mode 100644 index 0000000000..223a6f8fd8 --- /dev/null +++ b/packages/twenty-front/src/modules/onboarding/components/StyledOnboardingActivationMessageEmphasis.ts @@ -0,0 +1,7 @@ +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; + +export const StyledOnboardingActivationMessageEmphasis = styled.span` + color: ${themeCssVariables.font.color.primary}; + font-weight: ${themeCssVariables.font.weight.medium}; +`; diff --git a/packages/twenty-front/src/modules/onboarding/components/StyledOnboardingContentBlock.ts b/packages/twenty-front/src/modules/onboarding/components/StyledOnboardingContentBlock.ts new file mode 100644 index 0000000000..6b7733be5a --- /dev/null +++ b/packages/twenty-front/src/modules/onboarding/components/StyledOnboardingContentBlock.ts @@ -0,0 +1,9 @@ +import { ONBOARDING_CONTENT_BLOCK_WIDTH } from '@/onboarding/constants/OnboardingContentBlockWidth'; +import { styled } from '@linaria/react'; + +export const StyledOnboardingContentBlock = styled.div` + display: flex; + flex-direction: column; + max-width: 100%; + width: ${ONBOARDING_CONTENT_BLOCK_WIDTH}px; +`; diff --git a/packages/twenty-front/src/modules/onboarding/components/StyledOnboardingStepHeading.ts b/packages/twenty-front/src/modules/onboarding/components/StyledOnboardingStepHeading.ts index 1ae4c2faed..576795fcef 100644 --- a/packages/twenty-front/src/modules/onboarding/components/StyledOnboardingStepHeading.ts +++ b/packages/twenty-front/src/modules/onboarding/components/StyledOnboardingStepHeading.ts @@ -1,11 +1,7 @@ -import { ONBOARDING_CONTENT_BLOCK_WIDTH } from '@/onboarding/constants/OnboardingContentBlockWidth'; +import { StyledOnboardingContentBlock } from '@/onboarding/components/StyledOnboardingContentBlock'; import { styled } from '@linaria/react'; import { themeCssVariables } from 'twenty-ui/theme-constants'; -export const StyledOnboardingStepHeading = styled.div` - display: flex; - flex-direction: column; +export const StyledOnboardingStepHeading = styled(StyledOnboardingContentBlock)` gap: ${themeCssVariables.spacing[4]}; - max-width: 100%; - width: ${ONBOARDING_CONTENT_BLOCK_WIDTH}px; `; diff --git a/packages/twenty-front/src/modules/onboarding/constants/OnboardingActivationMessages.ts b/packages/twenty-front/src/modules/onboarding/constants/OnboardingActivationMessages.ts deleted file mode 100644 index 33e01c23eb..0000000000 --- a/packages/twenty-front/src/modules/onboarding/constants/OnboardingActivationMessages.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { WORKSPACE_ACTIVATION_MESSAGES } from '@/auth/sign-in-up/constants/WorkspaceActivationMessages'; -import { msg } from '@lingui/core/macro'; - -export const ONBOARDING_ACTIVATION_MESSAGES = [ - msg`Verifying your login token`, - ...WORKSPACE_ACTIVATION_MESSAGES, -]; diff --git a/packages/twenty-front/src/modules/onboarding/constants/OnboardingActivationMessages.tsx b/packages/twenty-front/src/modules/onboarding/constants/OnboardingActivationMessages.tsx new file mode 100644 index 0000000000..29702b4417 --- /dev/null +++ b/packages/twenty-front/src/modules/onboarding/constants/OnboardingActivationMessages.tsx @@ -0,0 +1,19 @@ +import { WORKSPACE_ACTIVATION_MESSAGES } from '@/auth/sign-in-up/constants/WorkspaceActivationMessages'; +import { StyledOnboardingActivationMessageEmphasis } from '@/onboarding/components/StyledOnboardingActivationMessageEmphasis'; +import { type OnboardingActivationMessage } from '@/onboarding/types/OnboardingActivationMessage'; +import { Trans } from '@lingui/react/macro'; + +export const ONBOARDING_ACTIVATION_MESSAGES: OnboardingActivationMessage[] = [ + { + id: 'verifying-login-token', + content: ( + + Verifying your{' '} + + login token + + + ), + }, + ...WORKSPACE_ACTIVATION_MESSAGES, +]; diff --git a/packages/twenty-front/src/modules/onboarding/constants/OnboardingContentBlockWidth.ts b/packages/twenty-front/src/modules/onboarding/constants/OnboardingContentBlockWidth.ts index 76b4cdb197..5e332fe6b4 100644 --- a/packages/twenty-front/src/modules/onboarding/constants/OnboardingContentBlockWidth.ts +++ b/packages/twenty-front/src/modules/onboarding/constants/OnboardingContentBlockWidth.ts @@ -1 +1 @@ -export const ONBOARDING_CONTENT_BLOCK_WIDTH = 340; +export const ONBOARDING_CONTENT_BLOCK_WIDTH = 440; diff --git a/packages/twenty-front/src/modules/onboarding/constants/UpgradeStepContentWidth.ts b/packages/twenty-front/src/modules/onboarding/constants/UpgradeStepContentWidth.ts deleted file mode 100644 index aab60fbd2b..0000000000 --- a/packages/twenty-front/src/modules/onboarding/constants/UpgradeStepContentWidth.ts +++ /dev/null @@ -1 +0,0 @@ -export const UPGRADE_STEP_CONTENT_WIDTH = 440; diff --git a/packages/twenty-front/src/modules/onboarding/hooks/useInviteTeam.ts b/packages/twenty-front/src/modules/onboarding/hooks/useInviteTeam.ts index d711ca6322..8f7b571bc2 100644 --- a/packages/twenty-front/src/modules/onboarding/hooks/useInviteTeam.ts +++ b/packages/twenty-front/src/modules/onboarding/hooks/useInviteTeam.ts @@ -31,6 +31,8 @@ export const useInviteTeam = () => { const setOnboardingFreeCredits = useSetAtomState(onboardingFreeCreditsState); const onboardingConfig = useAtomStateValue(onboardingConfigState); + const [isNavigating, setIsNavigating] = useState(false); + const { control, handleSubmit, @@ -152,6 +154,7 @@ export const useInviteTeam = () => { } setNextOnboardingStatus(); + setIsNavigating(true); }, [ enqueueSuccessSnackBar, @@ -186,5 +189,6 @@ export const useInviteTeam = () => { getPlaceholder, isValid, isSubmitting, + isNavigating, }; }; diff --git a/packages/twenty-front/src/modules/onboarding/hooks/useOnboardingContentWidth.ts b/packages/twenty-front/src/modules/onboarding/hooks/useOnboardingContentWidth.ts deleted file mode 100644 index 93142f018b..0000000000 --- a/packages/twenty-front/src/modules/onboarding/hooks/useOnboardingContentWidth.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { ONBOARDING_CONTENT_BLOCK_WIDTH } from '@/onboarding/constants/OnboardingContentBlockWidth'; -import { UPGRADE_STEP_CONTENT_WIDTH } from '@/onboarding/constants/UpgradeStepContentWidth'; -import { useLocation } from 'react-router-dom'; -import { AppPath } from 'twenty-shared/types'; -import { isMatchingLocation } from '~/utils/isMatchingLocation'; - -export const useOnboardingContentWidth = () => { - const location = useLocation(); - - return isMatchingLocation(location, AppPath.PlanRequired) - ? UPGRADE_STEP_CONTENT_WIDTH - : ONBOARDING_CONTENT_BLOCK_WIDTH; -}; diff --git a/packages/twenty-front/src/modules/onboarding/types/OnboardingActivationMessage.ts b/packages/twenty-front/src/modules/onboarding/types/OnboardingActivationMessage.ts new file mode 100644 index 0000000000..e8a1326196 --- /dev/null +++ b/packages/twenty-front/src/modules/onboarding/types/OnboardingActivationMessage.ts @@ -0,0 +1,6 @@ +import { type ReactNode } from 'react'; + +export type OnboardingActivationMessage = { + id: string; + content: ReactNode; +}; diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/BlankLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/BlankLayout.tsx index b74aa0ea4a..13af9650a3 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/BlankLayout.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/components/BlankLayout.tsx @@ -3,7 +3,7 @@ import { Outlet } from 'react-router-dom'; import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledLayout = styled.div` - background: ${themeCssVariables.background.noisy}; + background: ${themeCssVariables.background.secondary}; display: flex; flex-direction: column; height: 100dvh; diff --git a/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx b/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx index b872330029..b7f699ee5e 100644 --- a/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx +++ b/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx @@ -1,6 +1,5 @@ import { billingState } from '@/client-config/states/billingState'; import { onboardingConfigState } from '@/client-config/states/onboardingConfigState'; -import { OnboardingPageLoader } from '@/onboarding/components/OnboardingPageLoader'; import { usePlans } from '@/settings/billing/hooks/usePlans'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { isDefined } from 'twenty-shared/utils'; @@ -16,7 +15,5 @@ export const ChooseYourPlan = () => { billing={billing} creditsReward={onboardingConfig?.upgradeCreditsReward} /> - ) : ( - - ); + ) : null; }; diff --git a/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx b/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx index 583fc1e718..fc0104ccab 100644 --- a/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx +++ b/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx @@ -87,6 +87,8 @@ export const CreateProfile = () => { ); const { updateWorkspaceMemberSettings } = useUpdateWorkspaceMemberSettings(); + const [isNavigating, setIsNavigating] = useState(false); + const { control, handleSubmit, @@ -151,7 +153,9 @@ export const CreateProfile = () => { }); setNextOnboardingStatus(); + setIsNavigating(true); } catch (error: any) { + setIsNavigating(false); enqueueErrorSnackBar({ apolloError: CombinedGraphQLErrors.is(error) ? error : undefined, }); @@ -279,7 +283,7 @@ export const CreateProfile = () => { diff --git a/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx b/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx index eeaa887447..c3ec318804 100644 --- a/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx +++ b/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx @@ -51,6 +51,7 @@ export const InviteTeam = () => { getPlaceholder, isValid, isSubmitting, + isNavigating, } = useInviteTeam(); const onboardingConfig = useAtomStateValue(onboardingConfigState); const creditsRewardPerUser = onboardingConfig?.inviteTeamCreditsRewardPerUser; @@ -123,11 +124,14 @@ export const InviteTeam = () => { - + diff --git a/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx b/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx index abe6f5e1d8..8423062362 100644 --- a/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx +++ b/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx @@ -4,7 +4,6 @@ import { isGoogleMessagingEnabledState } from '@/client-config/states/isGoogleMe import { isMicrosoftCalendarEnabledState } from '@/client-config/states/isMicrosoftCalendarEnabledState'; import { isMicrosoftMessagingEnabledState } from '@/client-config/states/isMicrosoftMessagingEnabledState'; import { onboardingConfigState } from '@/client-config/states/onboardingConfigState'; -import { OnboardingPageLoader } from '@/onboarding/components/OnboardingPageLoader'; import { SyncEmailsAutoSkipEffect } from '@/onboarding/effect-components/SyncEmailsAutoSkipEffect'; import { useSkipSyncEmailOnboardingStep } from '@/onboarding/hooks/useSkipSyncEmailOnboardingStep'; import { onboardingFreeCreditsState } from '@/onboarding/states/onboardingFreeCreditsState'; @@ -86,16 +85,11 @@ export const SyncEmails = () => { }, []); if (!isClientConfigLoaded) { - return ; + return null; } if (!hasProviderEnabled && !hasAutoSkipFailed) { - return ( - <> - - - - ); + return ; } return ( diff --git a/packages/twenty-front/src/pages/onboarding/UpgradeFreeTrial.tsx b/packages/twenty-front/src/pages/onboarding/UpgradeFreeTrial.tsx index 09293c7036..7a55e21cbe 100644 --- a/packages/twenty-front/src/pages/onboarding/UpgradeFreeTrial.tsx +++ b/packages/twenty-front/src/pages/onboarding/UpgradeFreeTrial.tsx @@ -3,6 +3,8 @@ import { useAuth } from '@/auth/hooks/useAuth'; import { billingCheckoutSessionState } from '@/auth/states/billingCheckoutSessionState'; import { currentUserState } from '@/auth/states/currentUserState'; import { calendarBookingPageIdState } from '@/client-config/states/calendarBookingPageIdState'; +import { StyledOnboardingContentBlock } from '@/onboarding/components/StyledOnboardingContentBlock'; +import { StyledOnboardingStepHeading } from '@/onboarding/components/StyledOnboardingStepHeading'; import { StyledOnboardingStepPage } from '@/onboarding/components/StyledOnboardingStepPage'; import { StyledOnboardingStepSubtitle } from '@/onboarding/components/StyledOnboardingStepSubtitle'; import { StyledOnboardingStepTagsRow } from '@/onboarding/components/StyledOnboardingStepTagsRow'; @@ -11,7 +13,6 @@ import { OnboardingStepAnimatedItem } from '@/onboarding/components/OnboardingSt import { OnboardingCreditsRewardTag } from '@/onboarding/components/import-contacts/OnboardingCreditsRewardTag'; import { OnboardingPlanCard } from '@/onboarding/components/upgrade-free-trial/OnboardingPlanCard'; import { OnboardingTrialExtensionTag } from '@/onboarding/components/upgrade-free-trial/OnboardingTrialExtensionTag'; -import { UPGRADE_STEP_CONTENT_WIDTH } from '@/onboarding/constants/UpgradeStepContentWidth'; import { useBaseLicensedPriceByPlanKeyAndInterval } from '@/settings/billing/hooks/useBaseLicensedPriceByPlanKeyAndInterval'; import { useHandleCheckoutSession } from '@/settings/billing/hooks/useHandleCheckoutSession'; import { useStripeAppearance } from '@/settings/billing/hooks/useStripeAppearance'; @@ -39,29 +40,13 @@ const StyledPage = styled(StyledOnboardingStepPage)` padding: ${themeCssVariables.spacing[6]} ${themeCssVariables.spacing[8]}; `; -const StyledHeading = styled.div` - display: flex; - flex-direction: column; - gap: ${themeCssVariables.spacing[4]}; - max-width: 100%; - width: ${UPGRADE_STEP_CONTENT_WIDTH}px; -`; - -const StyledCards = styled.div` - display: flex; - flex-direction: column; +const StyledCards = styled(StyledOnboardingContentBlock)` gap: ${themeCssVariables.spacing['1.5']}; - max-width: 100%; - width: ${UPGRADE_STEP_CONTENT_WIDTH}px; `; -const StyledFooter = styled.div` +const StyledFooter = styled(StyledOnboardingContentBlock)` align-items: center; - display: flex; - flex-direction: column; gap: ${themeCssVariables.spacing['1.5']}; - max-width: 100%; - width: ${UPGRADE_STEP_CONTENT_WIDTH}px; `; const StyledLinkGroup = styled.div` @@ -282,7 +267,7 @@ export const UpgradeFreeTrial = ({ return ( - + {t`Upgrade your free trial`} @@ -303,7 +288,7 @@ export const UpgradeFreeTrial = ({ )} - + {isDefined(stripePromise) && isDefined(baseProductPrice) ? (