richie-education 3.3.2-dev32 → 3.3.2-dev34

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

@@ -143,7 +143,7 @@ const messages = defineMessages({
     id: 'components.SaleTunnel.Information.cpf.description',
     description: 'Explanatory text for the CPF payment option',
     defaultMessage:
-      'Pay for your training using your personal training account (CPF) on Mon Compte Formation.',
+      'Purchase your training course by using your Personal Training Account (CPF) on Mon Compte Formation.',
   },
   cpfButtonLabel: {
     id: 'components.SaleTunnel.Information.cpf.buttonLabel',
@@ -236,7 +236,12 @@ export const SaleTunnelInformationSingular = () => {
         </div>
       )}
       {paymentMode === PaymentMode.CPF ? (
-        <CpfPayment deepLink={deepLink!} />
+        <CpfPayment
+          deepLink={deepLink!}
+          discount={discount}
+          voucherError={voucherError}
+          setVoucherError={setVoucherError}
+        />
       ) : (
         <>
           {needsPayment && (
@@ -499,7 +504,17 @@ const PaymentScheduleBlock = ({ schedule }: { schedule: PaymentSchedule }) => {
   );
 };
 
-const CpfPayment = ({ deepLink }: { deepLink: string }) => {
+const CpfPayment = ({
+  deepLink,
+  discount,
+  voucherError,
+  setVoucherError,
+}: {
+  deepLink: string;
+  discount?: string;
+  voucherError: HttpError | null;
+  setVoucherError: (value: HttpError | null) => void;
+}) => {
   return (
     <div className="sale-tunnel__cpf">
       <p className="description mb-s">
@@ -514,6 +529,7 @@ const CpfPayment = ({ deepLink }: { deepLink: string }) => {
       >
         <FormattedMessage {...messages.cpfButtonLabel} />
       </Button>
+      <Voucher discount={discount} voucherError={voucherError} setVoucherError={setVoucherError} />
     </div>
   );
 };

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

@@ -110,9 +110,6 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     paymentMode,
   } = useSaleTunnelContext();
 
-  if (paymentMode === PaymentMode.CPF) {
-    return null;
-  }
   const { methods: orderMethods } = useOrders(undefined, { enabled: false });
   const { methods: batchOrderMethods } = useBatchOrder();
   const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
@@ -138,12 +135,17 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
       return;
     }
 
-    if (!billingAddress && needsPayment) {
+    if (!billingAddress && needsPayment && paymentMode !== PaymentMode.CPF) {
       handleError(SubscriptionErrorMessageId.ERROR_ADDRESS);
       return;
     }
 
-    if (!saleTunnelProps.isWithdrawable && !hasWaivedWithdrawalRight && needsPayment) {
+    if (
+      !saleTunnelProps.isWithdrawable &&
+      !hasWaivedWithdrawalRight &&
+      needsPayment &&
+      paymentMode !== PaymentMode.CPF
+    ) {
       handleError(SubscriptionErrorMessageId.ERROR_WITHDRAWAL_RIGHT);
       return;
     }

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

@@ -166,7 +166,9 @@ describe('SaleTunnel / Credential', () => {
 
     // - CPF description and redirect button should be visible.
     expect(
-      screen.getByText(/pay for your training using your personal training account/i),
+      screen.getByText(
+        /purchase your training course by using your Personal Training Account \(CPF\) on Mon Compte Formation/i,
+      ),
     ).toBeInTheDocument();
     const cpfButton = screen.getByRole('link', { name: /go to mon compte formation/i });
 
@@ -222,4 +224,51 @@ describe('SaleTunnel / Credential', () => {
     // - Classic billing information section should be displayed.
     expect(screen.getByText(/this information will be used for billing/i)).toBeInTheDocument();
   });
+
+  it('should display voucher input and subscribe button in CPF mode', async () => {
+    const course = PacedCourseFactory().one();
+    const product = CredentialProductFactory().one();
+    const billingAddress: Joanie.Address = AddressFactory({ is_main: true }).one();
+    const deepLink = 'https://placeholder.com/course/1';
+    const orderQueryParameters = {
+      course_code: course.code,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        { deep_link: deepLink },
+      )
+      .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
+        overwriteRoutes: true,
+      });
+
+    const user = userEvent.setup({ delay: null });
+
+    render(<Wrapper product={product} course={course} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    await screen.findByRole('heading', { level: 3, name: /payment method/i });
+
+    // Switch to CPF mode
+    await user.click(screen.getByRole('radio', { name: /my training account \(cpf\)/i }));
+
+    // - Voucher input should be visible in CPF mode.
+    expect(screen.getByLabelText('Voucher code')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Validate' })).toBeInTheDocument();
+
+    // - Subscribe button should be visible in CPF mode.
+    expect(screen.getByRole('button', { name: 'Subscribe' })).toBeInTheDocument();
+  });
 });

package/package.json

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