richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/components/ContractFrame/LearnerContractFrame.spec.tsx

@@ -0,0 +1,125 @@
+import { PropsWithChildren, useEffect } from 'react';
+import { render, screen } from '@testing-library/react';
+import { faker } from '@faker-js/faker';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { IntlProvider } from 'react-intl';
+import fetchMock from 'fetch-mock';
+import { QueryStateFactory } from 'utils/test/factories/reactQuery';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { CredentialOrderFactory } from 'utils/test/factories/joanie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { Props } from './AbstractContractFrame';
+import { LearnerContractFrame } from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+// Mock AbstractContractFrame to just call all callbacks on render
+const MockedAbstractContractFrame = (props: Props) => {
+  useEffect(() => {
+    // Just trigger all
+    props.getInvitationLink();
+    props.checkSignature();
+    props.onDone?.();
+    props.onClose?.();
+  }, []);
+
+  return <div data-testid="AbstractContractFrame" data-is-open={props.isOpen} />;
+};
+
+jest.mock('./AbstractContractFrame', () => ({
+  __esModule: true,
+  ...jest.requireActual('./AbstractContractFrame'),
+  default: (props: Props) => <MockedAbstractContractFrame {...props} />,
+}));
+
+describe('LearnerContractFrame', () => {
+  const Wrapper = ({ client, children }: PropsWithChildren<{ client: QueryClient }>) => {
+    return (
+      <QueryClientProvider client={client}>
+        <IntlProvider locale="en">
+          <JoanieSessionProvider>{children}</JoanieSessionProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    );
+  };
+
+  beforeEach(() => {
+    // SessionProvider api calls
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    fetchMock.restore();
+  });
+
+  it('should implement AbstractContractFrame for learner', async () => {
+    const order = CredentialOrderFactory().one();
+    const isOpen = faker.datatype.boolean();
+
+    const expectedUrls = {
+      getInvitationLink: `https://joanie.endpoint/api/v1.0/orders/${order.id}/submit_for_signature/`,
+      checkSignature: `https://joanie.endpoint/api/v1.0/orders/${order.id}/`,
+    };
+
+    fetchMock.post(expectedUrls.getInvitationLink, 200).get(expectedUrls.checkSignature, 200);
+
+    const handleDone = jest.fn();
+    const handleClose = jest.fn();
+
+    const client = createTestQueryClient({
+      user: true,
+      queriesCallback: (queries) => {
+        // Push contract and orders queries
+        queries.push(QueryStateFactory(['user', 'contracts'], { data: [] }));
+        queries.push(QueryStateFactory(['user', 'orders'], { data: [] }));
+      },
+    });
+
+    let contractsQueryState = client.getQueryState(['user', 'contracts']);
+    expect(contractsQueryState?.isInvalidated).toBe(false);
+    let ordersQueryState = client.getQueryState(['user', 'orders']);
+    expect(ordersQueryState?.isInvalidated).toBe(false);
+
+    render(
+      <Wrapper client={client}>
+        <LearnerContractFrame
+          order={order}
+          isOpen={isOpen}
+          onDone={handleDone}
+          onClose={handleClose}
+        />
+      </Wrapper>,
+    );
+
+    // isOpen should be passed down to AbstractContractFrame
+    const contractFrame = await screen.getByTestId('AbstractContractFrame');
+    expect(contractFrame).toHaveAttribute('data-is-open', String(isOpen));
+
+    // getInvitationLink should post on order/submit-for-signature endpoint
+    expect(fetchMock.called(expectedUrls.getInvitationLink)).toBe(true);
+
+    // checkSignature should get on order endpoint
+    expect(fetchMock.called(expectedUrls.checkSignature)).toBe(true);
+
+    // onDone should be tweaked to invalidate the user orders and contracts queries
+    // and passed down to AbstractContractFrame
+    contractsQueryState = client.getQueryState(['user', 'contracts']);
+    expect(contractsQueryState?.isInvalidated).toBe(true);
+    ordersQueryState = client.getQueryState(['user', 'orders']);
+    expect(ordersQueryState?.isInvalidated).toBe(true);
+    expect(handleDone).toHaveBeenCalledTimes(1);
+
+    // onClose should be passed down to AbstractContractFrame
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+});

package/js/components/ContractFrame/LearnerContractFrame.tsx

@@ -0,0 +1,42 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { CredentialOrder, NestedCredentialOrder } from 'types/Joanie';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import AbstractContractFrame, {
+  AbstractProps,
+} from 'components/ContractFrame/AbstractContractFrame';
+
+interface Props extends AbstractProps {
+  order: CredentialOrder | NestedCredentialOrder;
+}
+
+const LearnerContractFrame = ({ order, onDone, ...props }: Props) => {
+  const api = useJoanieApi();
+  const queryClient = useQueryClient();
+  const getInvitationLink = async () => {
+    const response = await api.user.orders.submit_for_signature(order.id);
+    return response.invitation_link;
+  };
+  const checkOrderSignature = async () => {
+    const orderToCheck = await api.user.orders.get({ id: order.id });
+    const isSigned = Boolean(orderToCheck?.contract?.student_signed_on);
+
+    return { isSigned };
+  };
+
+  const onDoneWithInvalidation = () => {
+    queryClient.invalidateQueries({ queryKey: ['user', 'orders'] });
+    queryClient.invalidateQueries({ queryKey: ['user', 'contracts'] });
+    onDone?.();
+  };
+
+  return (
+    <AbstractContractFrame
+      getInvitationLink={getInvitationLink}
+      checkSignature={checkOrderSignature}
+      onDone={onDoneWithInvalidation}
+      {...props}
+    />
+  );
+};
+
+export default LearnerContractFrame;

package/js/components/ContractFrame/OrganizationContractFrame.spec.tsx

@@ -0,0 +1,167 @@
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { faker } from '@faker-js/faker';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { IntlProvider } from 'react-intl';
+import fetchMock from 'fetch-mock';
+import { QueryStateFactory } from 'utils/test/factories/reactQuery';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import {
+  ContractFactory,
+  CourseProductRelationFactory,
+  OrganizationFactory,
+} from 'utils/test/factories/joanie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { isCourseProductRelation } from 'types/Joanie';
+import { Props } from './AbstractContractFrame';
+import { OrganizationContractFrame } from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+// Mock AbstractContractFrame to just call all callbacks on render
+// As we have to wait to get the invitation link to be able to call checkSignature,
+// we fake this behavior through a combo useState/useEffect
+const MockedAbstractContractFrame = (props: Props) => {
+  const [hasGetInvitationLink, setHasGetInvitationLink] = useState(false);
+  useEffect(() => {
+    // Just trigger all
+    props.getInvitationLink().then(() => setHasGetInvitationLink(true));
+  }, []);
+
+  useEffect(() => {
+    if (hasGetInvitationLink) {
+      props.checkSignature();
+      props.onDone?.();
+      props.onClose?.();
+    }
+  }, [hasGetInvitationLink]);
+
+  return <div data-testid="AbstractContractFrame" data-is-open={props.isOpen} />;
+};
+
+jest.mock('./AbstractContractFrame', () => ({
+  __esModule: true,
+  ...jest.requireActual('./AbstractContractFrame'),
+  default: (props: Props) => <MockedAbstractContractFrame {...props} />,
+}));
+
+describe('OrganizationContractFrame', () => {
+  const Wrapper = ({ client, children }: PropsWithChildren<{ client: QueryClient }>) => {
+    return (
+      <QueryClientProvider client={client}>
+        <IntlProvider locale="en">
+          <JoanieSessionProvider>{children}</JoanieSessionProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    );
+  };
+
+  beforeEach(() => {
+    // SessionProvider api calls
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    fetchMock.restore();
+  });
+
+  it.each([
+    {
+      label: 'contractList: undefined, courseProductRelation: undefined',
+      contractList: undefined,
+      courseProductRelation: undefined,
+    },
+    {
+      label: 'contractList: 2 Contract, courseProductRelation: undefined',
+      contractList: ContractFactory().many(2),
+      courseProductRelation: undefined,
+    },
+    {
+      label: 'contractList: undefined, courseProductRelation: one CourseProductRelation',
+      contractList: undefined,
+      courseProductRelation: CourseProductRelationFactory().one(),
+    },
+  ])(
+    'should implement AbstractContractFrame for organization and $label',
+    async ({ contractList, courseProductRelation }) => {
+      const organization = OrganizationFactory().one();
+      const contracts = contractList || ContractFactory().many(2);
+      const isOpen = faker.datatype.boolean();
+
+      const invitationLinkQueryString =
+        courseProductRelation && isCourseProductRelation(courseProductRelation)
+          ? `?course_product_relation_ids=${courseProductRelation.id}`
+          : '';
+      const expectedUrls = {
+        getInvitationLink: `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts-signature-link/${invitationLinkQueryString}`,
+        checkSignature: `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?id=${contracts[0].id}&id=${contracts[1].id}`,
+      };
+
+      fetchMock
+        .get(expectedUrls.getInvitationLink, {
+          invitation_link: faker.internet.url(),
+          contract_ids: contracts.map((contract) => contract.id),
+        })
+        .get(expectedUrls.checkSignature, { results: [contracts] });
+
+      const handleDone = jest.fn();
+      const handleClose = jest.fn();
+
+      const client = createTestQueryClient({
+        user: true,
+        queriesCallback: (queries) => {
+          // Push contract and orders queries
+          queries.push(QueryStateFactory(['user', 'organization_contracts'], { data: [] }));
+        },
+      });
+
+      let contractsQueryState = client.getQueryState(['user', 'organization_contracts']);
+      expect(contractsQueryState?.isInvalidated).toBe(false);
+
+      await act(async () => {
+        render(
+          <Wrapper client={client}>
+            <OrganizationContractFrame
+              organizationId={organization.id}
+              courseProductRelationIds={
+                courseProductRelation ? [courseProductRelation.id] : undefined
+              }
+              isOpen={isOpen}
+              onDone={handleDone}
+              onClose={handleClose}
+            />
+          </Wrapper>,
+        );
+      });
+
+      // isOpen should be passed down to AbstractContractFrame
+      const contractFrame = screen.getByTestId('AbstractContractFrame');
+      expect(contractFrame).toHaveAttribute('data-is-open', String(isOpen));
+
+      // getInvitationLink should post on order/submit-for-signature endpoint
+      expect(fetchMock.called(expectedUrls.getInvitationLink)).toBe(true);
+
+      // checkSignature should get on order endpoint
+      expect(fetchMock.called(expectedUrls.checkSignature)).toBe(true);
+
+      // onDone should be tweaked to invalidate the user orders and contracts queries
+      // and passed down to AbstractContractFrame
+      contractsQueryState = client.getQueryState(['user', 'organization_contracts']);
+      expect(contractsQueryState?.isInvalidated).toBe(true);
+      expect(handleDone).toHaveBeenCalledTimes(1);
+
+      // onClose should be passed down to AbstractContractFrame
+      expect(handleClose).toHaveBeenCalledTimes(1);
+    },
+  );
+});

package/js/components/ContractFrame/OrganizationContractFrame.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import AbstractContractFrame, {
+  AbstractProps,
+} from 'components/ContractFrame/AbstractContractFrame';
+import { Contract, CourseProductRelation } from 'types/Joanie';
+
+interface Props extends AbstractProps {
+  contractIds?: Contract['id'][];
+  organizationId: string;
+  courseProductRelationIds?: CourseProductRelation['id'][];
+}
+
+const OrganizationContractFrame = ({
+  organizationId,
+  courseProductRelationIds = [],
+  contractIds,
+  onDone,
+  ...props
+}: Props) => {
+  const api = useJoanieApi();
+  const queryClient = useQueryClient();
+  const [contractIdsToCheck, setContractIdsToCheck] = useState(contractIds);
+
+  const getInvitationLink = async () => {
+    /*
+     The API returns the invitation link to sign contracts and a list of contracts ids which should
+     be signed. We need to keep track of these ids to check if all contracts have been signed.
+     */
+    const response = await api.organizations.contracts.getSignatureLinks({
+      course_product_relation_ids: courseProductRelationIds,
+      organization_id: organizationId,
+      contracts_ids: contractIds,
+    });
+    setContractIdsToCheck(response.contract_ids);
+    return response.invitation_link;
+  };
+
+  /*
+   * Check if all contracts to signed has been signed.
+   */
+  const checkContractsSignature = async () => {
+    const { results: contractsToCheck } = await api.organizations.contracts.get({
+      organization_id: organizationId,
+      contract_ids: contractIdsToCheck,
+    });
+    const isSigned = contractsToCheck.every((contract) =>
+      Boolean(contract?.organization_signed_on),
+    );
+
+    return { isSigned };
+  };
+
+  const onDoneWithInvalidation = () => {
+    queryClient.invalidateQueries({ queryKey: ['user', 'organization_contracts'] });
+    onDone?.();
+  };
+
+  return (
+    <AbstractContractFrame
+      getInvitationLink={getInvitationLink}
+      checkSignature={checkContractsSignature}
+      onDone={onDoneWithInvalidation}
+      {...props}
+    />
+  );
+};
+
+export default OrganizationContractFrame;

package/js/components/ContractFrame/_styles.scss

@@ -0,0 +1,62 @@
+iframe#lex-persona {
+  // The width of the iframe mimics the width of the modal.
+  max-width: 1024px;
+  width: 75vw;
+  height: calc(100vh - 4rem);
+  left: 50% !important;
+  transform: translate(-50%, 0);
+  top: 0 !important;
+  margin: 3rem auto;
+  background-color: white;
+
+  @include media-breakpoint-down(sm) {
+    margin: 1rem auto;
+    width: calc(100% - 2rem);
+  }
+}
+
+.ContractFrame {
+  &__modal-body {
+    padding: 0 3rem 1.5rem 3rem;
+  }
+
+  &__loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 3rem 0;
+    gap: 4rem;
+  }
+
+  &__caption {
+    color: r-theme-val(contract-frame, title-color);
+    font-size: 1.5rem;
+  }
+
+  &__finished {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    button {
+      margin-top: 2.5rem;
+    }
+  }
+
+  &__content {
+    color: r-theme-val(contract-frame, content-color);
+    font-size: 0.875rem;
+    line-height: 1.3em;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    max-width: 300px;
+  }
+
+  &__dummy {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+  }
+}

package/js/components/ContractFrame/iframe-manager.js

@@ -0,0 +1,158 @@
+/**
+ * /!\ DO NOT EDIT /!\
+ *
+ * This file is the Lex Persona SDK. They do not have any NPM dependency, so we had to integrate
+ * this library directly to our source code.
+ */
+!(function (e, n) {
+  typeof exports === 'object' && typeof module === 'object'
+    ? (module.exports = n())
+    : typeof define === 'function' && define.amd
+    ? define([], n)
+    : typeof exports === 'object'
+    ? (exports.iframeManager = n())
+    : (e.iframeManager = n());
+})(window, function () {
+  return (function (e) {
+    function n(r) {
+      if (o[r]) return o[r].exports;
+      const t = (o[r] = { exports: {}, id: r, loaded: !1 });
+      return e[r].call(t.exports, t, t.exports, n), (t.loaded = !0), t.exports;
+    }
+
+    var o = {};
+    return (n.m = e), (n.c = o), (n.p = ''), n(0);
+  })([
+    function (e, n) {
+      function o() {
+        a && (a(), (a = null));
+      }
+
+      function r() {
+        c ||
+          ((c = document.createElement('style')),
+          (c.innerHTML = '.' + i + ' { overflow: hidden; }'),
+          document.getElementsByTagName('head')[0].appendChild(c));
+      }
+
+      function t(e, n) {
+        return void 0 === n
+          ? e
+          : typeof e !== 'object'
+          ? n
+          : (Object.keys(n).forEach(function (o) {
+              void 0 === e[o] ? (e[o] = n[o]) : (e[o] = t(e[o], n[o]));
+            }),
+            e);
+      }
+
+      var i = 'iframe-manager-open';
+      var a = null;
+      n.open = function (e, n, c) {
+        function f(f, s) {
+          function d(e) {
+            o(), f && f(e), c(null, e);
+          }
+
+          function l(e) {
+            o(), s && s(e), c(e);
+          }
+
+          function u(e) {
+            const n = e && e.trim().split('/');
+            if (!n || !n[0] || n[1] || !n[2]) return l(new Error('Malformed or missing URL'));
+            const o = n[0].toLowerCase();
+            let r = o + '//' + n[2].toLowerCase();
+            return (
+              o === 'http'
+                ? (r = r.replace(/:80$/, ''))
+                : o === 'https' && (r = r.replace(/:443$/, '')),
+              r
+            );
+          }
+
+          (c = typeof c === 'function' ? c : typeof n === 'function' ? n : function () {}),
+            (n = typeof n === 'object' ? n : typeof e === 'object' ? e : {}),
+            (e = typeof e === 'string' ? e : typeof n.url === 'string' ? n.url : ''),
+            (n = t(
+              {
+                iframe: !0,
+                iframeProps: {
+                  width: '100%',
+                  height: '100%',
+                  frameBorder: 0,
+                  allowTransparency: 'true',
+                },
+                iframeStyle: { position: 'fixed', top: '0', left: '0', zIndex: 9999 },
+              },
+              n,
+            ));
+          const m = u(window.location.href);
+          const p = u(e);
+          const w = e.split('#');
+          let y = w[0].indexOf('?') === -1 ? '?' : '&';
+          (y += n.iframe ? 'iframeParentOrigin=' : 'windowParentOrigin='),
+            (e = w[0] + y + encodeURIComponent(m));
+          const g = Math.random().toString(36).slice(2);
+          w.length > 1
+            ? ((w[0] = ''), (e += w.join('#') + '&parentChallenge=' + g))
+            : (e += '#parentChallenge=' + g);
+          let h;
+          let v = null;
+          let b = null;
+          let E = null;
+          if (n.iframe)
+            (v = document.createElement('iframe')),
+              Object.keys(n.iframeProps).forEach(function (e) {
+                v[e] = n.iframeProps[e];
+              }),
+              Object.keys(n.iframeStyle).forEach(function (e) {
+                v.style[e] = n.iframeStyle[e];
+              }),
+              (v.onerror = function () {
+                l(new Error('unknown_error'));
+              }),
+              (v.onload = function () {
+                h.postMessage(g, p);
+              }),
+              (v.src = e),
+              document.body.appendChild(v),
+              r(),
+              (document.body.className += ' ' + i),
+              (h = v.contentWindow),
+              (a = function () {
+                document.body.removeChild(v),
+                  removeEventListener('message', E),
+                  (document.body.className = window.document.body.className.replace(
+                    new RegExp('(?:^|\\s)' + i + '(?!\\S)'),
+                    '',
+                  ));
+              });
+          else {
+            if (((h = window.open(e, Math.random().toString(36).substring(2))), !h))
+              throw new Error('The authorize window was blocked.');
+            a = function () {
+              clearInterval(b), h.closed || h.close(), window.removeEventListener('message', E);
+            };
+          }
+          (E = function (e) {
+            const n = u(e.origin);
+            e.source === h &&
+              n === p &&
+              (e.data === 'error' ? l(new Error('Unknown error')) : d(e.data));
+          }),
+            window.addEventListener('message', E),
+            n.iframe ||
+              (b = setInterval(function () {
+                h.closed && l(new Error('Window closed'));
+              }, 250));
+        }
+
+        o();
+        const s = window.Promise ? new Promise(f) : f();
+        return t(s || {}, { clean: o });
+      };
+      let c;
+    },
+  ]);
+});

package/js/components/ContractFrame/index.ts

@@ -0,0 +1,5 @@
+import OrganizationContractFrame from './OrganizationContractFrame';
+import LearnerContractFrame from './LearnerContractFrame';
+import type { SignatureProps } from './AbstractContractFrame';
+
+export { OrganizationContractFrame, LearnerContractFrame, SignatureProps };