From 21b0b8403a1ac97448fa844c808eca1bb962aa7f Mon Sep 17 00:00:00 2001 From: jbpenrath Date: Thu, 30 May 2024 18:31:19 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20create=20SaleTunnelNotVal?= =?UTF-8?q?idated=20step?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Currently, after payment success, if we reach the poll limit, we only display an error message to explain to the user it has to wait as its order validation its too long. It works but it's good for UX as user has to close the payment modal at the payment step. That's why we decided to create a SaleTunnelNotValidated. This component is shown when the poll limit is reach and it helps the user to understand that it has to wait a little bit to start its training. --- CHANGELOG.md | 1 + .../js/components/PaymentInterfaces/types.ts | 1 - .../SaleTunnel/GenericPaymentButton/index.tsx | 13 +--- .../SaleTunnel/GenericSaleTunnel.tsx | 24 +++++-- .../SaleTunnelNotValidated/index.tsx | 70 +++++++++++++++++++ .../SaleTunnel/SaleTunnelSuccess/_styles.scss | 63 ----------------- .../SaleTunnel/SaleTunnelSuccess/index.tsx | 22 +++--- .../js/components/SaleTunnel/_styles.scss | 29 ++++++++ .../js/components/SaleTunnel/index.spec.tsx | 36 +++++++--- src/frontend/scss/components/_index.scss | 1 - 10 files changed, 161 insertions(+), 99 deletions(-) create mode 100644 src/frontend/js/components/SaleTunnel/SaleTunnelNotValidated/index.tsx delete mode 100644 src/frontend/js/components/SaleTunnel/SaleTunnelSuccess/_styles.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d057adce7..757be10032 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ Versioning](https://semver.org/spec/v2.0.0.html). ### Added +- Add `SaleTunnelNotValidated` step into `SaleTunnel` - Add WarningIcon component ### Changed diff --git a/src/frontend/js/components/PaymentInterfaces/types.ts b/src/frontend/js/components/PaymentInterfaces/types.ts index 33cbbb844e..1dda390e24 100644 --- a/src/frontend/js/components/PaymentInterfaces/types.ts +++ b/src/frontend/js/components/PaymentInterfaces/types.ts @@ -5,7 +5,6 @@ export enum PaymentErrorMessageId { ERROR_DEFAULT = 'errorDefault', ERROR_FULL_PRODUCT = 'errorFullProduct', ERROR_TERMS = 'errorTerms', - ERROR_POLLING_LIMIT = 'errorPollingLimit', } export enum PaymentProviders { diff --git a/src/frontend/js/components/SaleTunnel/GenericPaymentButton/index.tsx b/src/frontend/js/components/SaleTunnel/GenericPaymentButton/index.tsx index 6602bda2a0..e5a4f19242 100644 --- a/src/frontend/js/components/SaleTunnel/GenericPaymentButton/index.tsx +++ b/src/frontend/js/components/SaleTunnel/GenericPaymentButton/index.tsx @@ -33,13 +33,6 @@ const messages = defineMessages({ description: 'Error message shown when payment creation request failed.', id: 'components.PaymentButton.errorDefault', }, - errorPollingLimit: { - defaultMessage: - 'Your payment has succeeded but your order validation is taking too long, you can close this dialog and come back later.', - description: - 'Error message shown when the polling limit has been reached and the order is not yet validated.', - id: 'components.PaymentButton.errorPollingLimit', - }, errorFullProduct: { defaultMessage: 'There are no more places available for this product.', description: @@ -246,9 +239,7 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => { const checkOrderValidity = async () => { if (round >= PAYMENT_SETTINGS.pollLimit) { timeoutRef.current = undefined; - // @TODO Instead of displaying a raw error message, we could call onSuccess with a "special" argument - // to display a different message in the SaleTunnelSuccess component. - handleError(PaymentErrorMessageId.ERROR_POLLING_LIMIT); + onPaymentSuccessRef.current(false); } else { const isValidated = await isOrderValidated(payment!.order_id); if (isValidated) { @@ -298,7 +289,7 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => { <> {renderTermsCheckbox()} + ) : ( + + )} + + + ); +}; + +export default SaleTunnelNotValidated; diff --git a/src/frontend/js/components/SaleTunnel/SaleTunnelSuccess/_styles.scss b/src/frontend/js/components/SaleTunnel/SaleTunnelSuccess/_styles.scss deleted file mode 100644 index d81cfb4146..0000000000 --- a/src/frontend/js/components/SaleTunnel/SaleTunnelSuccess/_styles.scss +++ /dev/null @@ -1,63 +0,0 @@ -// -// SaleTunnelStepResume component styles -// - -// -// Mixins -// - -// -// keyframe-strokedLineAppear -// -// Generate a keyframe to make svg stroked element appears slightly -// -// @param {string} name the keyframe's name to use from `animation` -// @param {length} length the full length of the stroke line` -// @param {reverse} reverse animation direction` -@mixin keyframe-strokedLineAppear($name, $length, $reverse: false) { - $direction: 1; - @if $reverse == true { - $direction: -1; - } - - @keyframes #{$name} { - from { - stroke-dashoffset: $direction * $length; - } - to { - stroke-dashoffset: 0; - } - } -} - -// -// Styles -// -.SaleTunnelSuccess { - align-items: center; - display: flex; - flex-direction: column; - - &__header { - margin-bottom: 0; - text-align: center; - } - - &__title { - color: r-theme-val(steps-content, title-color); - font-size: 1.5rem; - } - - &__content { - color: r-theme-val(steps-content, content-color); - font-size: 0.875rem; - line-height: 1.3em; - margin: 0; - padding: 0; - text-align: center; - } - - &__footer { - margin-top: 2.5rem; - } -} diff --git a/src/frontend/js/components/SaleTunnel/SaleTunnelSuccess/index.tsx b/src/frontend/js/components/SaleTunnel/SaleTunnelSuccess/index.tsx index 1d2545de03..4c6d601b26 100644 --- a/src/frontend/js/components/SaleTunnel/SaleTunnelSuccess/index.tsx +++ b/src/frontend/js/components/SaleTunnel/SaleTunnelSuccess/index.tsx @@ -10,33 +10,33 @@ const messages = defineMessages({ congratulations: { defaultMessage: 'Congratulations!', description: 'Text displayed to thank user for his order', - id: 'components.SaleTunnelStepResume.congratulations', + id: 'components.SaleTunnelSuccess.congratulations', }, successMessage: { defaultMessage: 'Your order has been successfully created.', description: 'Message to confirm that order has been created', - id: 'components.SaleTunnelStepResume.successMessage', + id: 'components.SaleTunnelSuccess.successMessage', }, successDetailMessage: { defaultMessage: 'You will receive your invoice by email in a few moments.', description: "Text to remind that order's invoice will be send by email soon", - id: 'components.SaleTunnelStepResume.successDetailMessage', + id: 'components.SaleTunnelSuccess.successDetailMessage', }, successDetailSignatureMessage: { defaultMessage: 'In order to enroll to course runs you first need to sign the training contract.', description: 'Text to remind that order needs to be signed', - id: 'components.SaleTunnelStepResume.successDetailSignatureMessage', + id: 'components.SaleTunnelSuccess.successDetailSignatureMessage', }, cta: { defaultMessage: 'Start this course now!', description: 'Label to the call to action to close sale tunnel', - id: 'components.SaleTunnelStepResume.cta', + id: 'components.SaleTunnelSuccess.cta', }, ctaSignature: { defaultMessage: 'Sign the training contract', description: 'Label to the call to action to close sale tunnel if there is a pending signature', - id: 'components.SaleTunnelStepResume.ctaSignature', + id: 'components.SaleTunnelSuccess.ctaSignature', }, }); @@ -44,14 +44,14 @@ export const SaleTunnelSuccess = ({ closeModal }: { closeModal: () => void }) => const intl = useIntl(); const { order, product } = useSaleTunnelContext(); return ( -
-
+
+
-

+

-

+


@@ -62,7 +62,7 @@ export const SaleTunnelSuccess = ({ closeModal }: { closeModal: () => void }) => )}

-