richie-education 3.2.2-dev45 → 3.2.2-dev56

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

@@ -11,6 +11,9 @@ import WithdrawRightCheckbox from 'components/SaleTunnel/WithdrawRightCheckbox';
 import { PaymentSchedule, ProductType } from 'types/Joanie';
 import { usePaymentPlan } from 'hooks/usePaymentPlan';
 import { HttpError } from 'utils/errors/HttpError';
+import { APIBackend, KeycloakAccountApi } from 'types/api';
+import context from 'utils/context';
+import { AuthenticationApi } from 'api/authentication';
 
 const messages = defineMessages({
   title: {
@@ -49,6 +52,31 @@ const messages = defineMessages({
     defaultMessage:
       'This email will be used to send you confirmation mails, it is the one you created your account with.',
   },
+  keycloakUsernameLabel: {
+    id: 'components.SaleTunnel.Information.keycloak.account.label',
+    description: 'Label for the name',
+    defaultMessage: 'Account name',
+  },
+  keycloakUsernameInfo: {
+    id: 'components.SaleTunnel.Information.keycloak.account.info',
+    description: 'Info for the name',
+    defaultMessage: 'This name will be used in legal documents.',
+  },
+  keycloakEmailInfo: {
+    id: 'components.SaleTunnel.Information.keycloak.email.info',
+    description: 'Info for the email',
+    defaultMessage: 'This email will be used to send you confirmation mails.',
+  },
+  keycloakAccountLinkInfo: {
+    id: 'components.SaleTunnel.Information.keycloak.updateLinkInfo',
+    description: 'Text before the keycloak account update link',
+    defaultMessage: 'If any of the information above is incorrect,',
+  },
+  keycloakAccountLinkLabel: {
+    id: 'components.SaleTunnel.Information.keycloak.updateLinkLabel',
+    description: 'Label of the keycloak link to update account',
+    defaultMessage: 'please update your account',
+  },
   voucherTitle: {
     id: 'components.SaleTunnel.Information.voucher.title',
     description: 'Title for the voucher',
@@ -130,6 +158,8 @@ export const SaleTunnelInformationSingular = () => {
     setNeedsPayment(!fromBatchOrder);
   }, [fromBatchOrder, setNeedsPayment]);
 
+  const isKeycloakBackend = context?.authentication.backend === APIBackend.KEYCLOAK;
+
   return (
     <>
       <div>
@@ -148,11 +178,17 @@ export const SaleTunnelInformationSingular = () => {
           <div className="description mb-s">
             <FormattedMessage {...messages.description} />
           </div>
-          <OpenEdxFullNameForm />
           <AddressSelector />
-          <div className="mt-s">
-            <Email />
-          </div>
+          {isKeycloakBackend ? (
+            <KeycloakAccountEdit />
+          ) : (
+            <>
+              <OpenEdxFullNameForm />
+              <div className="mt-s">
+                <Email />
+              </div>
+            </>
+          )}
         </div>
       )}
       <div>
@@ -163,6 +199,51 @@ export const SaleTunnelInformationSingular = () => {
   );
 };
 
+const KeycloakAccountEdit = () => {
+  const accountApi = AuthenticationApi!.account as KeycloakAccountApi;
+  const { user } = useSession();
+
+  return (
+    <>
+      <div className="mt-s">
+        <div className="sale-tunnel__username">
+          <div className="sale-tunnel__username__top">
+            <h4>
+              <FormattedMessage {...messages.keycloakUsernameLabel} />
+            </h4>
+            <div className="fw-bold">{user?.username}</div>
+          </div>
+          <div className="sale-tunnel__username__description">
+            <FormattedMessage {...messages.keycloakUsernameInfo} />
+          </div>
+        </div>
+      </div>
+      <div className="mt-s">
+        <div className="sale-tunnel__email">
+          <div className="sale-tunnel__email__top">
+            <h4>
+              <FormattedMessage {...messages.emailLabel} />
+            </h4>
+            <div className="fw-bold">{user?.email}</div>
+          </div>
+          <div className="sale-tunnel__email__description">
+            <FormattedMessage {...messages.keycloakEmailInfo} />
+          </div>
+        </div>
+      </div>
+      <div className="mt-s">
+        <div className="sale-tunnel__account-link">
+          <FormattedMessage {...messages.keycloakAccountLinkInfo} />{' '}
+          <a href={accountApi.updateUrl()}>
+            <FormattedMessage {...messages.keycloakAccountLinkLabel} />
+          </a>
+          .
+        </div>
+      </div>
+    </>
+  );
+};
+
 const Email = () => {
   const { user } = useSession();
   const { data: openEdxProfileData } = useOpenEdxProfile({

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

@@ -4,6 +4,7 @@ import { Select } from '@openfun/cunningham-react';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 import { SaleTunnelInformationSingular } from 'components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationSingular';
 import { SaleTunnelInformationGroup } from 'components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationGroup';
+import { ProductType } from 'types/Joanie';
 
 const messages = defineMessages({
   purchaseTypeTitle: {
@@ -35,7 +36,8 @@ export enum FormType {
 
 export const SaleTunnelInformation = () => {
   const intl = useIntl();
-  const { setBatchOrder, setSchedule } = useSaleTunnelContext();
+  const { setBatchOrder, setSchedule, product } = useSaleTunnelContext();
+  const productType = product.type;
   const options = [
     { label: intl.formatMessage(messages.purchaseTypeOptionSingle), value: FormType.SINGULAR },
     { label: intl.formatMessage(messages.purchaseTypeOptionGroup), value: FormType.GROUP },
@@ -44,25 +46,29 @@ export const SaleTunnelInformation = () => {
 
   return (
     <div className="sale-tunnel__main__column sale-tunnel__information">
-      <div>
-        <h3 className="block-title mb-t">
-          <FormattedMessage {...messages.purchaseTypeTitle} />
-        </h3>
-        <Select
-          label={intl.formatMessage(messages.purchaseTypeSelect)}
-          options={options}
-          fullWidth
-          value={purchaseType}
-          clearable={false}
-          onChange={(e) => {
-            setPurchaseType(e.target.value as FormType);
-            setBatchOrder(undefined);
-            setSchedule(undefined);
-          }}
-        />
-      </div>
-      {purchaseType === FormType.SINGULAR && <SaleTunnelInformationSingular />}
-      {purchaseType === FormType.GROUP && <SaleTunnelInformationGroup />}
+      {productType === ProductType.CERTIFICATE ? (
+        <SaleTunnelInformationSingular />
+      ) : (
+        <div>
+          <h3 className="block-title mb-t">
+            <FormattedMessage {...messages.purchaseTypeTitle} />
+          </h3>
+          <Select
+            label={intl.formatMessage(messages.purchaseTypeSelect)}
+            options={options}
+            fullWidth
+            value={purchaseType}
+            clearable={false}
+            onChange={(e) => {
+              setPurchaseType(e.target.value as FormType);
+              setBatchOrder(undefined);
+              setSchedule(undefined);
+            }}
+          />
+          {purchaseType === FormType.SINGULAR && <SaleTunnelInformationSingular />}
+          {purchaseType === FormType.GROUP && <SaleTunnelInformationGroup />}
+        </div>
+      )}
     </div>
   );
 };

package/js/components/SaleTunnel/_styles.scss

@@ -67,6 +67,7 @@
     }
   }
 
+  &__username,
   &__email {
     &__top {
       display: flex;
@@ -82,6 +83,13 @@
       font-size: 0.75rem;
     }
   }
+
+  &__account-link {
+    a {
+      color: r-theme-val(sale-tunnel, account-link-color);
+      text-decoration: underline;
+    }
+  }
   .price--striked {
     text-decoration: line-through;
     opacity: 0.5;

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

@@ -46,6 +46,44 @@ jest.mock('utils/indirection/window', () => ({
 
 jest.mock('../PaymentInterfaces');
 
+/**
+ * Setup common mocks for B2B batch order tests
+ */
+const setupBatchOrderMocks = (params: {
+  course: any;
+  product: any;
+  offering: any;
+  paymentPlan: any;
+  organizations?: any[] | any;
+}) => {
+  const { course, product, offering, paymentPlan, organizations } = params;
+
+  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-plan/`,
+    paymentPlan,
+  );
+  fetchMock.get(`https://joanie.endpoint/api/v1.0/enrollments/`, []);
+  fetchMock.get(
+    `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify({
+      product_id: product.id,
+      course_code: course.code,
+      state: NOT_CANCELED_ORDER_STATES,
+    })}`,
+    [],
+  );
+
+  if (organizations) {
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/offerings/${offering.id}/get-organizations/`,
+      organizations,
+    );
+  }
+};
+
 describe('SaleTunnel', () => {
   let richieUser: User;
   let openApiEdxProfile: OpenEdxApiProfile;
@@ -86,27 +124,7 @@ describe('SaleTunnel', () => {
     const paymentPlan = PaymentPlanFactory().one();
     const organizations = OrganizationFactory().many(3);
 
-    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-plan/`,
-      paymentPlan,
-    );
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/enrollments/`, []);
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify({
-        product_id: product.id,
-        course_code: course.code,
-        state: NOT_CANCELED_ORDER_STATES,
-      })}`,
-      [],
-    );
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/offerings/${offering.id}/get-organizations/`,
-      organizations,
-    );
+    setupBatchOrderMocks({ course, product, offering, paymentPlan, organizations });
 
     render(<CourseProductItem productId={product.id} course={course} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
@@ -304,24 +322,13 @@ describe('SaleTunnel', () => {
     }).one();
     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-plan/`,
-      paymentPlan,
-    );
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/enrollments/`, []);
+    setupBatchOrderMocks({ course, product, offering, paymentPlan });
+
     const orderQueryParameters = {
       product_id: product.id,
       course_code: course.code,
       state: NOT_CANCELED_ORDER_STATES,
     };
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
-      [],
-    );
 
     render(<CourseProductItem productId={product.id} course={course} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
@@ -423,27 +430,13 @@ describe('SaleTunnel', () => {
       product: { id: product.id, title: product.title },
     }).one();
 
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/`,
+    setupBatchOrderMocks({
+      course,
+      product,
       offering,
-    );
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
       paymentPlan,
-    );
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/enrollments/`, []);
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify({
-        product_id: product.id,
-        course_code: course.code,
-        state: NOT_CANCELED_ORDER_STATES,
-      })}`,
-      [],
-    );
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/offerings/${offering.id}/get-organizations/`,
-      offeringOrganization,
-    );
+      organizations: offeringOrganization,
+    });
 
     render(<CourseProductItem productId={product.id} course={course} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
@@ -573,4 +566,167 @@ describe('SaleTunnel', () => {
       'Unable to create the order: the maximum number of available seats for this offering has been reached. Please contact support for more information.',
     );
   }, 30000);
+
+  it('tests optional fields can be filled and cleared without breaking validation', async () => {
+    const course = PacedCourseFactory().one();
+    const product = ProductFactory().one();
+    const offering = OfferingFactory({ course, product, is_withdrawable: false }).one();
+    const paymentPlan = PaymentPlanFactory().one();
+    const organizations = OrganizationFactory().many(3);
+
+    setupBatchOrderMocks({ course, product, offering, paymentPlan, organizations });
+
+    render(<CourseProductItem productId={product.id} course={course} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    await screen.findByRole('heading', { level: 3, name: product.title });
+    const user = userEvent.setup();
+    const buyButton = screen.getByRole('button', { name: product.call_to_action });
+    await user.click(buyButton);
+    await screen.findByTestId('generic-sale-tunnel-payment-step');
+
+    // Select group buy form
+    const formTypeSelect = screen.getByRole('combobox', { name: 'Purchase type' });
+    await user.click(formTypeSelect);
+    await user.click(screen.getByText('I am purchasing on behalf of an organization'));
+
+    // Company step
+    const $companyName = await screen.findByRole('textbox', { name: 'Company name' });
+    const $idNumber = screen.getByRole('textbox', { name: /Registration number/ });
+    const $address = screen.getByRole('textbox', { name: 'Address' });
+    const $postCode = screen.getByRole('textbox', { name: 'Postal code' });
+    const $city = screen.getByRole('textbox', { name: 'City' });
+    const $country = screen.getByRole('combobox', { name: 'Country' });
+
+    await user.type($companyName, 'Test Company');
+    await user.type($idNumber, '123456789');
+    await user.type($address, '123 Test Street');
+    await user.type($postCode, '12345');
+    await user.type($city, 'Test City');
+    await user.click($country);
+    await user.click(screen.getByText('France'));
+
+    // Fill and clear billing address optional fields
+    const $billingCheckbox = screen.getByLabelText('Use different billing information');
+    await user.click($billingCheckbox);
+
+    const $billingContactName = await screen.findByRole('textbox', {
+      name: 'Contact name',
+    });
+    const $billingContactEmail = screen.getByRole('textbox', { name: 'Contact email' });
+    const billingCompanyInputs = screen.getAllByRole('textbox', { name: 'Company name' });
+    const $billingCompanyName = billingCompanyInputs[billingCompanyInputs.length - 1];
+    const billingIdInputs = screen.getAllByRole('textbox', { name: /Registration number/ });
+    const $billingIdNumber = billingIdInputs[billingIdInputs.length - 1];
+    const billingAddressInputs = screen.getAllByRole('textbox', { name: 'Address' });
+    const $billingAddress = billingAddressInputs[billingAddressInputs.length - 1];
+    const billingPostCodeInputs = screen.getAllByRole('textbox', { name: 'Postal code' });
+    const $billingPostCode = billingPostCodeInputs[billingPostCodeInputs.length - 1];
+    const billingCityInputs = screen.getAllByRole('textbox', { name: 'City' });
+    const $billingCity = billingCityInputs[billingCityInputs.length - 1];
+    const billingCountrySelects = screen.getAllByRole('combobox', { name: 'Country' });
+    const $billingCountry = billingCountrySelects[billingCountrySelects.length - 1];
+
+    await user.type($billingContactName, 'Billing Contact');
+    await user.type($billingContactEmail, 'billing@test.com');
+    await user.type($billingCompanyName, 'Billing Company');
+    await user.type($billingIdNumber, '987654321');
+    await user.type($billingAddress, '456 Billing Street');
+    await user.type($billingPostCode, '54321');
+    await user.type($billingCity, 'Billing City');
+    await user.click($billingCountry);
+    await user.click(screen.getAllByText('France')[1]);
+
+    await user.clear($billingContactName);
+    await user.clear($billingContactEmail);
+    await user.clear($billingCompanyName);
+    await user.clear($billingIdNumber);
+    await user.clear($billingAddress);
+    await user.clear($billingPostCode);
+    await user.clear($billingCity);
+
+    await user.click($billingCheckbox);
+
+    // Follow-up step
+    await user.click(screen.getByRole('button', { name: 'Next' }));
+    const $lastName = await screen.findByRole('textbox', { name: 'Last name' });
+    const $firstName = screen.getByRole('textbox', { name: 'First name' });
+    const $role = screen.getByRole('textbox', { name: 'Role' });
+    const $email = screen.getByRole('textbox', { name: 'Email' });
+    const $phone = screen.getByRole('textbox', { name: 'Phone number' });
+
+    await user.type($lastName, 'Doe');
+    await user.type($firstName, 'Jane');
+    await user.type($role, 'Manager');
+    await user.type($email, 'jane.doe@test.com');
+    await user.type($phone, '+33123456789');
+
+    // Signatory step
+    await user.click(screen.getByRole('button', { name: 'Next' }));
+    const $signatoryLastName = await screen.findByRole('textbox', { name: 'Last name' });
+    const $signatoryFirstName = screen.getByRole('textbox', { name: 'First name' });
+    const $signatoryRole = screen.getByRole('textbox', { name: 'Role' });
+    const $signatoryEmail = screen.getByRole('textbox', { name: 'Email' });
+    const $signatoryPhone = screen.getByRole('textbox', { name: 'Phone number' });
+
+    await user.type($signatoryLastName, 'Smith');
+    await user.type($signatoryFirstName, 'John');
+    await user.type($signatoryRole, 'Director');
+    await user.type($signatoryEmail, 'john.smith@test.com');
+    await user.type($signatoryPhone, '+33987654321');
+
+    // Participants step
+    await user.click(screen.getByRole('button', { name: 'Next' }));
+    const $nbParticipants = await screen.findByLabelText('Number of participants to register');
+    await user.type($nbParticipants, '10');
+
+    // Financing step - fill and clear optional fields
+    await user.click(screen.getByRole('button', { name: 'Next' }));
+    const $purchaseOrderRadio = await screen.findByLabelText('Purchase order');
+    await user.click($purchaseOrderRadio);
+
+    const $fundingEntity = screen.getByLabelText('Entity name');
+    await user.type($fundingEntity, 'Test OPCO');
+    expect($fundingEntity).toHaveValue('Test OPCO');
+
+    const $fundingAmount = screen.getByLabelText('Amount covered');
+    await user.type($fundingAmount, '1000');
+    expect($fundingAmount).toHaveValue(1000);
+
+    await user.clear($fundingAmount);
+    expect($fundingAmount).toHaveValue(null);
+
+    await user.clear($fundingEntity);
+    expect($fundingEntity).toHaveValue('');
+
+    // Submit the batch order
+    const batchOrderRead = BatchOrderReadFactory().one();
+    fetchMock.post('https://joanie.endpoint/api/v1.0/batch-orders/', batchOrderRead);
+    const $subscribeButton = screen.getByRole('button', {
+      name: 'Subscribe',
+    }) as HTMLButtonElement;
+
+    expect($subscribeButton).not.toBeDisabled();
+    await user.click($subscribeButton);
+    await screen.findByTestId('generic-sale-tunnel-success-step');
+
+    // Verify the batch order payload does NOT contain the cleared optional fields
+    const batchOrderCalls = fetchMock.calls('https://joanie.endpoint/api/v1.0/batch-orders/');
+    expect(batchOrderCalls).toHaveLength(1);
+    const batchOrderPayload = JSON.parse(batchOrderCalls[0][1]?.body as string);
+
+    expect(batchOrderPayload.billing_address).toBeUndefined();
+    expect(batchOrderPayload.funding_entity).toBeUndefined();
+    expect(batchOrderPayload.funding_amount).toBeUndefined();
+    expect(batchOrderPayload.organization_id).toBeUndefined();
+
+    expect(batchOrderPayload).toMatchObject({
+      offering_id: offering.id,
+      company_name: 'Test Company',
+      identification_number: '123456789',
+      payment_method: PaymentMethod.PURCHASE_ORDER,
+      nb_seats: '10',
+    });
+  }, 30000);
 });