diff --git a/frontend/public/locales/en-GB/failedPayment.json b/frontend/public/locales/en-GB/failedPayment.json new file mode 100644 index 0000000000..a624e47c7d --- /dev/null +++ b/frontend/public/locales/en-GB/failedPayment.json @@ -0,0 +1,12 @@ +{ + "workspaceSuspended": "Your workspace is locked", + "gotQuestions": "Got Questions?", + "contactUs": "Contact Us", + "actionHeader": "Pay to continue", + "actionDescription": "Pay now to keep enjoying all the great features you’ve been using.", + "yourDataIsSafe": "Your data is safe with us until", + "actNow": "Act now to avoid any disruptions and continue where you left off.", + "contactAdmin": "Contact your admin to proceed with the upgrade.", + "continueMyJourney": "Settle your bill to continue", + "somethingWentWrong": "Something went wrong" +} diff --git a/frontend/public/locales/en/failedPayment.json b/frontend/public/locales/en/failedPayment.json new file mode 100644 index 0000000000..a624e47c7d --- /dev/null +++ b/frontend/public/locales/en/failedPayment.json @@ -0,0 +1,12 @@ +{ + "workspaceSuspended": "Your workspace is locked", + "gotQuestions": "Got Questions?", + "contactUs": "Contact Us", + "actionHeader": "Pay to continue", + "actionDescription": "Pay now to keep enjoying all the great features you’ve been using.", + "yourDataIsSafe": "Your data is safe with us until", + "actNow": "Act now to avoid any disruptions and continue where you left off.", + "contactAdmin": "Contact your admin to proceed with the upgrade.", + "continueMyJourney": "Settle your bill to continue", + "somethingWentWrong": "Something went wrong" +} diff --git a/frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.styles.scss b/frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.styles.scss index e69de29bb2..271206519d 100644 --- a/frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.styles.scss +++ b/frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.styles.scss @@ -0,0 +1,179 @@ +$light-theme: 'lightMode'; +$dark-theme: 'darkMode'; + +@keyframes gradientFlow { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.workspace-suspended { + &__modal { + .ant-modal-mask { + backdrop-filter: blur(2px); + } + } + + &__tabs { + margin-top: 148px; + + .ant-tabs { + &-nav { + &::before { + border-color: var(--bg-slate-500); + + .#{$light-theme} & { + border-color: var(--bg-vanilla-300); + } + } + } + &-nav-wrap { + justify-content: center; + } + } + } + + &__modal { + &__header { + display: flex; + justify-content: space-between; + align-items: center; + + &__actions { + display: flex; + align-items: center; + gap: 16px; + } + } + .ant-modal-content { + border-radius: 4px; + border: 1px solid var(--bg-slate-400); + background: linear-gradient( + 139deg, + rgba(18, 19, 23, 0.8) 0%, + rgba(18, 19, 23, 0.9) 98.68% + ); + box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2); + backdrop-filter: blur(20px); + + .#{$light-theme} & { + border: 1px solid var(--bg-vanilla-300); + background: var(--bg-vanilla-100); + } + } + + .ant-modal-header { + background: transparent; + } + + .ant-list { + &-item { + border-color: var(--bg-slate-500); + + .#{$light-theme} & { + border-color: var(--bg-vanilla-300); + } + + &-meta { + align-items: center !important; + + &-title { + margin-bottom: 0 !important; + } + + &-avatar { + display: flex; + } + } + } + } + &__title { + font-weight: 400; + color: var(--text-vanilla-400); + + .#{$light-theme} & { + color: var(--text-ink-200); + } + } + &__cta { + margin-top: 54px; + } + } + &__container { + padding-top: 64px; + } + &__details { + width: 80%; + margin: 0 auto; + color: var(--text-vanilla-400, #c0c1c3); + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 150% */ + + .#{$light-theme} & { + color: var(--text-ink-200); + } + + &__highlight { + color: var(--text-vanilla-100, #fff); + font-style: normal; + font-weight: 700; + line-height: 24px; + + .#{$light-theme} & { + color: var(--text-ink-100); + } + } + } + &__title { + background: linear-gradient( + 99deg, + #ead8fd 0%, + #7a97fa 33%, + #fd5ab2 66%, + #ead8fd 100% + ); + background-size: 300% 300%; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: gradientFlow 24s ease infinite; + margin-bottom: 18px; + } + + &__faq-container { + width: 100%; + + .ant-collapse, + .ant-collapse-item, + .ant-collapse-content-active { + .#{$dark-theme} & { + border-color: var(--bg-slate-400); + } + } + } + + &__customer-stories { + &__left-container, + &__right-container { + display: flex; + flex-direction: column; + } + + &__left-container { + align-items: flex-end; + } + + &__right-container { + align-items: flex-start; + } + } +} diff --git a/frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.tsx b/frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.tsx index 0a826e597a..e48a783464 100644 --- a/frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.tsx +++ b/frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.tsx @@ -1,7 +1,154 @@ import './WorkspaceSuspended.styles.scss'; +import { + Alert, + Button, + Col, + Modal, + Row, + Skeleton, + Space, + Typography, +} from 'antd'; +import updateCreditCardApi from 'api/billing/checkout'; +import { useNotifications } from 'hooks/useNotifications'; +import { useAppContext } from 'providers/App/App'; +import { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useMutation } from 'react-query'; +import { useSelector } from 'react-redux'; +import { AppState } from 'store/reducers'; +import AppReducer from 'types/reducer/app'; +import { getFormattedDate } from 'utils/timeUtils'; + function WorkspaceSuspended(): JSX.Element { - return
Workspace Suspended!
; + const { role } = useSelector((state) => state.app); + const isAdmin = role === 'ADMIN'; + const { notifications } = useNotifications(); + const { activeLicenseV3, isFetchingActiveLicenseV3 } = useAppContext(); + + const { t } = useTranslation(['failedPayment']); + + const { mutate: updateCreditCard, isLoading } = useMutation( + updateCreditCardApi, + { + onSuccess: (data) => { + if (data.payload?.redirectURL) { + const newTab = document.createElement('a'); + newTab.href = data.payload.redirectURL; + newTab.target = '_blank'; + newTab.rel = 'noopener noreferrer'; + newTab.click(); + } + }, + onError: () => + notifications.error({ + message: t('somethingWentWrong'), + }), + }, + ); + + const handleUpdateCreditCard = useCallback(async () => { + updateCreditCard({ + licenseKey: activeLicenseV3?.key || '', + successURL: window.location.origin, + cancelURL: window.location.origin, + }); + }, [activeLicenseV3?.key, updateCreditCard]); + return ( +
+ + + {t('workspaceSuspended')} + + + + Got Questions? + + + +
+ } + open + closable={false} + footer={null} + width="65%" + > +
+ {isFetchingActiveLicenseV3 || !activeLicenseV3 ? ( + + ) : ( + <> + + + + +
{t('actionHeader')}
+ + + {t('actionDescription')} +
+ {t('yourDataIsSafe')}{' '} + + {getFormattedDate(Date.now())} + {' '} + {t('actNow')} + + + + + {!isAdmin && ( + + + + + + )} + {isAdmin && ( + + + + + + )} + + )} +
+ + + ); } export default WorkspaceSuspended;