richie-education 3.2.1-dev10 → 3.2.1-dev11

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

@@ -10,6 +10,7 @@ import useOpenEdxProfile from 'hooks/useOpenEdxProfile';
 import WithdrawRightCheckbox from 'components/SaleTunnel/WithdrawRightCheckbox';
 import { PaymentSchedule, ProductType } from 'types/Joanie';
 import { usePaymentPlan } from 'hooks/usePaymentPlan';
+import { HttpError } from 'utils/errors/HttpError';
 
 const messages = defineMessages({
   title: {
@@ -73,11 +74,16 @@ const messages = defineMessages({
     description: 'Delete text for the voucher',
     defaultMessage: 'Delete this voucher',
   },
-  voucherError: {
-    id: 'components.SaleTunnel.Information.voucher.error',
+  voucherErrorInvalid: {
+    id: 'components.SaleTunnel.Information.voucher.errorInvalid',
     description: 'Error when voucher is invalid',
     defaultMessage: 'The submitted voucher code is not valid.',
   },
+  voucherErrorTooManyRequests: {
+    id: 'components.SaleTunnel.Information.voucher.errorTooManyRequests',
+    description: 'Error when user has tried too many vouchers',
+    defaultMessage: 'Too many attempts. Please try again later.',
+  },
   discount: {
     id: 'components.SaleTunnel.Information.voucher.discount',
     description: 'Discount description',
@@ -87,7 +93,7 @@ const messages = defineMessages({
 
 export const SaleTunnelInformation = () => {
   const { props, product, voucherCode, setVoucherCode } = useSaleTunnelContext();
-  const [voucherError, setVoucherError] = useState(false);
+  const [voucherError, setVoucherError] = useState<HttpError | null>(null);
   const query = usePaymentPlan({
     course_code: props.course?.code ?? props.enrollment!.course_run.course.code,
     product_id: props.product.id,
@@ -106,7 +112,7 @@ export const SaleTunnelInformation = () => {
   useEffect(() => {
     if (query.error && voucherCode) {
       setVoucherCode('');
-      setVoucherError(true);
+      setVoucherError(query.error);
     }
   }, [query.error, voucherCode, setVoucherCode]);
 
@@ -205,15 +211,15 @@ const Voucher = ({
   setVoucherError,
 }: {
   discount?: string;
-  voucherError: boolean;
-  setVoucherError: (value: boolean) => void;
+  voucherError: HttpError | null;
+  setVoucherError: (value: HttpError | null) => 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);
+    setVoucherError(null);
     setVoucherCode(voucher);
     setVoucher('');
   };
@@ -261,7 +267,11 @@ const Voucher = ({
       )}
       {voucherError && (
         <Alert type={VariantType.ERROR} className="mt-s">
-          <FormattedMessage {...messages.voucherError} />
+          {voucherError.code === 429 ? (
+            <FormattedMessage {...messages.voucherErrorTooManyRequests} />
+          ) : (
+            <FormattedMessage {...messages.voucherErrorInvalid} />
+          )}
         </Alert>
       )}
     </div>

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

@@ -690,9 +690,13 @@ describe.each([
     });
   });
 
-  it('should show an error when submit an invalid voucher', async () => {
+  it('should show appropriate error messages for invalid vouchers', async () => {
     const user = userEvent.setup({ delay: null });
     const paymentPlan = PaymentPlanFactory().one();
+    const paymentPlanVoucher = PaymentPlanFactory({
+      discounted_price: 70,
+      discount: '-30%',
+    }).one();
     const product = ProductFactory().one();
     fetchMock
       .get(
@@ -711,6 +715,19 @@ describe.each([
             detail: 'No Voucher matches the given query.',
           },
         },
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT29`,
+        {
+          status: 429,
+          body: {
+            detail: 'Too many attempts. Please try again later.',
+          },
+        },
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT10`,
+        paymentPlanVoucher,
       );
     render(<Wrapper paymentPlan={paymentPlan} product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
@@ -719,5 +736,13 @@ describe.each([
     await user.type(screen.getByLabelText('Voucher code'), 'DISCOUNT30');
     await user.click(screen.getByRole('button', { name: 'Validate' }));
     expect(await screen.findByText('The submitted voucher code is not valid.')).toBeInTheDocument();
+    await user.type(screen.getByLabelText('Voucher code'), 'DISCOUNT29');
+    await user.click(screen.getByRole('button', { name: 'Validate' }));
+    expect(
+      await screen.findByText('Too many attempts. Please try again later.'),
+    ).toBeInTheDocument();
+    await user.type(screen.getByLabelText('Voucher code'), 'DISCOUNT10');
+    await user.click(screen.getByRole('button', { name: 'Validate' }));
+    expect(await screen.findByText('Discount applied')).toBeInTheDocument();
   });
 });

package/js/hooks/usePaymentPlan.tsx

@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import { PaymentPlan } from 'types/Joanie';
 import { Nullable } from 'types/utils';
+import { HttpError } from 'utils/errors/HttpError';
 
 type PaymentPlanFilters = {
   course_code: string;
@@ -13,7 +14,7 @@ export const usePaymentPlan = (filters: PaymentPlanFilters) => {
   const queryKey = ['courses-products', ...Object.values(filters), 'payment-plan'];
 
   const api = useJoanieApi();
-  return useQuery<Nullable<PaymentPlan>, Error>({
+  return useQuery<Nullable<PaymentPlan>, HttpError>({
     queryKey,
     queryFn: () =>
       api.courses.products.paymentPlan.get({

package/js/utils/errors/HttpError.ts

@@ -31,5 +31,6 @@ export enum HttpStatusCode {
   FORBIDDEN = 403,
   NOT_FOUND = 404,
   CONFLICT = 409,
+  TOO_MANY_REQUESTS = 429,
   INTERNAL_SERVER_ERROR = 500,
 }

package/package.json

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