richie-education 2.30.1-dev12 → 2.30.1-dev14

package/js/components/PaymentInterfaces/types.ts

@@ -8,6 +8,7 @@ export enum SubscriptionErrorMessageId {
   ERROR_ADDRESS = 'errorAddress',
   ERROR_DEFAULT = 'errorDefault',
   ERROR_FULL_PRODUCT = 'errorFullProduct',
+  ERROR_WITHDRAWAL_RIGHT = 'errorWithdrawalRight',
 }
 
 export enum PaymentProviders {

package/js/components/SaleTunnel/AddressSelector/index.spec.tsx

@@ -63,6 +63,8 @@ describe('AddressSelector', () => {
           unregisterSubmitCallback: jest.fn(),
           runSubmitCallbacks: jest.fn(),
           nextStep: jest.fn(),
+          hasWaivedWithdrawalRight: false,
+          setHasWaivedWithdrawalRight: jest.fn(),
         }),
         [billingAddress],
       );

package/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -35,6 +35,8 @@ export interface SaleTunnelContextType {
   setBillingAddress: (address?: Address) => void;
   creditCard?: CreditCard;
   setCreditCard: (creditCard?: CreditCard) => void;
+  hasWaivedWithdrawalRight: boolean;
+  setHasWaivedWithdrawalRight: (hasWaivedWithdrawalRight: boolean) => void;
   registerSubmitCallback: (key: string, callback: () => Promise<void>) => void;
   unregisterSubmitCallback: (key: string) => void;
   runSubmitCallbacks: () => Promise<void>;
@@ -76,6 +78,7 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
   });
   const [billingAddress, setBillingAddress] = useState<Address>();
   const [creditCard, setCreditCard] = useState<CreditCard>();
+  const [hasWaivedWithdrawalRight, setHasWaivedWithdrawalRight] = useState(false);
   const [step, setStep] = useState<SaleTunnelStep>(SaleTunnelStep.IDLE);
   const [submitCallbacks, setSubmitCallbacks] = useState<Map<string, () => Promise<void>>>(
     new Map(),
@@ -115,6 +118,8 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       setBillingAddress,
       creditCard,
       setCreditCard,
+      hasWaivedWithdrawalRight,
+      setHasWaivedWithdrawalRight,
       nextStep,
       step,
       registerSubmitCallback: (key, callback) => {
@@ -131,7 +136,7 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
         await Promise.all(Array.from(submitCallbacks.values()).map((cb) => cb()));
       },
     }),
-    [props, order, billingAddress, creditCard, step, submitCallbacks],
+    [props, order, billingAddress, creditCard, step, submitCallbacks, hasWaivedWithdrawalRight],
   );
 
   return (

package/js/components/SaleTunnel/SaleTunnelInformation/index.tsx

@@ -7,6 +7,7 @@ import { useSession } from 'contexts/SessionContext';
 import useOpenEdxProfile from 'hooks/useOpenEdxProfile';
 import { usePaymentSchedule } from 'hooks/usePaymentSchedule';
 import { Spinner } from 'components/Spinner';
+import WithdrawRightCheckbox from 'components/SaleTunnel/WithdrawRightCheckbox';
 
 const messages = defineMessages({
   title: {
@@ -71,6 +72,7 @@ export const SaleTunnelInformation = () => {
       <div>
         <PaymentScheduleBlock />
         <Total />
+        <WithdrawRightCheckbox />
       </div>
     </div>
   );

package/js/components/SaleTunnel/SubscriptionButton/_styles.scss

@@ -4,4 +4,12 @@
     margin-top: 0.5rem;
     margin-bottom: 0;
   }
+
+  &__waiveCheckbox {
+    & > .waiveCheckbox__input {
+      /* Just add 1 px offset to prevent border input to be hidden
+         due to the overflow hidden applied to the parent block */
+      margin-left: 1px;
+    }
+  }
 }

package/js/components/SaleTunnel/SubscriptionButton/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Alert, Button, VariantType } from '@openfun/cunningham-react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
@@ -50,6 +50,11 @@ const messages = defineMessages({
     description: "Error message shown when the user didn't select a billing address.",
     id: 'components.SubscriptionButton.errorAddress',
   },
+  errorWithdrawalRight: {
+    defaultMessage: 'You must waive your withdrawal right.',
+    description: "Error message shown when the user must waive its withdrawal right but doesn't.",
+    id: 'components.SubscriptionButton.errorWithdrawalRight',
+  },
   orderCreationInProgress: {
     defaultMessage: 'Order creation in progress',
     description: 'Label for screen reader when an order creation is in progress.',
@@ -65,7 +70,10 @@ enum ComponentStates {
 
 interface Props {
   buildOrderPayload: (
-    payload: Pick<OrderCreationPayload, 'product_id' | 'billing_address' | 'order_group_id'>,
+    payload: Pick<
+      OrderCreationPayload,
+      'product_id' | 'billing_address' | 'order_group_id' | 'has_waived_withdrawal_right'
+    >,
   ) => OrderCreationPayload;
 }
 
@@ -74,6 +82,7 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     order,
     creditCard,
     billingAddress,
+    hasWaivedWithdrawalRight,
     product,
     nextStep,
     runSubmitCallbacks,
@@ -107,10 +116,16 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
       return;
     }
 
+    if (!product.is_withdrawable && !hasWaivedWithdrawalRight) {
+      handleError(SubscriptionErrorMessageId.ERROR_WITHDRAWAL_RIGHT);
+      return;
+    }
+
     const payload = buildOrderPayload({
       product_id: product.id,
       billing_address: billingAddress!,
       order_group_id: saleTunnelProps.orderGroup?.id,
+      has_waived_withdrawal_right: hasWaivedWithdrawalRight,
     });
 
     orderMethods.create(payload, {

package/js/components/SaleTunnel/WithdrawRightCheckbox/index.tsx

@@ -0,0 +1,59 @@
+import { Alert, Checkbox, VariantType } from '@openfun/cunningham-react';
+import { useCallback, useEffect, useState } from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl/lib';
+import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
+
+const messages = defineMessages({
+  waiveCheckboxExplanation: {
+    defaultMessage:
+      'This training will start before the end of your withdrawal period. You must waive it to subscribe.',
+    description: 'Text to explain why the user has to waive to its withdrawal right.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.waiverLabel',
+  },
+  waiveCheckboxLabel: {
+    defaultMessage: 'I waive my right of withdrawal',
+    description: 'Label of the checkbox to waive the withdrawal right.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.waiveCheckboxLabel',
+  },
+});
+
+const WithdrawRightCheckbox = () => {
+  const {
+    product,
+    registerSubmitCallback,
+    unregisterSubmitCallback,
+    hasWaivedWithdrawalRight,
+    setHasWaivedWithdrawalRight,
+  } = useSaleTunnelContext();
+  const [hasErrorState, setHasError] = useState(false);
+  const setError = useCallback(async () => {
+    setHasError(!product.is_withdrawable && !hasWaivedWithdrawalRight);
+  }, [hasWaivedWithdrawalRight, product.is_withdrawable]);
+
+  useEffect(() => {
+    registerSubmitCallback('withdrawalRight', setError);
+    return () => {
+      unregisterSubmitCallback('withdrawalRight');
+    };
+  }, [setError]);
+
+  if (product.is_withdrawable) return null;
+  return (
+    <section
+      className="mt-t subscription-button__waiveCheckbox"
+      data-testid="withdraw-right-checkbox"
+    >
+      <Alert type={hasErrorState ? VariantType.ERROR : VariantType.WARNING} className="mb-s">
+        <FormattedMessage {...messages.waiveCheckboxExplanation} />
+      </Alert>
+      <Checkbox
+        className="waiveCheckbox__input"
+        label={<FormattedMessage {...messages.waiveCheckboxLabel} />}
+        checked={hasWaivedWithdrawalRight}
+        onChange={(e) => setHasWaivedWithdrawalRight(e.target.checked)}
+      />
+    </section>
+  );
+};
+
+export default WithdrawRightCheckbox;

package/js/components/SaleTunnel/index.full-process.spec.tsx

@@ -20,6 +20,7 @@ import {
   CreditCardFactory,
   PaymentFactory,
   PaymentInstallmentFactory,
+  ProductFactory,
 } from 'utils/test/factories/joanie';
 import { CourseRun, NOT_CANCELED_ORDER_STATES, OrderState } from 'types/Joanie';
 import { Priority } from 'types';
@@ -97,9 +98,9 @@ describe('SaleTunnel', () => {
      * Initialization.
      */
     const course = PacedCourseFactory().one();
-    const relation = CourseProductRelationFactory({ course }).one();
+    const product = ProductFactory({ is_withdrawable: false }).one();
+    const relation = CourseProductRelationFactory({ course, product }).one();
     const paymentSchedule = PaymentInstallmentFactory().many(2);
-    const { product } = relation;
 
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/`,
@@ -265,6 +266,11 @@ describe('SaleTunnel', () => {
         priceFormatter(product.price_currency, product.price).replace(/(\u202F|\u00a0)/g, ' '),
     );
 
+    /**
+     * Make sure the checkbox to waive withdrawal right is displayed
+     */
+    const $waiveCheckbox = screen.getByLabelText('I waive my right of withdrawal');
+
     /**
      * Subscribe
      */
@@ -282,6 +288,14 @@ describe('SaleTunnel', () => {
     }) as HTMLButtonElement;
     await user.click($button);
 
+    /**
+     * An error should be displayed if the user has not waived its withdrawal right.
+     */
+    screen.getByText('You must waive your withdrawal right.');
+
+    await user.click($waiveCheckbox);
+    await user.click($button);
+
     order.state = OrderState.TO_SAVE_PAYMENT_METHOD;
     order.contract = ContractFactory({ student_signed_on: new Date().toISOString() }).one();
 

package/js/components/SaleTunnel/index.spec.tsx

@@ -453,4 +453,44 @@ describe.each([
 
     screen.getByTestId('walkthrough-banner');
   });
+
+  it('should show a checkbox to waive withdrawal right if the product is not withdrawable', async () => {
+    const product = ProductFactory({ is_withdrawable: false }).one();
+    const schedule = PaymentInstallmentFactory().many(2);
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
+        schedule,
+      );
+
+    render(<Wrapper product={product} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    screen.getByTestId('withdraw-right-checkbox');
+  });
+
+  it('should not show a checkbox to waive withdrawal right if the product is withdrawable', async () => {
+    const product = ProductFactory({ is_withdrawable: true }).one();
+    const schedule = PaymentInstallmentFactory().many(2);
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
+        schedule,
+      );
+
+    render(<Wrapper product={product} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    expect(screen.queryByTestId('withdraw-right-checkbox')).toBeNull();
+  });
 });

package/js/types/Joanie.ts

@@ -149,6 +149,7 @@ export interface Product {
   state: CourseState;
   instructions: Nullable<string>;
   contract_definition?: ContractDefinition;
+  is_withdrawable: boolean;
 }
 
 export interface CredentialProduct extends Product {
@@ -468,6 +469,7 @@ interface AbstractOrderProductCreationPayload {
   product_id: Product['id'];
   order_group_id?: OrderGroup['id'];
   billing_address: Omit<Address, 'id' | 'is_main'>;
+  has_waived_withdrawal_right: boolean;
 }
 
 interface OrderCertificateCreationPayload extends AbstractOrderProductCreationPayload {

package/js/utils/test/factories/joanie.ts

@@ -206,6 +206,7 @@ export const CredentialProductFactory = factory((): CredentialProduct => {
     remaining_order_count: faker.number.int({ min: 1, max: 100 }),
     state: CourseStateFactory().one(),
     instructions: null,
+    is_withdrawable: true,
   };
 });
 
@@ -490,6 +491,8 @@ export const SaleTunnelContextFactory = factory(
     billingAddress: undefined,
     setBillingAddress: noop,
     setCreditCard: noop,
+    setHasWaivedWithdrawalRight: noop,
+    hasWaivedWithdrawalRight: false,
     step: SaleTunnelStep.IDLE,
     registerSubmitCallback: noop,
     unregisterSubmitCallback: noop,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.30.1-dev12",
+  "version": "2.30.1-dev14",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {