richie-education 3.2.1-dev9 → 3.2.2-dev26

package/js/utils/AbilitiesHelper/types.ts

@@ -1,5 +1,5 @@
 import { JoanieUserProfile } from 'types/User';
-import { Contract } from 'types/Joanie';
+import { Agreement, Contract } from 'types/Joanie';
 
 export enum JoanieUserProfileActions {
   ACCESS_TEACHER_DASHBOARD = 'access_teacher_dashboard',
@@ -9,6 +9,10 @@ export enum ContractActions {
   SIGN = 'sign',
 }
 
+export enum AgreementActions {
+  SIGN = 'sign',
+}
+
 const JOANIE_PROFILE_KEYS = [
   'abilities',
   'full_name',
@@ -30,7 +34,12 @@ export const isContractEntity = (entity: Entity): entity is Contract => {
   return CONTRACT_KEYS.every((key) => entity.hasOwnProperty(key));
 };
 
+export function isAgreementEntity(entity: any): entity is Agreement {
+  const AGREEMENT_KEYS = ['batch_order', 'abilities', 'id'];
+  return AGREEMENT_KEYS.every((key) => entity.hasOwnProperty(key));
+}
+
 // further entities and entity actions can be added here
 // like Entity = JoanieUserProfileEntity | CourseEntity
-export type Entity = JoanieUserProfile | Contract;
-export type Actions = JoanieUserProfileActions | ContractActions;
+export type Entity = JoanieUserProfile | Contract | Agreement;
+export type Actions = JoanieUserProfileActions | ContractActions | AgreementActions;

package/js/utils/ObjectHelper/index.ts

@@ -11,4 +11,24 @@ export class ObjectHelper {
     keys.forEach((key) => delete cleanedObject[key]);
     return cleanedObject;
   }
+
+  static removeEmptyFields<T>(obj: T): T | undefined {
+    if (Array.isArray(obj)) {
+      const arr = obj.map((v) => this.removeEmptyFields(v)).filter((v) => v !== undefined);
+      return arr.length > 0 ? (arr as unknown as T) : undefined;
+    }
+    if (obj && typeof obj === 'object') {
+      const cleanedEntries = Object.entries(obj)
+        .map(([k, v]) => [k, this.removeEmptyFields(v)])
+        .filter(([, v]) => {
+          if (v === undefined || v === null) return false;
+          if (typeof v === 'string' && v.trim() === '') return false;
+          if (Array.isArray(v) && v.length === 0) return false;
+          if (typeof v === 'object' && Object.keys(v).length === 0) return false;
+          return true;
+        });
+      return cleanedEntries.length > 0 ? (Object.fromEntries(cleanedEntries) as T) : undefined;
+    }
+    return obj;
+  }
 }

package/js/utils/OrderHelper/index.ts

@@ -104,4 +104,14 @@ export class OrderHelper {
     if (!order) return true;
     return PURCHASABLE_ORDER_STATES.includes(order.state);
   }
+
+  static isFreeWithVoucher(order?: Order) {
+    if (!order) return false;
+    return order.total === 0;
+  }
+
+  static isFreeFromBatchOrder(order?: Order) {
+    if (!order) return false;
+    return order.from_batch_order === true;
+  }
 }

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/js/utils/test/factories/joanie.ts

@@ -38,8 +38,16 @@ import {
   TargetCourse,
   UserLight,
   PaymentPlan,
+  OfferingBatchOrder,
+  BatchOrderRead,
+  BatchOrder,
+  BatchOrderState,
+  OrganizationQuote,
+  BatchOrderQuote,
+  Relation,
+  Agreement,
 } from 'types/Joanie';
-import { Payment, PaymentProviders } from 'components/PaymentInterfaces/types';
+import { Payment, PaymentMethod, PaymentProviders } from 'components/PaymentInterfaces/types';
 import { CourseStateFactory } from 'utils/test/factories/richie';
 import { FactoryHelper } from 'utils/test/factories/helper';
 import { JoanieUserApiAbilityActions, JoanieUserProfile } from 'types/User';
@@ -166,6 +174,51 @@ export const OrganizationFactory = factory((): Organization => {
   };
 });
 
+export const RelationFactory = factory((): Relation => {
+  return {
+    id: faker.string.uuid(),
+    product: {
+      id: faker.string.uuid(),
+      title: faker.commerce.productName(),
+    },
+    course: {
+      id: faker.string.uuid(),
+      title: faker.lorem.words({ min: 2, max: 5 }),
+    },
+  };
+});
+
+export const BatchOrderQuoteFactory = factory((): BatchOrderQuote => {
+  return {
+    id: faker.string.uuid(),
+    owner_name: faker.person.firstName(),
+    organization_id: faker.string.uuid(),
+    state: faker.helpers.arrayElement(Object.values(BatchOrderState)),
+    company_name: faker.company.name(),
+    relation: RelationFactory().one(),
+    payment_method: faker.helpers.arrayElement(Object.values(PaymentMethod)),
+    contract_submitted: faker.datatype.boolean(),
+    nb_seats: faker.number.int({ min: 1, max: 100 }),
+    available_actions: {
+      confirm_quote: false,
+      confirm_purchase_order: false,
+      confirm_bank_transfer: false,
+      submit_for_signature: false,
+      next_action: null,
+    },
+  };
+});
+
+export const OrganizationQuoteFactory = factory((): OrganizationQuote => {
+  return {
+    id: faker.string.uuid(),
+    organization_signed_on: faker.date.past().toISOString(),
+    has_purchase_order: faker.datatype.boolean(),
+    batch_order: BatchOrderQuoteFactory().one(),
+    total: faker.number.float({ min: 1, max: 100 }),
+  };
+});
+
 export const OrganizationLightFactory = factory((): OrganizationLight => {
   return {
     code: faker.string.alphanumeric(5),
@@ -173,6 +226,17 @@ export const OrganizationLightFactory = factory((): OrganizationLight => {
   };
 });
 
+export const AgreementFactory = factory((): Agreement => {
+  return {
+    id: faker.string.uuid(),
+    batch_order: BatchOrderQuoteFactory().one(),
+    abilities: {
+      sign: faker.datatype.boolean(),
+    },
+    organization_signed_on: faker.date.past().toISOString(),
+  };
+});
+
 export const CertificationDefinitionFactory = factory((): CertificateDefinition => {
   return {
     id: faker.string.uuid(),
@@ -336,6 +400,16 @@ export const OfferingFactory = factory((): Offering => {
   };
 });
 
+export const OfferingBatchOrderFactory = factory((): OfferingBatchOrder => {
+  return {
+    product: {
+      id: faker.string.uuid(),
+      title: faker.string.alphanumeric(5),
+    },
+    course: CourseListItemFactory().one(),
+  };
+});
+
 export const CourseListItemFactory = factory((): CourseListItem => {
   return {
     id: faker.string.uuid(),
@@ -367,6 +441,7 @@ export const PaymentPlanFactory = factory((): PaymentPlan => {
     price: faker.number.int({ min: 1, max: 1000, multipleOf: 10 }),
     discount: undefined,
     discounted_price: undefined,
+    from_batch_order: false,
   };
 });
 
@@ -391,6 +466,78 @@ export const OrderLiteFactory = factory((): OrderLite => {
   };
 });
 
+export const BatchOrderFactory = factory((): BatchOrder => {
+  return {
+    id: faker.string.uuid(),
+    offering_id: faker.string.uuid(),
+    company_name: faker.company.name(),
+    identification_number: faker.string.alphanumeric(14),
+    vat_registration: faker.string.alphanumeric(11),
+    address: faker.location.streetAddress(),
+    postcode: faker.location.zipCode(),
+    city: faker.location.city(),
+    country: faker.location.countryCode(),
+    administrative_lastname: faker.person.lastName(),
+    administrative_firstname: faker.person.firstName(),
+    administrative_profession: faker.person.jobTitle(),
+    administrative_email: faker.internet.email(),
+    administrative_telephone: faker.phone.number(),
+    signatory_lastname: faker.person.lastName(),
+    signatory_firstname: faker.person.firstName(),
+    signatory_profession: faker.person.jobTitle(),
+    signatory_email: faker.internet.email(),
+    signatory_telephone: faker.phone.number(),
+    nb_seats: faker.number.int({ min: 1, max: 200 }),
+    payment_method: faker.helpers.arrayElement([
+      PaymentMethod.CARD_PAYMENT,
+      PaymentMethod.BANK_TRANSFER,
+      PaymentMethod.PURCHASE_ORDER,
+    ]),
+    funding_entity: faker.company.name(),
+    funding_amount: faker.number.int({ min: 100, max: 10000 }),
+    organization_id: faker.string.uuid(),
+  };
+});
+
+export const BatchOrderReadFactory = factory((): BatchOrderRead => {
+  return {
+    id: faker.string.uuid(),
+    owner: faker.internet.email(),
+    total: faker.number.int({ min: 100, max: 5000 }),
+    currency: faker.finance.currencyCode(),
+    organization: OrganizationFactory().one(),
+    main_invoice_reference: faker.string.alphanumeric(10),
+    contract_id: faker.string.alphanumeric(12),
+    company_name: faker.company.name(),
+    identification_number: faker.string.alphanumeric(14),
+    vat_registration: faker.string.alphanumeric(11),
+    address: faker.location.streetAddress(),
+    postcode: faker.location.zipCode(),
+    city: faker.location.city(),
+    country: faker.location.countryCode(),
+    nb_seats: faker.number.int({ min: 1, max: 200 }),
+    payment_method: faker.helpers.arrayElement([
+      PaymentMethod.CARD_PAYMENT,
+      PaymentMethod.BANK_TRANSFER,
+      PaymentMethod.PURCHASE_ORDER,
+    ]),
+    state: faker.helpers.arrayElement([BatchOrderState.PENDING, BatchOrderState.COMPLETED]),
+    administrative_lastname: faker.person.lastName(),
+    administrative_firstname: faker.person.firstName(),
+    administrative_profession: faker.person.jobTitle(),
+    administrative_email: faker.internet.email(),
+    administrative_telephone: faker.phone.number(),
+    signatory_lastname: faker.person.lastName(),
+    signatory_firstname: faker.person.firstName(),
+    signatory_profession: faker.person.jobTitle(),
+    signatory_email: faker.internet.email(),
+    signatory_telephone: faker.phone.number(),
+    funding_entity: faker.company.name(),
+    funding_amount: faker.number.int({ min: 100, max: 10000 }),
+    offering: OfferingBatchOrderFactory().one(),
+  };
+});
+
 export const NestedCertificateOrderFactory = factory((): NestedCertificateOrder => {
   return {
     id: faker.string.uuid(),
@@ -494,6 +641,11 @@ export const SaleTunnelContextFactory = factory(
     props: {} as SaleTunnelProps,
     billingAddress: undefined,
     setBillingAddress: noop,
+    batchOrder: undefined,
+    setBatchOrder: noop,
+    batchOrderFormMethods: undefined,
+    setBatchOrderFormMethods: noop,
+    validateBatchOrder: noop,
     setCreditCard: noop,
     setHasWaivedWithdrawalRight: noop,
     hasWaivedWithdrawalRight: false,
@@ -503,5 +655,8 @@ export const SaleTunnelContextFactory = factory(
     runSubmitCallbacks: () => new Promise((resolve) => resolve()),
     nextStep: noop,
     setVoucherCode: noop,
+    setSchedule: noop,
+    needsPayment: true,
+    setNeedsPayment: noop,
   }),
 );

package/js/widgets/Dashboard/components/DashboardBatchOrderLoader/_styles.scss

@@ -0,0 +1,14 @@
+.dashboard-order-loader__banners {
+  .banner {
+    margin-top: 0;
+
+    a {
+      color: white;
+      text-decoration: underline;
+
+      &:hover {
+        color: white;
+      }
+    }
+  }
+}

package/js/widgets/Dashboard/components/DashboardBatchOrderLoader/index.tsx

@@ -0,0 +1,32 @@
+import { useParams } from 'react-router';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { Spinner } from 'components/Spinner';
+import { useBatchOrder } from 'hooks/useBatchOrder';
+import { DashboardItemBatchOrder } from '../DashboardItem/BatchOrder';
+
+const messages = defineMessages({
+  loading: {
+    defaultMessage: 'Loading order ...',
+    description: 'Message displayed while loading an order',
+    id: 'components.DashboardOrderLoader.loading',
+  },
+});
+
+export const DashboardBatchOrderLoader = () => {
+  const params = useParams<{ batchOrderId: string }>();
+  const { item: batchOrder, states } = useBatchOrder(params.batchOrderId);
+  const fetching = states.isPending;
+
+  return (
+    <>
+      {fetching && !batchOrder && (
+        <Spinner aria-labelledby="loading-courses-data">
+          <span id="loading-courses-data">
+            <FormattedMessage {...messages.loading} />
+          </span>
+        </Spinner>
+      )}
+      {batchOrder && <DashboardItemBatchOrder batchOrder={batchOrder} showDetails />}
+    </>
+  );
+};

package/js/widgets/Dashboard/components/DashboardCard/index.spec.tsx

@@ -17,4 +17,22 @@ describe('<DashboardCard/>', () => {
     fireEvent.click(screen.getByTestId('dashboard-card__header__toggle'));
     expect(screen.getByTestId('dashboard-card__wrapper').style.height).toBe('0px');
   });
+
+  it('is not expanded', async () => {
+    render(
+      <DashboardCard
+        defaultExpanded={false}
+        header="My header"
+        footer={<Button color="primary">Update</Button>}
+      >
+        Content here
+      </DashboardCard>,
+    );
+
+    expect(screen.getByTestId('dashboard-card__wrapper').style.height).toBe('0px');
+    const card = screen.getByText('My header').closest('.dashboard-card');
+    expect(card).toHaveClass('dashboard-card--closed');
+    fireEvent.click(screen.getByTestId('dashboard-card__header__toggle'));
+    expect(card).toHaveClass('dashboard-card--opened');
+  });
 });

package/js/widgets/Dashboard/components/DashboardCard/index.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@openfun/cunningham-react';
-import Input from 'components/Form/Input';
 import { DashboardBox } from '../DashboardBox';
 import { DashboardCard } from './index';
 
@@ -18,7 +17,15 @@ type Story = StoryObj<typeof DashboardCard>;
 export const Default: Story = {
   args: {
     header: 'Billing Addresses',
-    children: <Input name="default" label="Country" />,
+    children: (
+      <div>
+        <div>
+          <div>Home</div>
+          <strong>Pierre Léger</strong>
+          <p>21 rue du pavillon - 78130 Chapter ( France )</p>
+        </div>
+      </div>
+    ),
     footer: <Button color="primary">Update</Button>,
   },
 };
@@ -47,3 +54,19 @@ export const WithBoxes: Story = {
     ),
   },
 };
+
+export const NotExpanded: Story = {
+  args: {
+    header: 'Not expanded',
+    defaultExpanded: false,
+    children: (
+      <div>
+        <div>
+          <div>Home</div>
+          <strong>Pierre Léger</strong>
+          <p>21 rue du pavillon - 78130 Chapter ( France )</p>
+        </div>
+      </div>
+    ),
+  },
+};

package/js/widgets/Dashboard/components/DashboardCard/index.tsx

@@ -9,6 +9,7 @@ interface Props {
   expandable?: boolean;
   fullWidth?: boolean;
   className?: string;
+  defaultExpanded?: boolean;
 }
 
 export const DashboardCard = ({
@@ -18,10 +19,11 @@ export const DashboardCard = ({
   className,
   expandable = true,
   fullWidth = false,
+  defaultExpanded = true,
 }: PropsWithChildren<Props>) => {
-  const [opened, setOpened] = useState(true);
+  const [opened, setOpened] = useState(defaultExpanded);
   const expandableRef = useRef<HTMLDivElement>(null);
-  const [wrapperHeight, setWrapperHeight] = useState('auto');
+  const [wrapperHeight, setWrapperHeight] = useState(defaultExpanded ? 'auto' : '0');
 
   const toggle = () => {
     if (opened) {

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/BatchOrderPaymentModal/BatchOrderPaymentManager.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect } from 'react';
+import { Button, useModal } from '@openfun/cunningham-react';
+import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
+import { useBatchOrder } from 'hooks/useBatchOrder';
+import { BatchOrderRead, BatchOrderState } from 'types/Joanie';
+import { DashboardSubItem } from 'widgets/Dashboard/components/DashboardItem/DashboardSubItem';
+import { DashboardSubItemsList } from '../../DashboardSubItemsList';
+import { BatchOrderPaymentModal } from '.';
+
+const messages = defineMessages({
+  batchOrderPayment: {
+    id: 'components.ProductCertificateFooter.batchOrderPayment',
+    description: 'Label before the payment button',
+    defaultMessage: 'We are waiting for your payment to finalize the batch order.',
+  },
+  paymentProcessing: {
+    id: 'components.ProductCertificateFooter.paymentProcessing',
+    description: 'Button label for the payment is processing message',
+    defaultMessage: 'Payment processing...',
+  },
+  paymentNeededButton: {
+    id: 'components.ProductCertificateFooter.paymentNeededButton',
+    description: 'Button label for the payment needed message',
+    defaultMessage: 'Pay {amount}',
+  },
+  paymentSectionTitle: {
+    id: 'batchOrder.payment.sectionTitle',
+    description: 'Title for the payment section in dashboard',
+    defaultMessage: 'Payment required',
+  },
+});
+
+interface BatchPaymentManagerProps {
+  batchOrder: BatchOrderRead;
+}
+
+export const BatchOrderPaymentManager = ({ batchOrder }: BatchPaymentManagerProps) => {
+  const intl = useIntl();
+  const retryModal = useModal();
+  const batchOrderQuery = useBatchOrder(batchOrder.id);
+  const processingPayment = batchOrder.state === BatchOrderState.PROCESS_PAYMENT;
+
+  useEffect(() => {
+    if (batchOrderQuery.item) {
+      batchOrderQuery.methods.invalidate();
+    }
+  }, [batchOrderQuery.item]);
+
+  return (
+    <DashboardSubItemsList
+      subItems={[
+        <DashboardSubItem
+          title={intl.formatMessage(messages.paymentSectionTitle)}
+          footer={
+            <div className="content">
+              <FormattedMessage {...messages.batchOrderPayment} />
+              <Button
+                size="small"
+                color="primary"
+                onClick={retryModal.open}
+                disabled={processingPayment}
+              >
+                {processingPayment ? (
+                  <FormattedMessage {...messages.paymentProcessing} />
+                ) : (
+                  <FormattedMessage
+                    {...messages.paymentNeededButton}
+                    values={{
+                      amount: intl.formatNumber(batchOrder.total ?? 0, {
+                        style: 'currency',
+                        currency: batchOrder.currency ?? 'EUR',
+                      }),
+                    }}
+                  />
+                )}
+              </Button>
+              <BatchOrderPaymentModal
+                {...retryModal}
+                batchOrder={batchOrder}
+                onClose={batchOrderQuery.methods.invalidate}
+              />
+            </div>
+          }
+        />,
+      ]}
+    />
+  );
+};