richie-education 3.5.1-dev2 → 3.5.2-dev12

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

@@ -1,10 +1,12 @@
-import { defineMessages, FormattedMessage } from 'react-intl';
-import { Button } from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Button, useModal } from '@openfun/cunningham-react';
 import { CredentialOrder, Product } from 'types/Joanie';
 import { AddressView } from 'components/Address';
 import { OrderHelper } from 'utils/OrderHelper';
+import useDateFormat, { DATETIME_FORMAT } from 'hooks/useDateFormat';
 import ContractItem from '../ContractItem';
 import Installment from '../Installment';
+import { OrderWithdrawalModal } from '../OrderWithdrawalModal';
 
 const messages = defineMessages({
   contactDescription: {
@@ -52,6 +54,31 @@ const messages = defineMessages({
     description: 'Subtitle for the organization contacts section',
     defaultMessage: 'Contacts',
   },
+  withdrawalTitle: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.withdrawalTitle',
+    description: 'Title of the withdrawal block',
+    defaultMessage: 'Withdrawal',
+  },
+  withdrawalDescription: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.withdrawalDescription',
+    description: 'Description of the withdrawal block',
+    defaultMessage: 'You can withdraw from your contract until {date}.',
+  },
+  withdrawalButton: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.withdrawalButton',
+    description: 'Button label of the withdrawal block',
+    defaultMessage: 'Withdraw',
+  },
+  withdrawnTitle: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.withdrawnTitle',
+    description: 'Title of the withdrawal block once the withdrawal is confirmed',
+    defaultMessage: 'Withdrawn',
+  },
+  withdrawnDescription: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.withdrawnDescription',
+    description: 'Description shown once the withdrawal is confirmed',
+    defaultMessage: 'You withdrew from this order on {date}.',
+  },
 });
 
 type Props = {
@@ -148,7 +175,62 @@ const OrganizationBlock = ({ order, product }: Props) => {
           </div>
         )}
         {!hidePaymentBlock && <Installment order={order} />}
+        {order.eligible_to_withdraw && <Withdrawal order={order} product={product} />}
+        {OrderHelper.isWithdrawn(order) && <WithdrawnStatus order={order} />}
+      </div>
+    </div>
+  );
+};
+
+const Withdrawal = ({ order, product }: Props) => {
+  const intl = useIntl();
+  const formatDate = useDateFormat(DATETIME_FORMAT);
+  const modal = useModal();
+
+  return (
+    <div data-testid="dashboard-item-withdrawal" className="dashboard-splitted-card__item">
+      <div className="dashboard-splitted-card__item__title">
+        <span>
+          <FormattedMessage {...messages.withdrawalTitle} />
+        </span>
+      </div>
+      <p className="dashboard-splitted-card__item__description">
+        <FormattedMessage
+          {...messages.withdrawalDescription}
+          values={{ date: formatDate(order.withdrawal_date_limit) }}
+        />
+      </p>
+      <div className="dashboard-splitted-card__item__actions">
+        <Button size="small" color="brand" variant="secondary" onClick={modal.open}>
+          {intl.formatMessage(messages.withdrawalButton)}
+        </Button>
+      </div>
+      <OrderWithdrawalModal
+        {...modal}
+        order={order}
+        productTitle={product.title}
+        reference={order.course.code}
+      />
+    </div>
+  );
+};
+
+const WithdrawnStatus = ({ order }: { order: CredentialOrder }) => {
+  const formatDate = useDateFormat(DATETIME_FORMAT);
+
+  return (
+    <div data-testid="dashboard-item-withdrawn" className="dashboard-splitted-card__item">
+      <div className="dashboard-splitted-card__item__title">
+        <span>
+          <FormattedMessage {...messages.withdrawnTitle} />
+        </span>
       </div>
+      <p className="dashboard-splitted-card__item__description">
+        <FormattedMessage
+          {...messages.withdrawnDescription}
+          values={{ date: formatDate(order.withdrawn_confirmation_at) }}
+        />
+      </p>
     </div>
   );
 };

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

@@ -157,6 +157,11 @@
   }
 }
 
+.order-withdrawal-modal__account-link {
+  color: inherit;
+  text-decoration: underline;
+}
+
 .order-organization {
   &__caption {
     order: 3;

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

@@ -56,7 +56,9 @@
 
     &__status {
       display: flex;
-      align-items: center;
+      // flex-start (not center) so the icon stays aligned with the first line
+      // of text when the text wraps onto several lines.
+      align-items: flex-start;
       gap: 0.5rem;
 
       @include media-breakpoint-down(sm) {
@@ -179,6 +181,7 @@
     justify-content: space-between;
     padding: 0.5rem 1rem;
     min-height: 3.75rem;
+    border-top: $onepixel solid r-theme-val(dashboard-item, base-border);
 
     &:first-child {
       border-top: 0;
@@ -201,6 +204,11 @@
     p {
       margin: 0;
     }
+
+    &__withdrawal__button {
+      text-decoration: underline;
+      white-space: nowrap;
+    }
   }
 
   &__runs {

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

@@ -52,7 +52,6 @@ describe('<Dashboard />', () => {
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/orders/' +
         '?product_type=credential' +
-        '&state_exclude=canceled' +
         '&state_exclude=refunding' +
         '&state_exclude=refunded' +
         '&page=1' +

package/package.json

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

package/scss/components/templates/courses/cms/_category_list.scss

@@ -8,4 +8,9 @@
   @if $body-padding-fix {
     @include content-padding-fix($gutter: 2rem);
   }
+
+  &__maincontent {
+    width: 100%;
+    padding: 0 $grid-gutter-width 1rem;
+  }
 }