richie-education 3.2.1-dev9 → 3.2.2-dev26

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/index.tsx

@@ -0,0 +1,175 @@
+import { defineMessages, FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
+import { generatePath } from 'react-router';
+import { BatchOrderRead, BatchOrderState } from 'types/Joanie';
+import { PaymentMethod } from 'components/PaymentInterfaces/types';
+import Badge from 'components/Badge';
+import { DashboardItem } from 'widgets/Dashboard/components/DashboardItem/index';
+import { Icon, IconTypeEnum } from 'components/Icon';
+import { RouterButton } from 'widgets/Dashboard/components/RouterButton';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { DashboardBatchOrderSubItems } from './DashboardBatchOrderSubItems';
+import { BatchOrderPaymentManager } from './BatchOrderPaymentModal/BatchOrderPaymentManager';
+
+const messages = defineMessages({
+  seats: {
+    id: 'batchOrder.seats',
+    description: 'Text displayed for seats value in batch order',
+    defaultMessage: 'Seats',
+  },
+  [BatchOrderState.DRAFT]: {
+    id: 'batchOrder.status.draft',
+    description: 'Status label for a draft batch order',
+    defaultMessage: 'Draft',
+  },
+  [BatchOrderState.ASSIGNED]: {
+    id: 'batchOrder.status.assigned',
+    description: 'Status label for an assigned batch order',
+    defaultMessage: 'Assigned',
+  },
+  [BatchOrderState.QUOTED]: {
+    id: 'batchOrder.status.quoted',
+    description: 'Status label for a quoted batch order',
+    defaultMessage: 'Quoted',
+  },
+  [BatchOrderState.TO_SIGN]: {
+    id: 'batchOrder.status.to_sign',
+    description: 'Status label for a batch order awaiting signature',
+    defaultMessage: 'To sign',
+  },
+  [BatchOrderState.SIGNING]: {
+    id: 'batchOrder.status.signing',
+    description: 'Status label for a batch order in signing process',
+    defaultMessage: 'Signing',
+  },
+  [BatchOrderState.PENDING]: {
+    id: 'batchOrder.status.pending',
+    description: 'Status label for a pending batch order',
+    defaultMessage: 'Pending',
+  },
+  [BatchOrderState.PROCESS_PAYMENT]: {
+    id: 'batchOrder.status.processPayment',
+    description: 'Status label for a process payment batch order',
+    defaultMessage: 'Process payment',
+  },
+  [BatchOrderState.FAILED_PAYMENT]: {
+    id: 'batchOrder.status.failed_payment',
+    description: 'Status label for a batch order with failed payment',
+    defaultMessage: 'Failed payment',
+  },
+  [BatchOrderState.CANCELED]: {
+    id: 'batchOrder.status.canceled',
+    description: 'Status label for a canceled batch order',
+    defaultMessage: 'Canceled',
+  },
+  [BatchOrderState.COMPLETED]: {
+    id: 'batchOrder.status.completed',
+    description: 'Status label for a completed batch order',
+    defaultMessage: 'Completed',
+  },
+  [PaymentMethod.BANK_TRANSFER]: {
+    id: 'batchOrder.payment.bank',
+    description: 'Label for bank transfer payment method',
+    defaultMessage: 'Bank transfer',
+  },
+  [PaymentMethod.CARD_PAYMENT]: {
+    id: 'batchOrder.payment.card',
+    description: 'Label for card payment method',
+    defaultMessage: 'Card payment',
+  },
+  [PaymentMethod.PURCHASE_ORDER]: {
+    id: 'batchOrder.payment.order',
+    description: 'Label for purchase order payment method',
+    defaultMessage: 'Purchase order',
+  },
+  paymentNeededButton: {
+    id: 'components.ProductCertificateFooter.paymentNeededButton',
+    description: 'Button label for the payment needed message',
+    defaultMessage: 'Pay {amount}',
+  },
+});
+
+export const DashboardItemBatchOrder = ({
+  batchOrder,
+  showDetails = false,
+}: {
+  batchOrder: BatchOrderRead;
+  showDetails?: boolean;
+}) => {
+  const intl = useIntl();
+  const needsPayment =
+    (batchOrder.state === BatchOrderState.PENDING ||
+      batchOrder.state === BatchOrderState.PROCESS_PAYMENT) &&
+    batchOrder.payment_method === PaymentMethod.CARD_PAYMENT;
+
+  return (
+    <div className="dashboard-item-order">
+      <DashboardItem
+        data-testid={`dashboard-item-batch-order-${batchOrder.id}`}
+        title={batchOrder.offering?.product.title}
+        code={`Ref. ${batchOrder.id}`}
+        imageUrl={batchOrder.offering?.course.cover?.src}
+        footer={
+          <div className="dashboard-item-order__footer">
+            <div className="dashboard-item__block__status">
+              {batchOrder.state && (
+                <Badge color="primary">
+                  <div className="dashboard-item__block__status__badge">
+                    <FormattedMessage {...messages[batchOrder.state]} />
+                  </div>
+                </Badge>
+              )}
+              {batchOrder.nb_seats && (
+                <div className="dashboard-item__block__information">
+                  <Icon name={IconTypeEnum.GROUPS} size="small" />
+                  <span>{batchOrder.nb_seats}</span>
+                  <span>{intl.formatMessage(messages.seats)}</span>
+                </div>
+              )}
+              {batchOrder.payment_method && (
+                <div className="dashboard-item__block__information">
+                  <Icon name={IconTypeEnum.MONEY} size="small" />
+                  <FormattedMessage {...messages[batchOrder.payment_method]} />
+                </div>
+              )}
+              {showDetails && (
+                <div className="dashboard-item__block__information">
+                  <Icon name={IconTypeEnum.OFFER_SUBSCRIPTION} size="small" />
+                  <span>
+                    <FormattedNumber
+                      value={batchOrder.total}
+                      currency={batchOrder.currency}
+                      style="currency"
+                    />
+                  </span>
+                </div>
+              )}
+            </div>
+            <RouterButton
+              size="small"
+              className="dashboard-item__button"
+              href={
+                showDetails
+                  ? generatePath(LearnerDashboardPaths.BATCH_ORDERS, {
+                      batchOrderId: batchOrder.id!,
+                    })
+                  : generatePath(LearnerDashboardPaths.BATCH_ORDER, {
+                      batchOrderId: batchOrder.id!,
+                    })
+              }
+              data-testid="dashboard-item-batch-order__button"
+            >
+              {intl.formatMessage(
+                showDetails
+                  ? { id: 'batchOrder.viewAll', defaultMessage: 'View all batch orders' }
+                  : { id: 'batchOrder.viewOne', defaultMessage: 'View details' },
+              )}
+            </RouterButton>
+          </div>
+        }
+      >
+        {needsPayment && <BatchOrderPaymentManager batchOrder={batchOrder} />}
+        {showDetails && <DashboardBatchOrderSubItems batchOrder={batchOrder} />}
+      </DashboardItem>
+    </div>
+  );
+};

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.tsx

@@ -78,6 +78,7 @@ export const DashboardItemOrder = ({
   const isProductPurchasable = ProductHelper.isPurchasable(offering?.product);
   const isNotResumable = !isActive && !isProductPurchasable;
   const canEnroll = OrderHelper.allowEnrollment(order);
+  const isFreeFromBatchOrder = OrderHelper.isFreeFromBatchOrder(order);
 
   if (!product) return null;
 
@@ -111,7 +112,7 @@ export const DashboardItemOrder = ({
                   </>
                 )}
               </div>
-              {!isNotResumable && showDetailsButton && (
+              {!isNotResumable && showDetailsButton && !isFreeFromBatchOrder && (
                 <RouterButton
                   size="small"
                   className="dashboard-item__button"
@@ -199,7 +200,9 @@ export const DashboardItemOrder = ({
           {showCertificate && !!product?.certificate_definition && (
             <CertificateItem order={order} product={product} />
           )}
-          {writable && <OrganizationBlock order={order} product={product} />}
+          {writable && !isFreeFromBatchOrder && (
+            <OrganizationBlock order={order} product={product} />
+          )}
         </>
       )}
     </div>

package/js/widgets/Dashboard/components/DashboardItem/Order/OrganizationBlock/index.tsx

@@ -2,6 +2,7 @@ import { defineMessages, FormattedMessage } from 'react-intl';
 import { Button } from '@openfun/cunningham-react';
 import { CredentialOrder, Product } from 'types/Joanie';
 import { AddressView } from 'components/Address';
+import { OrderHelper } from 'utils/OrderHelper';
 import ContractItem from '../ContractItem';
 import Installment from '../Installment';
 
@@ -64,6 +65,8 @@ const OrganizationBlock = ({ order, product }: Props) => {
     return null;
   }
 
+  const hidePaymentBlock =
+    OrderHelper.isFreeWithVoucher(order) || OrderHelper.isFreeFromBatchOrder(order);
   const showContactsBlock =
     organization.contact_email || organization.contact_phone || organization.dpo_email;
 
@@ -141,7 +144,7 @@ const OrganizationBlock = ({ order, product }: Props) => {
             </div>
           </div>
         )}
-        <Installment order={order} />
+        {!hidePaymentBlock && <Installment order={order} />}
       </div>
     </div>
   );

package/js/widgets/Dashboard/components/DashboardItem/Order/_styles.scss

@@ -170,3 +170,8 @@
     order: 1;
   }
 }
+
+.sub-item {
+  padding: 0.75rem;
+  font-size: 0.75rem;
+}

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

@@ -62,6 +62,34 @@
       @include media-breakpoint-down(sm) {
         margin-bottom: 0.5rem;
       }
+
+      &__badge {
+        padding: 0.25rem;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+
+      &__details {
+        display: flex;
+        flex-direction: column;
+        font-size: 1rem;
+        &__title {
+          font-weight: bold;
+          margin-top: 0.5rem;
+        }
+      }
+    }
+
+    &__information {
+      display: flex;
+      flex-direction: row;
+      gap: 0.25rem;
+      margin: 0 0.5rem;
+      text-align: center;
+      align-items: center;
+      align-content: center;
+      justify-content: center;
     }
   }
 
@@ -69,6 +97,11 @@
     justify-content: center;
     min-width: rem-calc(140px);
   }
+
+  &__label {
+    font-weight: bold;
+    margin-right: 0.25rem;
+  }
 }
 
 .dashboard-sub-item-list {
@@ -123,6 +156,16 @@
       overflow: hidden;
     }
   }
+
+  &__footer {
+    .content {
+      padding: 0.5rem 1rem;
+      font-size: 0.8rem;
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+    }
+  }
 }
 
 .dashboard-item__course-enrolling {

package/js/widgets/Dashboard/components/DashboardSidebar/components/AgreementNavLink/index.spec.tsx

@@ -0,0 +1,214 @@
+import { screen } from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+import { faker } from '@faker-js/faker';
+import queryString from 'query-string';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { PER_PAGE } from 'settings';
+import { ContractResourceQuery, ContractState } from 'types/Joanie';
+import { AgreementFactory } from 'utils/test/factories/joanie';
+import { AgreementActions } from 'utils/AbilitiesHelper/types';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { MenuLink } from '../..';
+import AgreementNavLink from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('<AgreementNavLink />', () => {
+  setupJoanieSession();
+
+  beforeEach(() => {
+    // useDefaultOrganization hook request organization list
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', []);
+  });
+
+  it('should render a AgreementNavLink with route and label when neither organizationId and offeringId are given', () => {
+    const link: MenuLink = {
+      to: '/dummy/url/',
+      label: 'My agreement navigation link',
+    };
+
+    render(<AgreementNavLink link={link} />);
+
+    expect(screen.getByRole('link', { name: 'My agreement navigation link' })).toBeInTheDocument();
+    expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+  });
+
+  describe('without sign ability', () => {
+    const agreementAbilities = { [AgreementActions.SIGN]: false };
+    it.each([
+      {
+        organizationId: faker.string.uuid(),
+        offeringId: undefined,
+      },
+      {
+        organizationId: faker.string.uuid(),
+        offeringId: faker.string.uuid(),
+      },
+      {
+        organizationId: undefined,
+        offeringId: faker.string.uuid(),
+      },
+      {
+        organizationId: undefined,
+        offeringId: undefined,
+      },
+    ])(
+      'should never render Badge for organizationId: $organizationId and offeringId: $offeringId',
+      async ({ organizationId, offeringId }) => {
+        let agreementQueryParams: ContractResourceQuery = {
+          signature_state: ContractState.LEARNER_SIGNED,
+          page: 1,
+          page_size: PER_PAGE.teacherContractList,
+        };
+        if (offeringId) {
+          agreementQueryParams = {
+            offering_id: offeringId,
+            ...agreementQueryParams,
+          };
+        }
+
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organizationId}/agreements/?${queryString.stringify(
+            agreementQueryParams,
+            { sort: false },
+          )}`,
+          {
+            count: 1,
+            next: null,
+            previous: null,
+            results: [AgreementFactory({ abilities: agreementAbilities }).one()],
+          },
+        );
+
+        render(
+          <AgreementNavLink
+            link={{
+              to: '/dummy/url/',
+              label: 'My agreement navigation link',
+            }}
+            organizationId={organizationId}
+            offeringId={offeringId}
+          />,
+        );
+
+        expect(
+          screen.getByRole('link', { name: 'My agreement navigation link' }),
+        ).toBeInTheDocument();
+        expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+      },
+    );
+  });
+
+  describe('with sign ability', () => {
+    const agreementAbilities = { [AgreementActions.SIGN]: true };
+    it.each([
+      // with 1 agreements to sign
+      {
+        organizationId: faker.string.uuid(),
+        offeringId: undefined,
+        nbAgreementsToSign: 1,
+        expectedBadgeCount: 1,
+      },
+      {
+        organizationId: faker.string.uuid(),
+        offeringId: faker.string.uuid(),
+        nbAgreementsToSign: 1,
+        expectedBadgeCount: 1,
+      },
+      {
+        organizationId: undefined,
+        offeringId: faker.string.uuid(),
+        nbAgreementsToSign: 1,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: undefined,
+        offeringId: undefined,
+        nbAgreementsToSign: 1,
+        expectedBadgeCount: undefined,
+      },
+
+      // with 0 agreements to sign
+      {
+        organizationId: faker.string.uuid(),
+        offeringId: undefined,
+        nbAgreementsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: faker.string.uuid(),
+        offeringId: faker.string.uuid(),
+        nbAgreementsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: undefined,
+        offeringId: faker.string.uuid(),
+        nbAgreementsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: undefined,
+        offeringId: undefined,
+        nbAgreementsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+    ])(
+      'should render Badge (count: $expectedBadgeCount) for nb agreements to sign: $nbAgreementsToSign, organizationId: $organizationId and offeringId: $offeringId',
+      async ({ nbAgreementsToSign, organizationId, offeringId, expectedBadgeCount }) => {
+        let agreementQueryParams: ContractResourceQuery = {
+          signature_state: ContractState.LEARNER_SIGNED,
+          page: 1,
+          page_size: PER_PAGE.teacherContractList,
+        };
+        if (offeringId) {
+          agreementQueryParams = {
+            offering_id: offeringId,
+            ...agreementQueryParams,
+          };
+        }
+
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organizationId}/agreements/?${queryString.stringify(
+            agreementQueryParams,
+            { sort: false },
+          )}`,
+          {
+            count: nbAgreementsToSign,
+            next: null,
+            previous: null,
+            results: [AgreementFactory({ abilities: agreementAbilities }).one()],
+          },
+        );
+        render(
+          <AgreementNavLink
+            link={{
+              to: '/dummy/url/',
+              label: 'My agreement navigation link',
+            }}
+            organizationId={organizationId}
+            offeringId={offeringId}
+          />,
+        );
+
+        expect(
+          screen.getByRole('link', { name: 'My agreement navigation link' }),
+        ).toBeInTheDocument();
+        if (expectedBadgeCount === undefined) {
+          expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+        } else {
+          const $badge = await screen.findByTestId('badge');
+          expect($badge).toBeInTheDocument();
+          expect($badge).toHaveTextContent(`${expectedBadgeCount}`);
+        }
+      },
+    );
+  });
+});

package/js/widgets/Dashboard/components/DashboardSidebar/components/AgreementNavLink/index.tsx

@@ -0,0 +1,47 @@
+import { createSearchParams } from 'react-router';
+import { useMemo } from 'react';
+import { MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
+import { ContractState, Offering, Organization } from 'types/Joanie';
+import { AgreementActions } from 'utils/AbilitiesHelper/types';
+import useDefaultOrganizationId from 'hooks/useDefaultOrganizationId';
+import useAgreementAbilities from 'pages/TeacherDashboardOrganizationAgreements/hooks/useAgreementsAbilities';
+import useTeacherPendingAgreementsCount from 'hooks/useTeacherPendingAgreementsCount';
+import MenuNavLink from '../MenuNavLink';
+
+interface AgreementNavLinkProps {
+  link: MenuLink;
+  organizationId?: Organization['id'];
+  offeringId?: Offering['id'];
+}
+
+const AgreementNavLink = ({ link, organizationId, offeringId }: AgreementNavLinkProps) => {
+  const defaultOrganizationId = useDefaultOrganizationId();
+  const { agreements: pendingAgreements, pendingAgreementCount } = useTeacherPendingAgreementsCount(
+    {
+      organizationId: organizationId || defaultOrganizationId,
+      offeringId,
+    },
+  );
+  const agreementAbilities = useAgreementAbilities(pendingAgreements);
+  const canSignAgreements = agreementAbilities.can(AgreementActions.SIGN);
+  const hasAgreementsToSign = useMemo(
+    () => canSignAgreements && pendingAgreementCount > 0,
+    [canSignAgreements, pendingAgreementCount],
+  );
+  const searchParams = useMemo(() => {
+    if (hasAgreementsToSign) {
+      return createSearchParams({ signature_state: ContractState.LEARNER_SIGNED });
+    }
+
+    return createSearchParams({ signature_state: ContractState.SIGNED });
+  }, [hasAgreementsToSign]);
+
+  return (
+    <MenuNavLink
+      link={{ ...link, to: `${link.to}?${searchParams.toString()}` }}
+      badgeCount={hasAgreementsToSign ? pendingAgreementCount : undefined}
+    />
+  );
+};
+
+export default AgreementNavLink;

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

@@ -37,6 +37,7 @@ export const LearnerDashboardSidebar = (props: Partial<DashboardSidebarProps>) =
         LearnerDashboardPaths.CERTIFICATES,
         LearnerDashboardPaths.CONTRACTS,
         LearnerDashboardPaths.PREFERENCES,
+        LearnerDashboardPaths.BATCH_ORDERS,
       ].map((path) => ({
         to: generatePath(path),
         label: getRouteLabel(path),

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

@@ -34,6 +34,12 @@ describe('<TeacherDashboardOrganizationSidebar />', () => {
         `/contracts/?signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
       { results: [], count: 0, previous: null, next: null },
     );
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/organizations/' +
+        organization.id +
+        `/agreements/?signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
+      { results: [], count: 0, previous: null, next: null },
+    );
 
     render(<TeacherDashboardOrganizationSidebar />, {
       routerOptions: { path: '/:organizationId', initialEntries: [`/${organization.id}`] },
@@ -50,9 +56,11 @@ describe('<TeacherDashboardOrganizationSidebar />', () => {
 
     // It should display menu links
     const links = screen.getAllByRole('link');
-    expect(links).toHaveLength(2);
+    expect(links).toHaveLength(4);
     expect(links[0]).toHaveTextContent('Courses');
     expect(links[1]).toHaveTextContent('Contracts');
+    expect(links[2]).toHaveTextContent('Quotes');
+    expect(links[3]).toHaveTextContent('Agreements');
     // No badge should be displayed next to contract link
     expect(links[1].nextSibling).toBeNull();
   });
@@ -76,6 +84,12 @@ describe('<TeacherDashboardOrganizationSidebar />', () => {
         next: null,
       },
     );
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/organizations/' +
+        organization.id +
+        `/agreements/?signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
+      { results: [], count: 0, previous: null, next: null },
+    );
 
     render(<TeacherDashboardOrganizationSidebar />, {
       routerOptions: { path: '/:organizationId', initialEntries: [`/${organization.id}`] },
@@ -108,10 +122,14 @@ describe('<TeacherDashboardOrganizationSidebar />', () => {
       {
         results: ContractFactory({ abilities: { sign: false } }).many(contractToSignCount),
         count: contractToSignCount,
-        previous: null,
-        next: null,
       },
     );
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/organizations/' +
+        organization.id +
+        `/agreements/?signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
+      { results: [], count: 0, previous: null, next: null },
+    );
 
     render(<TeacherDashboardOrganizationSidebar />, {
       routerOptions: { path: '/:organizationId', initialEntries: [`/${organization.id}`] },

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

@@ -7,6 +7,7 @@ import { getDashboardRouteLabel } from 'widgets/Dashboard/utils/dashboardRoutes'
 import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherDashboardPaths';
 import { DashboardAvatar, DashboardAvatarVariantEnum } from '../DashboardAvatar';
 import ContractNavLink from '../DashboardSidebar/components/ContractNavLink';
+import AgreementNavLink from '../DashboardSidebar/components/AgreementNavLink';
 
 const messages = defineMessages({
   subHeader: {
@@ -47,12 +48,20 @@ export const TeacherDashboardOrganizationSidebar = () => {
       );
     }
 
+    if (basePath === TeacherDashboardPaths.ORGANIZATION_AGREEMENTS) {
+      menuLink.component = (
+        <AgreementNavLink link={menuLink} organizationId={organizationId} offeringId={offeringId} />
+      );
+    }
+
     return menuLink;
   };
 
   const links = [
     TeacherDashboardPaths.ORGANIZATION_COURSES,
     TeacherDashboardPaths.ORGANIZATION_CONTRACTS,
+    TeacherDashboardPaths.ORGANIZATION_QUOTES,
+    TeacherDashboardPaths.ORGANIZATION_AGREEMENTS,
   ].map(getMenuLinkFromPath);
 
   if (fetching) {