From 379f19701e25af00726c21831260c1e70d378db7 Mon Sep 17 00:00:00 2001 From: Conor Macpherson Date: Fri, 31 Mar 2023 16:21:36 -0400 Subject: [PATCH] Add success, error, loading modals, lint. --- .../useControlSelfHostedExpansionModal.ts | 2 +- .../error_page.tsx | 17 ++++++++++++++-- .../expansion_card.tsx | 4 ++-- .../index.test.tsx | 2 +- .../self_hosted_expansion_modal/index.tsx | 20 +++++++++++-------- .../success_page.tsx | 11 ++++++++-- 6 files changed, 40 insertions(+), 16 deletions(-) diff --git a/webapp/channels/src/components/common/hooks/useControlSelfHostedExpansionModal.ts b/webapp/channels/src/components/common/hooks/useControlSelfHostedExpansionModal.ts index 42ef497e86..db44768fd0 100644 --- a/webapp/channels/src/components/common/hooks/useControlSelfHostedExpansionModal.ts +++ b/webapp/channels/src/components/common/hooks/useControlSelfHostedExpansionModal.ts @@ -20,7 +20,7 @@ import useCanSelfHostedExpand from './useCanSelfHostedExpand'; interface HookOptions{ onClick?: () => void; - trackingLocation: string; + trackingLocation?: string; } export default function useControlSelfHostedExpansionModal(options: HookOptions): ControlModal { diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/error_page.tsx b/webapp/channels/src/components/self_hosted_expansion_modal/error_page.tsx index 80e852d584..2b9748de26 100644 --- a/webapp/channels/src/components/self_hosted_expansion_modal/error_page.tsx +++ b/webapp/channels/src/components/self_hosted_expansion_modal/error_page.tsx @@ -11,7 +11,11 @@ import IconMessage from 'components/purchase_modal/icon_message'; import './error_page.scss'; -export default function SelfHostedExpansionErrorPage() { +interface Props { + canRetry: boolean; +} + +export default function SelfHostedExpansionErrorPage(props: Props) { const [, contactSupportLink] = useOpenSelfHostedZendeskSupportForm('Purchase error'); const formattedTitle = ( @@ -21,13 +25,22 @@ export default function SelfHostedExpansionErrorPage() { /> ); - const formattedButtonText = ( + let formattedButtonText = ( ); + if (!props.canRetry) { + formattedButtonText = ( + + ); + } + const formattedSubtitle = ( ( - + <>
{text} - + ), }} /> diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/index.test.tsx b/webapp/channels/src/components/self_hosted_expansion_modal/index.test.tsx index 524cb26e1f..9ca3718f22 100644 --- a/webapp/channels/src/components/self_hosted_expansion_modal/index.test.tsx +++ b/webapp/channels/src/components/self_hosted_expansion_modal/index.test.tsx @@ -132,7 +132,7 @@ jest.mock('utils/hosted_customer', () => { const productName = SelfHostedProducts.PROFESSIONAL; // Licensed expiry set as 3 months from the current date (rolls over to new years). -let licenseExpiry = moment() +let licenseExpiry = moment(); const monthsUntilLicenseExpiry = 3; licenseExpiry = licenseExpiry.add(monthsUntilLicenseExpiry, 'months'); diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/index.tsx b/webapp/channels/src/components/self_hosted_expansion_modal/index.tsx index 845fafcfe2..efc62324a7 100644 --- a/webapp/channels/src/components/self_hosted_expansion_modal/index.tsx +++ b/webapp/channels/src/components/self_hosted_expansion_modal/index.tsx @@ -12,6 +12,9 @@ import {StripeCardElementChangeEvent} from '@stripe/stripe-js'; import UpgradeSvg from 'components/common/svg_images_components/upgrade_svg'; import RootPortal from 'components/root_portal'; import ContactSalesLink from 'components/self_hosted_purchase_modal/contact_sales_link'; +import ErrorPage from 'components/self_hosted_expansion_modal/error_page'; +import SuccessPage from 'components/self_hosted_expansion_modal/success_page'; +import Submitting from 'components/self_hosted_purchase_modal/submitting'; import useLoadStripe from 'components/common/hooks/useLoadStripe'; import CardInput, {CardInputType} from 'components/payment_form/card_input'; @@ -47,6 +50,7 @@ import {STORAGE_KEY_EXPANSION_IN_PROGRESS} from './constants'; import Address from 'components/self_hosted_purchase_modal/address'; import ChooseDifferentShipping from 'components/choose_different_shipping'; import Terms from 'components/self_hosted_purchase_modal/terms'; +import useControlSelfHostedExpansionModal from 'components/common/hooks/useControlSelfHostedExpansionModal'; export interface FormState { cardName: string; @@ -163,6 +167,7 @@ export function canSubmit(formState: FormState, progress: ValueOf(); const intl = useIntl(); const cardRef = useRef(null); @@ -173,6 +178,7 @@ export default function SelfHostedExpansionModal() { const license = useSelector(getLicense); const licensedSeats = parseInt(license.Users, 10); + const currentPlan = license.SkuName; const activeUsers = useSelector(getFilteredUsersStats)?.total_users_count || 0; const [additionalSeats, setAdditionalSeats] = useState(activeUsers <= licensedSeats ? 1 : activeUsers - licensedSeats); @@ -182,6 +188,7 @@ export default function SelfHostedExpansionModal() { const initialState = makeInitialState(additionalSeats); const [formState, setFormState] = useState(initialState); const [show] = useState(true); + const canRetry = formState.error !== '422'; const title = intl.formatMessage({ id: 'self_hosted_expansion.expansion_modal.title', @@ -501,25 +508,22 @@ export default function SelfHostedExpansionModal() { /> - {/* {((formState.succeeded || progress === SelfHostedSignupProgress.CREATED_LICENSE) && hasLicense) && !formState.error && !formState.submitting && ( + {((formState.succeeded || progress === SelfHostedSignupProgress.CREATED_LICENSE)) && !formState.error && !formState.submitting && ( )} - {formState.submitting && ( + {formState.submitting && !formState.error && ( )} {formState.error && ( - )} */} + )}
diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/success_page.tsx b/webapp/channels/src/components/self_hosted_expansion_modal/success_page.tsx index cda885fa0d..0e08a50b22 100644 --- a/webapp/channels/src/components/self_hosted_expansion_modal/success_page.tsx +++ b/webapp/channels/src/components/self_hosted_expansion_modal/success_page.tsx @@ -16,7 +16,11 @@ import {closeModal} from 'actions/views/modals'; import './success_page.scss'; -export default function SelfHostedExpansionSuccessPage() { +interface Props { + onClose: () => void; +} + +export default function SelfHostedExpansionSuccessPage(props: Props) { const dispatch = useDispatch(); const titleText = ( dispatch(closeModal(ModalIdentifiers.SUCCESS_MODAL))} + buttonHandler={() => { + props.onClose(); + dispatch(closeModal(ModalIdentifiers.SUCCESS_MODAL)); + }} />