From 870b86a218bb8e11cf1bd57b5a01a668387bce1f Mon Sep 17 00:00:00 2001 From: Darcy Ye Date: Thu, 30 Mar 2023 15:17:18 +0800 Subject: [PATCH] feat(cloud): replace schedule meeting with send email (#3614) --- .../console/src/assets/images/email-us.svg | 5 ++ .../EarlyBirdGift/GiftModal/index.module.scss | 6 +- .../EarlyBirdGift/GiftModal/index.tsx | 18 +++++- .../index.module.scss | 12 ++-- .../components/ReachLogto/index.tsx | 45 +++++++++++++++ .../components/Reservation/index.tsx | 56 ------------------- .../console/src/onboarding/constants/index.ts | 11 +++- .../pages/Congrats/index.module.scss | 2 +- .../src/onboarding/pages/Congrats/index.tsx | 20 ++++--- .../de/translation/admin-console/cloud.ts | 6 ++ .../en/translation/admin-console/cloud.ts | 9 ++- .../es/translation/admin-console/cloud.ts | 6 ++ .../fr/translation/admin-console/cloud.ts | 9 ++- .../ja/translation/admin-console/cloud.ts | 9 ++- .../ko/translation/admin-console/cloud.ts | 9 ++- .../pt-br/translation/admin-console/cloud.ts | 9 ++- .../pt-pt/translation/admin-console/cloud.ts | 9 ++- .../ru/translation/admin-console/cloud.ts | 11 +++- .../tr-tr/translation/admin-console/cloud.ts | 9 ++- .../zh-cn/translation/admin-console/cloud.ts | 9 ++- .../zh-hk/translation/admin-console/cloud.ts | 9 ++- .../zh-tw/translation/admin-console/cloud.ts | 9 ++- 22 files changed, 179 insertions(+), 109 deletions(-) create mode 100644 packages/console/src/assets/images/email-us.svg rename packages/console/src/onboarding/components/{Reservation => ReachLogto}/index.module.scss (76%) create mode 100644 packages/console/src/onboarding/components/ReachLogto/index.tsx delete mode 100644 packages/console/src/onboarding/components/Reservation/index.tsx diff --git a/packages/console/src/assets/images/email-us.svg b/packages/console/src/assets/images/email-us.svg new file mode 100644 index 000000000..8d93357fa --- /dev/null +++ b/packages/console/src/assets/images/email-us.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/console/src/onboarding/components/EarlyBirdGift/GiftModal/index.module.scss b/packages/console/src/onboarding/components/EarlyBirdGift/GiftModal/index.module.scss index d86cc7cb7..c743accb9 100644 --- a/packages/console/src/onboarding/components/EarlyBirdGift/GiftModal/index.module.scss +++ b/packages/console/src/onboarding/components/EarlyBirdGift/GiftModal/index.module.scss @@ -10,7 +10,9 @@ .description { font: var(--font-body-2); color: var(--color-text-secondary); - margin-bottom: _.unit(6); + } + + > :not(:first-child) { + margin-top: _.unit(6); } } - diff --git a/packages/console/src/onboarding/components/EarlyBirdGift/GiftModal/index.tsx b/packages/console/src/onboarding/components/EarlyBirdGift/GiftModal/index.tsx index 8e4c30b75..0afe3ed24 100644 --- a/packages/console/src/onboarding/components/EarlyBirdGift/GiftModal/index.tsx +++ b/packages/console/src/onboarding/components/EarlyBirdGift/GiftModal/index.tsx @@ -1,10 +1,13 @@ import { useTranslation } from 'react-i18next'; import ReactModal from 'react-modal'; +import Calendar from '@/assets/images/calendar.svg'; +import Email from '@/assets/images/email.svg'; import ModalLayout from '@/components/ModalLayout'; +import { emailUsLink, reservationLink } from '@/onboarding/constants'; import * as modalStyles from '@/scss/modal.module.scss'; -import Reservation from '../../Reservation'; +import ReachLogto from '../../ReachLogto'; import * as styles from './index.module.scss'; @@ -31,10 +34,19 @@ function GiftModal({ isOpen, onClose }: Props) { onClose={onClose} >
{t('cloud.gift.description')}
- } description="cloud.gift.reserve_description" - reservationButtonTitle="cloud.gift.book_button" + buttonTitle="cloud.gift.book_button" + link={reservationLink} + /> + } + description="cloud.gift.email_us_description" + buttonTitle="cloud.gift.email_us_button" + link={emailUsLink} /> diff --git a/packages/console/src/onboarding/components/Reservation/index.module.scss b/packages/console/src/onboarding/components/ReachLogto/index.module.scss similarity index 76% rename from packages/console/src/onboarding/components/Reservation/index.module.scss rename to packages/console/src/onboarding/components/ReachLogto/index.module.scss index 6fb5afbae..9da92888a 100644 --- a/packages/console/src/onboarding/components/Reservation/index.module.scss +++ b/packages/console/src/onboarding/components/ReachLogto/index.module.scss @@ -1,6 +1,6 @@ @use '@/scss/underscore' as _; -.reservation { +.reachLogto { width: 100%; padding: _.unit(3) _.unit(4); border: 1px solid var(--color-divider); @@ -9,20 +9,22 @@ align-items: center; justify-content: space-between; - .reservationInfo { + .reachLogtoInfo { display: flex; align-items: center; - .reservationIcon { + .reachLogtoIcon { + width: 36px; + height: 36px; margin-right: _.unit(4); flex-shrink: 0; } - .reservationTitle { + .reachLogtoTitle { font: var(--font-title-3); } - .reservationDescription { + .reachLogtoDescription { font: var(--font-body-2); color: var(--color-text-secondary); padding-right: _.unit(4); diff --git a/packages/console/src/onboarding/components/ReachLogto/index.tsx b/packages/console/src/onboarding/components/ReachLogto/index.tsx new file mode 100644 index 000000000..0f988b1c0 --- /dev/null +++ b/packages/console/src/onboarding/components/ReachLogto/index.tsx @@ -0,0 +1,45 @@ +import type { AdminConsoleKey } from '@logto/phrases'; +import classNames from 'classnames'; +import { cloneElement } from 'react'; +import type { ReactNode, ReactElement } from 'react'; +import { useTranslation } from 'react-i18next'; + +import Button from '@/components/Button'; + +import * as styles from './index.module.scss'; + +type Props = { + title: AdminConsoleKey; + description: AdminConsoleKey; + icon: ReactElement; + buttonTitle: AdminConsoleKey; + buttonIcon?: ReactNode; + link: string; + className?: string; +}; + +function ReachLogto({ title, description, icon, buttonTitle, buttonIcon, link, className }: Props) { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + + return ( +
+
+ {cloneElement(icon, { className: styles.reachLogtoIcon })} +
+
{t(title)}
+
{t(description)}
+
+
+
+ ); +} + +export default ReachLogto; diff --git a/packages/console/src/onboarding/components/Reservation/index.tsx b/packages/console/src/onboarding/components/Reservation/index.tsx deleted file mode 100644 index e61f9581b..000000000 --- a/packages/console/src/onboarding/components/Reservation/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import type { AdminConsoleKey } from '@logto/phrases'; -import classNames from 'classnames'; -import type { ReactNode } from 'react'; -import { useTranslation } from 'react-i18next'; - -import Calendar from '@/assets/images/calendar.svg'; -import Button from '@/components/Button'; -import { reservationLink } from '@/onboarding/constants'; -import { buildUrl } from '@/utils/url'; - -import * as styles from './index.module.scss'; - -type Props = { - title: AdminConsoleKey; - description: AdminConsoleKey; - reservationButtonTitle: AdminConsoleKey; - reservationButtonIcon?: ReactNode; - className?: string; -}; - -function Reservation({ - title, - description, - reservationButtonTitle, - reservationButtonIcon, - className, -}: Props) { - const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - - return ( -
-
- -
-
{t(title)}
-
{t(description)}
-
-
-
- ); -} - -export default Reservation; diff --git a/packages/console/src/onboarding/constants/index.ts b/packages/console/src/onboarding/constants/index.ts index f3e18e4db..e9d296404 100644 --- a/packages/console/src/onboarding/constants/index.ts +++ b/packages/console/src/onboarding/constants/index.ts @@ -1,3 +1,12 @@ -export const reservationLink = 'https://calendly.com/logto/30min'; +import { buildUrl } from '@/utils/url'; + +export const reservationLink = buildUrl('https://calendly.com/logto/30min', { + // Note: month format is YYYY-MM + month: new Date().toISOString().slice(0, 7), +}); +export const emailUsLink = buildUrl('mailto:contact@logto.io', { + subject: 'Cloud pricing and special offer', +}).replace(/\+/g, '%20'); + export const logtoBlogLink = 'https://docs.logto.io/blog?utm_source=console'; export const aboutCloudPreviewLink = 'https://docs.logto.io/about/cloud-preview?utm_source=console'; diff --git a/packages/console/src/onboarding/pages/Congrats/index.module.scss b/packages/console/src/onboarding/pages/Congrats/index.module.scss index fb4cd8ddb..8803eeb9b 100644 --- a/packages/console/src/onboarding/pages/Congrats/index.module.scss +++ b/packages/console/src/onboarding/pages/Congrats/index.module.scss @@ -36,7 +36,7 @@ margin: _.unit(8) 0; } -.reservation { +.emailUs { background-color: var(--color-layer-light); border: unset; } diff --git a/packages/console/src/onboarding/pages/Congrats/index.tsx b/packages/console/src/onboarding/pages/Congrats/index.tsx index b6b5f6820..34d4c115b 100644 --- a/packages/console/src/onboarding/pages/Congrats/index.tsx +++ b/packages/console/src/onboarding/pages/Congrats/index.tsx @@ -3,14 +3,16 @@ import classNames from 'classnames'; import { useContext } from 'react'; import { Trans, useTranslation } from 'react-i18next'; -import CalendarOutline from '@/assets/images/calendar-outline.svg'; import CongratsImage from '@/assets/images/congrats.svg'; +import EmailUsIcon from '@/assets/images/email-us.svg'; +import Email from '@/assets/images/email.svg'; import Button from '@/components/Button'; import Divider from '@/components/Divider'; import OverlayScrollbar from '@/components/OverlayScrollbar'; import PageMeta from '@/components/PageMeta'; import { TenantsContext } from '@/contexts/TenantsProvider'; -import Reservation from '@/onboarding/components/Reservation'; +import ReachLogto from '@/onboarding/components/ReachLogto'; +import { emailUsLink } from '@/onboarding/constants'; import useUserOnboardingData from '@/onboarding/hooks/use-user-onboarding-data'; import * as pageLayout from '@/onboarding/scss/layout.module.scss'; @@ -39,12 +41,14 @@ function Congrats() { {t('cloud.congrats.description')} - } - className={styles.reservation} + } + icon={} + link={emailUsLink} + className={styles.emailUs} />