richie 3.2.0__py2.py3-none-any.whl → 3.2.1.dev9__py2.py3-none-any.whl

frontend/js/api/joanie.ts

@@ -16,7 +16,6 @@ import { JOANIE_API_VERSION } from 'settings';
 import { ResourcesQuery } from 'hooks/useResources';
 import { ObjectHelper } from 'utils/ObjectHelper';
 import { Maybe, Nullable } from 'types/utils';
-import { PaymentSchedule } from 'types/Joanie';
 import { checkStatus, getFileFromResponse } from './utils';
 
 /*
@@ -145,8 +144,8 @@ export const getRoutes = () => {
       },
       products: {
         get: `${baseUrl}/courses/:course_id/products/:id/`,
-        paymentSchedule: {
-          get: `${baseUrl}/courses/:course_id/products/:id/payment-schedule/`,
+        paymentPlan: {
+          get: `${baseUrl}/courses/:course_id/products/:id/payment-plan/`,
         },
       },
       orders: {
@@ -430,10 +429,10 @@ const API = (): Joanie.API => {
 
           return fetchWithJWT(buildApiUrl(ROUTES.courses.products.get, filters)).then(checkStatus);
         },
-        paymentSchedule: {
+        paymentPlan: {
           get: async (
             filters?: Joanie.CourseProductQueryFilters,
-          ): Promise<Nullable<PaymentSchedule>> => {
+          ): Promise<Nullable<Joanie.PaymentPlan>> => {
             if (!filters) {
               throw new Error(
                 'A course code and a product id are required to fetch a course product',
@@ -444,9 +443,9 @@ const API = (): Joanie.API => {
               throw new Error('A product id is required to fetch a course product');
             }
 
-            return fetchWithJWT(
-              buildApiUrl(ROUTES.courses.products.paymentSchedule.get, filters),
-            ).then(checkStatus);
+            return fetchWithJWT(buildApiUrl(ROUTES.courses.products.paymentPlan.get, filters)).then(
+              checkStatus,
+            );
           },
         },
       },

frontend/js/components/PurchaseButton/index.spec.tsx

@@ -113,7 +113,7 @@ describe('PurchaseButton', () => {
     fetchMock
       .get(url, {})
       .get(
-        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-plan/`,
         [],
       );
 
@@ -157,7 +157,7 @@ describe('PurchaseButton', () => {
     fetchMock
       .get(url, {})
       .get(
-        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-plan/`,
         [],
       );
     render(
@@ -199,7 +199,7 @@ describe('PurchaseButton', () => {
     fetchMock
       .get(url, {})
       .get(
-        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-plan/`,
         [],
       );
     delete product.remaining_order_count;

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

@@ -49,6 +49,7 @@ describe('AddressSelector', () => {
 
     const Wrapper = () => {
       const [billingAddress, setBillingAddress] = useState<Address>();
+      const [voucherCode, setVoucherCode] = useState<string>();
       const context: SaleTunnelContextType = useMemo(
         () => ({
           webAnalyticsEventKey: 'eventKey',
@@ -65,8 +66,9 @@ describe('AddressSelector', () => {
           nextStep: jest.fn(),
           hasWaivedWithdrawalRight: false,
           setHasWaivedWithdrawalRight: jest.fn(),
+          setVoucherCode,
         }),
-        [billingAddress],
+        [billingAddress, voucherCode],
       );
       contextRef.current = context;
 

frontend/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -51,6 +51,8 @@ export interface SaleTunnelContextType {
   unregisterSubmitCallback: (key: string) => void;
   runSubmitCallbacks: () => Promise<void>;
   nextStep: () => void;
+  voucherCode?: string;
+  setVoucherCode: (code?: string) => void;
 }
 
 export const SaleTunnelContext = createContext<SaleTunnelContextType>({} as any);
@@ -93,6 +95,7 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
   const [submitCallbacks, setSubmitCallbacks] = useState<Map<string, () => Promise<void>>>(
     new Map(),
   );
+  const [voucherCode, setVoucherCode] = useState<string>();
 
   const nextStep = useCallback(() => {
     if (order)
@@ -102,6 +105,8 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
             setStep(SaleTunnelStep.SIGN);
           } else if (order.state === OrderState.TO_SAVE_PAYMENT_METHOD) {
             setStep(SaleTunnelStep.SAVE_PAYMENT);
+          } else if (order.state === OrderState.COMPLETED) {
+            setStep(SaleTunnelStep.SUCCESS);
           }
           break;
         case SaleTunnelStep.SIGN:
@@ -147,8 +152,19 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       runSubmitCallbacks: async () => {
         await Promise.all(Array.from(submitCallbacks.values()).map((cb) => cb()));
       },
+      voucherCode,
+      setVoucherCode,
     }),
-    [props, order, billingAddress, creditCard, step, submitCallbacks, hasWaivedWithdrawalRight],
+    [
+      props,
+      order,
+      billingAddress,
+      creditCard,
+      step,
+      submitCallbacks,
+      hasWaivedWithdrawalRight,
+      voucherCode,
+    ],
   );
 
   return (

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

@@ -1,14 +1,15 @@
-import { defineMessages, FormattedMessage, FormattedNumber } from 'react-intl';
+import { ChangeEvent, useEffect, useState } from 'react';
+import { defineMessages, FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
+import { Alert, Button, Input, VariantType } from '@openfun/cunningham-react';
 import { AddressSelector } from 'components/SaleTunnel/AddressSelector';
 import { PaymentScheduleGrid } from 'components/PaymentScheduleGrid';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 import OpenEdxFullNameForm from 'components/OpenEdxFullNameForm';
 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';
-import { ProductType } from 'types/Joanie';
+import { PaymentSchedule, ProductType } from 'types/Joanie';
+import { usePaymentPlan } from 'hooks/usePaymentPlan';
 
 const messages = defineMessages({
   title: {
@@ -52,10 +53,63 @@ const messages = defineMessages({
     defaultMessage:
       'This email will be used to send you confirmation mails, it is the one you created your account with.',
   },
+  voucherTitle: {
+    id: 'components.SaleTunnel.Information.voucher.title',
+    description: 'Title for the voucher',
+    defaultMessage: 'Voucher code',
+  },
+  voucherInfo: {
+    id: 'components.SaleTunnel.Information.voucher.info',
+    description: 'Info for the voucher',
+    defaultMessage: 'If you have a voucher code, please enter it in the field below.',
+  },
+  voucherValidate: {
+    id: 'components.SaleTunnel.Information.voucher.validate',
+    description: 'Validate text for the voucher',
+    defaultMessage: 'Validate',
+  },
+  voucherDelete: {
+    id: 'components.SaleTunnel.Information.voucher.delete',
+    description: 'Delete text for the voucher',
+    defaultMessage: 'Delete this voucher',
+  },
+  voucherError: {
+    id: 'components.SaleTunnel.Information.voucher.error',
+    description: 'Error when voucher is invalid',
+    defaultMessage: 'The submitted voucher code is not valid.',
+  },
+  discount: {
+    id: 'components.SaleTunnel.Information.voucher.discount',
+    description: 'Discount description',
+    defaultMessage: 'Discount applied',
+  },
 });
 
 export const SaleTunnelInformation = () => {
-  const { product } = useSaleTunnelContext();
+  const { props, product, voucherCode, setVoucherCode } = useSaleTunnelContext();
+  const [voucherError, setVoucherError] = useState(false);
+  const query = usePaymentPlan({
+    course_code: props.course?.code ?? props.enrollment!.course_run.course.code,
+    product_id: props.product.id,
+    ...(voucherCode ? { voucher_code: voucherCode } : {}),
+  });
+  const schedule = query.data?.payment_schedule ?? props.paymentPlan?.payment_schedule;
+  const price = query.data?.price ?? props.paymentPlan?.price;
+  const discountedPrice = query.data?.discounted_price ?? props.paymentPlan?.discounted_price;
+  const discount = query.data?.discount ?? props.paymentPlan?.discount;
+
+  const showPaymentSchedule =
+    product.type === ProductType.CREDENTIAL &&
+    schedule &&
+    (discountedPrice != null ? discountedPrice > 0 : price != null && price > 0);
+
+  useEffect(() => {
+    if (query.error && voucherCode) {
+      setVoucherCode('');
+      setVoucherError(true);
+    }
+  }, [query.error, voucherCode, setVoucherCode]);
+
   return (
     <div className="sale-tunnel__main__column sale-tunnel__information">
       <div>
@@ -72,13 +126,19 @@ export const SaleTunnelInformation = () => {
         </div>
       </div>
       <div>
-        {product.type === ProductType.CREDENTIAL && <PaymentScheduleBlock />}
-        <Total />
+        {showPaymentSchedule && <PaymentScheduleBlock schedule={schedule} />}
+        <Voucher
+          discount={discount}
+          voucherError={voucherError}
+          setVoucherError={setVoucherError}
+        />
+        <Total price={price} discountedPrice={discountedPrice} />
         <WithdrawRightCheckbox />
       </div>
     </div>
   );
 };
+
 const Email = () => {
   const { user } = useSession();
   const { data: openEdxProfileData } = useOpenEdxProfile({
@@ -100,44 +160,122 @@ const Email = () => {
   );
 };
 
-const Total = () => {
-  const { product, offering, enrollment } = useSaleTunnelContext();
-  const totalPrice =
-    enrollment?.offerings?.[0]?.rules?.discounted_price ??
-    offering?.rules.discounted_price ??
-    product.price;
+const Total = ({ price, discountedPrice }: { price?: number; discountedPrice?: number }) => {
+  const { product } = useSaleTunnelContext();
+  const totalPrice = price || product.price;
   return (
     <div className="sale-tunnel__total">
       <div className="sale-tunnel__total__amount mt-t" data-testid="sale-tunnel__total__amount">
         <div className="block-title">
           <FormattedMessage {...messages.totalLabel} />
         </div>
+
         <div className="block-title">
-          <FormattedNumber value={totalPrice} style="currency" currency={product.price_currency} />
+          {discountedPrice !== undefined ? (
+            <>
+              <span className="price--striked">
+                <FormattedNumber
+                  value={totalPrice}
+                  style="currency"
+                  currency={product.price_currency}
+                />
+              </span>
+              <FormattedNumber
+                value={discountedPrice}
+                style="currency"
+                currency={product.price_currency}
+              />
+            </>
+          ) : (
+            <FormattedNumber
+              value={totalPrice}
+              style="currency"
+              currency={product.price_currency}
+            />
+          )}
         </div>
       </div>
     </div>
   );
 };
 
-const PaymentScheduleBlock = () => {
-  const { props } = useSaleTunnelContext();
-  const query = usePaymentSchedule({
-    course_code: props.course?.code || props.enrollment!.course_run.course.code,
-    product_id: props.product.id,
-  });
+const Voucher = ({
+  discount,
+  voucherError,
+  setVoucherError,
+}: {
+  discount?: string;
+  voucherError: boolean;
+  setVoucherError: (value: boolean) => void;
+}) => {
+  const intl = useIntl();
+  const { voucherCode, setVoucherCode } = useSaleTunnelContext();
+  const [voucher, setVoucher] = useState('');
+  const handleVoucher = (e: ChangeEvent<HTMLInputElement>) => setVoucher(e.target.value);
+  const submitVoucher = () => {
+    setVoucherError(false);
+    setVoucherCode(voucher);
+    setVoucher('');
+  };
 
-  if (!query.data || query.isLoading) {
-    return <Spinner size="large" />;
-  }
+  return (
+    <div className="sale-tunnel__voucher">
+      <div className="description">
+        <h4 className="block-title mb-t">
+          <FormattedMessage {...messages.voucherTitle} />
+        </h4>
+        <span className="mb-t">
+          <FormattedMessage {...messages.voucherInfo} />
+        </span>
+      </div>
+      <div className="form">
+        <Input
+          className="form-field mt-s"
+          value={voucher}
+          onChange={handleVoucher}
+          label={intl.formatMessage(messages.voucherTitle)}
+          disabled={!!voucherCode}
+        />
+        <Button size="small" color="primary" onClick={submitVoucher} disabled={!!voucherCode}>
+          <FormattedMessage {...messages.voucherValidate} />
+        </Button>
+      </div>
+      {voucherCode && (
+        <div className="voucher-tag">
+          <span>{voucherCode}</span>
+          <button
+            onClick={() => setVoucherCode('')}
+            title={intl.formatMessage(messages.voucherDelete)}
+          >
+            <span className="material-icons">close</span>
+          </button>
+        </div>
+      )}
+      {discount && (
+        <div className="voucher-discount">
+          <span>
+            <FormattedMessage {...messages.discount} />
+          </span>
+          <span>{discount}</span>
+        </div>
+      )}
+      {voucherError && (
+        <Alert type={VariantType.ERROR} className="mt-s">
+          <FormattedMessage {...messages.voucherError} />
+        </Alert>
+      )}
+    </div>
+  );
+};
 
+const PaymentScheduleBlock = ({ schedule }: { schedule: PaymentSchedule }) => {
   return (
     <div className="payment-schedule">
       <h4 className="block-title mb-t">
         <FormattedMessage {...messages.paymentSchedule} />
       </h4>
       <div className="mt-t">
-        <PaymentScheduleGrid schedule={query.data} />
+        <PaymentScheduleGrid schedule={schedule} />
       </div>
     </div>
   );

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

@@ -18,7 +18,7 @@ const messages = defineMessages({
   walkthroughToSignAndSavePayment: {
     id: 'components.SaleTunnel.SubscriptionButton.walkthroughToSignAndSavePayment',
     defaultMessage:
-      'To enroll in the training, you will first be invited to sign the training agreement and then to define a payment method.',
+      'To enroll in the training, you will first be invited to sign the training agreement and then to define a payment method if required.',
     description:
       'Message explaining the subscription process with a training agreement to sign and a payment method to set.',
   },
@@ -72,7 +72,7 @@ interface Props {
   buildOrderPayload: (
     payload: Pick<
       OrderCreationPayload,
-      'product_id' | 'billing_address' | 'has_waived_withdrawal_right'
+      'product_id' | 'billing_address' | 'has_waived_withdrawal_right' | 'voucher_code'
     >,
   ) => OrderCreationPayload;
 }
@@ -87,6 +87,7 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     nextStep,
     runSubmitCallbacks,
     props: saleTunnelProps,
+    voucherCode,
   } = useSaleTunnelContext();
   const { methods: orderMethods } = useOrders(undefined, { enabled: false });
   const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
@@ -125,6 +126,7 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
       product_id: product.id,
       billing_address: billingAddress!,
       has_waived_withdrawal_right: hasWaivedWithdrawalRight,
+      voucher_code: voucherCode,
     });
 
     orderMethods.create(payload, {

frontend/js/components/SaleTunnel/_styles.scss

@@ -82,6 +82,54 @@
       font-size: 0.75rem;
     }
   }
+  .price--striked {
+    text-decoration: line-through;
+    opacity: 0.5;
+    margin-right: 0.5rem;
+  }
+  .sale-tunnel__voucher {
+    margin-top: 1rem;
+    & > .form {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-top: 0.75rem;
+      & > .mt-s {
+        margin-top: 0;
+      }
+      & > button {
+        margin-left: 0.5rem;
+      }
+    }
+    & > .voucher-tag {
+      margin-top: 0.5rem;
+      border-radius: 0.25rem;
+      padding: 0.5rem;
+      width: fit-content;
+      color: black;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border: none;
+      background-color: lightgray;
+      &:hover {
+        background-color: gray;
+      }
+      & > button {
+        background: none;
+        border: none;
+        display: flex;
+        align-items: center;
+      }
+    }
+    & > .voucher-discount {
+      margin-top: 1rem;
+      display: flex;
+      justify-content: space-between;
+      font-size: var(--c--theme--font--sizes--l);
+    }
+  }
 }
 
 .description {

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

@@ -93,7 +93,7 @@ describe('SaleTunnel / Credential', () => {
     fetchMock
       .get(url, [])
       .get(
-        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         [],
       )
       .post('https://joanie.endpoint/api/v1.0/orders/', order)

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

@@ -19,8 +19,8 @@ import {
   CredentialOrderFactory,
   CreditCardFactory,
   PaymentFactory,
-  PaymentInstallmentFactory,
   ProductFactory,
+  PaymentPlanFactory,
 } from 'utils/test/factories/joanie';
 import { CourseRun, NOT_CANCELED_ORDER_STATES, OrderState } from 'types/Joanie';
 import { Priority } from 'types';
@@ -70,7 +70,9 @@ describe('SaleTunnel', () => {
     new Intl.NumberFormat('en', {
       currency,
       style: 'currency',
-    }).format(price);
+    })
+      .format(price)
+      .replace(/(\u202F|\u00a0)/g, ' ');
 
   beforeEach(() => {
     richieUser = UserFactory().one();
@@ -104,15 +106,15 @@ describe('SaleTunnel', () => {
       product,
       is_withdrawable: false,
     }).one();
-    const paymentSchedule = PaymentInstallmentFactory().many(2);
+    const paymentPlan = PaymentPlanFactory().one();
 
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/`,
       offering,
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
-      paymentSchedule,
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+      paymentPlan,
     );
     fetchMock.get(`https://joanie.endpoint/api/v1.0/enrollments/`, []);
     const orderQueryParameters = {
@@ -135,7 +137,7 @@ describe('SaleTunnel', () => {
     screen.getByText(
       // the price formatter generates non-breaking spaces and getByText doesn't seem to handle that well, replace it
       // with a regular space. We replace NNBSP (\u202F) and NBSP (\u00a0) with a regular space
-      priceFormatter(product.price_currency, product.price).replace(/(\u202F|\u00a0)/g, ' '),
+      priceFormatter(product.price_currency, product.price),
     );
     expect(screen.queryByText('Purchased')).not.toBeInTheDocument();
 
@@ -250,14 +252,12 @@ describe('SaleTunnel', () => {
      * Make sure the payment schedule is displayed.
      */
     screen.getByRole('heading', { name: 'Payment schedule' });
-    paymentSchedule.forEach((installment, index) => {
+    paymentPlan.payment_schedule.forEach((installment, index) => {
       const row = screen.getByTestId(installment.id);
       const cells = getAllByRole(row, 'cell');
       expect(cells).toHaveLength(4);
       expect(cells[0]).toHaveTextContent((index + 1).toString());
-      expect(cells[1]).toHaveTextContent(
-        priceFormatter(installment.currency, installment.amount).replace(/(\u202F|\u00a0)/g, ' '),
-      );
+      expect(cells[1]).toHaveTextContent(priceFormatter(installment.currency, installment.amount));
       expect(cells[2]).toHaveTextContent(
         `Withdrawn on ${dateFormatter.format(new Date(installment.due_date))}`,
       );
@@ -266,8 +266,30 @@ describe('SaleTunnel', () => {
 
     const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
     expect($totalAmount).toHaveTextContent(
+      'Total' + priceFormatter(product.price_currency, paymentPlan.price),
+    );
+
+    /**
+     * Submit voucher and check price
+     */
+    const paymentPlanVoucher = PaymentPlanFactory({
+      discounted_price: 70,
+      discount: '-30%',
+    }).one();
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT30`,
+      paymentPlanVoucher,
+      { overwriteRoutes: true },
+    );
+    await user.type(screen.getByLabelText('Voucher code'), 'DISCOUNT30');
+    await user.click(screen.getByRole('button', { name: 'Validate' }));
+    screen.getByRole('heading', { name: 'Payment schedule' });
+    await screen.findByTestId('sale-tunnel__total__amount');
+    const $totalAmountVoucher = screen.getByTestId('sale-tunnel__total__amount');
+    expect($totalAmountVoucher).toHaveTextContent(
       'Total' +
-        priceFormatter(product.price_currency, product.price).replace(/(\u202F|\u00a0)/g, ' '),
+        priceFormatter(product.price_currency, paymentPlanVoucher.price!) +
+        priceFormatter(product.price_currency, paymentPlanVoucher.discounted_price!),
     );
 
     /**