🚚(frontend) move DashboardItemOrder

DashboardItemOrder is the content of order's detail page. Let's move it where it belong.
openfun · Dec 21, 2023 · e11a982 · e11a982
1 parent 0712724
commit e11a982
Show file tree

Hide file tree

Showing 13 changed files with 69 additions and 52 deletions.
diff --git a/src/frontend/js/pages/DashboardCourses/components/OrderListItem/index.tsx b/src/frontend/js/pages/DashboardCourses/components/OrderListItem/index.tsx
@@ -0,0 +1,14 @@
+import {
+  OrderDetails,
+  OrderDetailsProps,
+} from 'pages/DashboardOrderLayout/components/OrderDetails';
+
+interface OrderListItemProps extends OrderDetailsProps {}
+
+// TODO: For now this component is an alias of OrderDetails
+// extract the list part of it here.
+const OrderListItem = (props: OrderListItemProps) => {
+  return <OrderDetails {...props} />;
+};
+
+export default OrderListItem;
diff --git a/src/frontend/js/pages/DashboardCourses/index.tsx b/src/frontend/js/pages/DashboardCourses/index.tsx
@@ -8,10 +8,10 @@ import {
 } from 'pages/DashboardCourses/useOrdersEnrollments';
 import { Spinner } from 'components/Spinner';
 import { DashboardItemEnrollment } from 'widgets/Dashboard/components/DashboardItem/Enrollment/DashboardItemEnrollment';
-import { DashboardItemOrder } from 'widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder';
 import Banner, { BannerType } from 'components/Banner';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 import { OrderState, ProductType } from 'types/Joanie';
+import OrderListItem from './components/OrderListItem';
 
 const messages = defineMessages({
   loading: {
@@ -63,7 +63,7 @@ export const DashboardCourses = () => {
                 data-testid="order-enrollment-list-item"
               >
                 {isEnrollment(datum) && <DashboardItemEnrollment enrollment={datum} />}
-                {isCredentialOrder(datum) && <DashboardItemOrder order={datum} />}
+                {isCredentialOrder(datum) && <OrderListItem order={datum} />}
               </div>
             ))}
           </div>

diff --git a/...Order/DashboardItemOrderContract.spec.tsx → ...components/OrderDetails/Contract.spec.tsx b/...Order/DashboardItemOrderContract.spec.tsx → ...components/OrderDetails/Contract.spec.tsx
@@ -42,7 +42,7 @@ jest.mock('settings', () => ({
   CONTRACT_SETTINGS: { dummySignatureSignTimeout: 0 },
 }));
 
-describe('<DashboardItemOrder/> Contract', () => {
+describe('<OrderDetails/> Contract', () => {
   const Wrapper = (route: string) => {
     return (
       <QueryClientProvider client={createTestQueryClient({ user: true })}>

diff --git a/...rContract.useUnionResource.cache.spec.tsx → .../Contract.useUnionResource.cache.spec.tsx b/...rContract.useUnionResource.cache.spec.tsx → .../Contract.useUnionResource.cache.spec.tsx
@@ -34,7 +34,7 @@ jest.mock('hooks/useIntersectionObserver', () => ({
   },
 }));
 
-describe('<DashboardItemOrder/> Contract', () => {
+describe('<OrderDetails/> testing contract', () => {
   const Wrapper = (route: string) => {
     return (
       <QueryClientProvider client={createTestQueryClient({ user: true })}>

diff --git a/...mponents/DashboardItem/Order/_styles.scss → ...yout/components/OrderDetails/_styles.scss b/...mponents/DashboardItem/Order/_styles.scss → ...yout/components/OrderDetails/_styles.scss
diff --git a/...er/DashboardItemOrderReadonly.stories.tsx → ...s/OrderDetails/index.Readonly.stories.tsx b/...er/DashboardItemOrderReadonly.stories.tsx → ...s/OrderDetails/index.Readonly.stories.tsx
@@ -3,21 +3,22 @@ import { createMemoryRouter, RouterProvider } from 'react-router-dom';
 import { CredentialOrder, OrderState, Product, TargetCourse } from 'types/Joanie';
 import {
   CredentialOrderFactory,
+  EnrollmentFactory,
   ProductFactory,
   TargetCourseFactory,
 } from 'utils/test/factories/joanie';
 import { QueryStateFactory } from 'utils/test/factories/reactQuery';
 import { StorybookHelper } from 'utils/StorybookHelper';
-import { enrollment } from '../stories.mock';
-import { DashboardItemOrder } from './DashboardItemOrder';
+import { OrderDetails } from '.';
 
 const order: CredentialOrder = CredentialOrderFactory({ target_courses: [] }).one();
 const product: Product = ProductFactory().one();
 const targetsCourses: TargetCourse[] = TargetCourseFactory().many(3);
+const enrollment = EnrollmentFactory().one();
 
 export default {
   title: 'Widgets/Dashboard/Order/Readonly',
-  component: DashboardItemOrder,
+  component: OrderDetails,
   parameters: {
     docs: {
       source: {
@@ -31,7 +32,7 @@ export default {
         router={createMemoryRouter([
           {
             index: true,
-            element: <DashboardItemOrder {...args} />,
+            element: <OrderDetails {...args} />,
           },
         ])}
       />,
@@ -41,9 +42,9 @@ export default {
         },
       },
     ),
-} as Meta<typeof DashboardItemOrder>;
+} as Meta<typeof OrderDetails>;
 
-type Story = StoryObj<typeof DashboardItemOrder>;
+type Story = StoryObj<typeof OrderDetails>;
 
 export const StateOther: Story = {
   args: {

diff --git a/...ardItem/Order/DashboardItemOrder.spec.tsx → ...ut/components/OrderDetails/index.spec.tsx b/...ardItem/Order/DashboardItemOrder.spec.tsx → ...ut/components/OrderDetails/index.spec.tsx
@@ -38,9 +38,9 @@ import { Deferred } from 'utils/test/deferred';
 import { expectBreadcrumbsToEqualParts } from 'utils/test/expectBreadcrumbsToEqualParts';
 import { mockCourseProductWithOrder } from 'utils/test/mockCourseProductWithOrder';
 import { HttpStatusCode } from 'utils/errors/HttpError';
-import { LearnerDashboardPaths } from '../../../utils/learnerRouteMessages';
-import { DashboardTest } from '../../DashboardTest';
-import { DashboardItemOrder } from './DashboardItemOrder';
+import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
+import { OrderDetails } from '.';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -54,7 +54,7 @@ jest.mock('utils/indirection/window', () => ({
   confirm: jest.fn(() => true),
 }));
 
-describe('<DashboardItemOrder/>', () => {
+describe('<OrderDetails/>', () => {
   const wrapper = ({ children }: PropsWithChildren) => {
     const router = createMemoryRouter([{ index: true, element: children }]);
     return (
@@ -68,6 +68,7 @@ describe('<DashboardItemOrder/>', () => {
     );
   };
   const WrapperWithDashboard = (route: string) => {
+    // FIXME: remove routing logic from this test
     return (
       <QueryClientProvider client={createTestQueryClient({ user: true })}>
         <IntlProvider locale="en">
@@ -107,7 +108,7 @@ describe('<DashboardItemOrder/>', () => {
     order.target_courses = [];
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} />, { wrapper });
+    render(<OrderDetails order={order} />, { wrapper });
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -135,7 +136,7 @@ describe('<DashboardItemOrder/>', () => {
       deferred.promise,
     );
 
-    render(<DashboardItemOrder order={order} showCertificate={true} />, { wrapper });
+    render(<OrderDetails order={order} showCertificate={true} />, { wrapper });
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -154,7 +155,7 @@ describe('<DashboardItemOrder/>', () => {
     order.target_courses = [];
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} />, { wrapper });
+    render(<OrderDetails order={order} />, { wrapper });
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -172,7 +173,7 @@ describe('<DashboardItemOrder/>', () => {
     order.target_courses = [];
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} />, { wrapper });
+    render(<OrderDetails order={order} />, { wrapper });
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -184,7 +185,7 @@ describe('<DashboardItemOrder/>', () => {
     const order: CredentialOrder = CredentialOrderFactory().one();
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} />, { wrapper });
+    render(<OrderDetails order={order} />, { wrapper });
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -208,7 +209,7 @@ describe('<DashboardItemOrder/>', () => {
 
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} />, { wrapper });
+    render(<OrderDetails order={order} />, { wrapper });
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -236,7 +237,7 @@ describe('<DashboardItemOrder/>', () => {
 
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} />, { wrapper });
+    render(<OrderDetails order={order} />, { wrapper });
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     screen.getByText('Ref. ' + (order.course as CourseLight).code);
@@ -257,7 +258,7 @@ describe('<DashboardItemOrder/>', () => {
     order.target_courses = [];
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
+    render(<OrderDetails order={order} writable={true} showDetailsButton={false} />, {
       wrapper,
     });
 
@@ -278,7 +279,7 @@ describe('<DashboardItemOrder/>', () => {
 
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
+    render(<OrderDetails order={order} writable={true} showDetailsButton={false} />, {
       wrapper,
     });
 
@@ -705,7 +706,7 @@ describe('<DashboardItemOrder/>', () => {
     }).one();
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
+    render(<OrderDetails order={order} writable={true} showDetailsButton={false} />, {
       wrapper,
     });
 
@@ -741,7 +742,7 @@ describe('<DashboardItemOrder/>', () => {
 
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
+    render(<OrderDetails order={order} writable={true} showDetailsButton={false} />, {
       wrapper,
     });
 
@@ -771,7 +772,7 @@ describe('<DashboardItemOrder/>', () => {
 
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
+    render(<OrderDetails order={order} writable={true} showDetailsButton={false} />, {
       wrapper,
     });
 

diff --git a/...ashboardItem/Order/DashboardItemOrder.tsx → ...rLayout/components/OrderDetails/index.tsx b/...ashboardItem/Order/DashboardItemOrder.tsx → ...rLayout/components/OrderDetails/index.tsx
@@ -13,37 +13,37 @@ import { useCourseProduct } from 'hooks/useCourseProducts';
 import { orderNeedsSignature } from 'widgets/Dashboard/components/DashboardItem/utils/order';
 
 import OrderStatus from 'widgets/Dashboard/components/OrderStatus';
-import { DashboardSubItemsList } from '../DashboardSubItemsList';
-import { DashboardItemCourseEnrolling } from '../DashboardItemCourseEnrolling';
-import { DashboardItem } from '../index';
-import { DashboardItemContract } from '../Contract';
+import { DashboardItemContract } from 'widgets/Dashboard/components/DashboardItem/Contract';
+import { DashboardItem } from 'widgets/Dashboard/components/DashboardItem';
+import { DashboardSubItemsList } from 'widgets/Dashboard/components/DashboardItem/DashboardSubItemsList';
+import { DashboardItemCourseEnrolling } from 'widgets/Dashboard/components/DashboardItem/DashboardItemCourseEnrolling';
 
 const messages = {
   accessCourse: {
-    id: 'components.DashboardItemOrder.gotoCourse',
+    id: 'components.OrderDetails.gotoCourse',
     description: 'Button that redirects to the order details',
     defaultMessage: 'View details',
   },
   loadingCertificate: {
-    id: 'components.DashboardItemOrder.loadingCertificate',
+    id: 'components.OrderDetails.loadingCertificate',
     description: 'Accessible label displayed while certificate is being fetched on the dashboard.',
     defaultMessage: 'Loading certificate...',
   },
 };
 
-interface DashboardItemOrderProps {
+export interface OrderDetailsProps {
   order: CredentialOrder;
   showDetailsButton?: boolean;
   showCertificate?: boolean;
   writable?: boolean;
 }
 
-interface DashboardItemOrderCertificateProps {
+interface OrderDetailsCertificateProps {
   order: CredentialOrder;
   product: Product;
 }
 
-const DashboardItemOrderCertificate = ({ order, product }: DashboardItemOrderCertificateProps) => {
+const OrderDetailsCertificate = ({ order, product }: OrderDetailsCertificateProps) => {
   if (!order.certificate_id) {
     return (
       <DashboardItemCertificate
@@ -74,12 +74,12 @@ const DashboardItemOrderCertificate = ({ order, product }: DashboardItemOrderCer
   );
 };
 
-export const DashboardItemOrder = ({
+export const OrderDetails = ({
   order,
   showDetailsButton = true,
   showCertificate,
   writable = false,
-}: DashboardItemOrderProps) => {
+}: OrderDetailsProps) => {
   const course = order.course as CourseLight;
 
   const intl = useIntl();
@@ -95,7 +95,7 @@ export const DashboardItemOrder = ({
     <div className="dashboard-item-order">
       {writable && needsSignature && (
         <DashboardItemContract
-          key={`DashboardItemOrderContract_${order.id}`}
+          key={`OrderDetailsContract_${order.id}`}
           title={product.title}
           order={order}
           contract_definition={product.contract_definition!}
@@ -129,7 +129,7 @@ export const DashboardItemOrder = ({
             </div>
             {!writable && needsSignature && (
               <DashboardItemContract
-                key={`DashboardItemOrderContract_${order.id}`}
+                key={`OrderDetailsContract_${order.id}`}
                 title={product.title}
                 order={order}
                 contract_definition={product.contract_definition!}
@@ -166,11 +166,11 @@ export const DashboardItemOrder = ({
         />
       </DashboardItem>
       {showCertificate && !!product?.certificate_definition && (
-        <DashboardItemOrderCertificate order={order} product={product} />
+        <OrderDetailsCertificate order={order} product={product} />
       )}
       {writable && isCourseProductRelationFetched && order.contract?.student_signed_on && (
         <DashboardItemContract
-          key={`DashboardItemOrderContract_${order.id}`}
+          key={`OrderDetailsContract_${order.id}`}
           title={product.title}
           order={order}
           contract_definition={product.contract_definition!}

diff --git a/...er/DashboardItemOrderWritable.stories.tsx → ...s/OrderDetails/index.writable.stories.tsx b/...er/DashboardItemOrderWritable.stories.tsx → ...s/OrderDetails/index.writable.stories.tsx
@@ -3,20 +3,21 @@ import { CredentialOrder, OrderState, Product, TargetCourse } from 'types/Joanie
 import { QueryStateFactory } from 'utils/test/factories/reactQuery';
 import {
   CredentialOrderFactory,
+  EnrollmentFactory,
   ProductFactory,
   TargetCourseFactory,
 } from 'utils/test/factories/joanie';
 import { StorybookHelper } from 'utils/StorybookHelper';
-import { enrollment } from '../stories.mock';
-import { DashboardItemOrder } from './DashboardItemOrder';
+import { OrderDetails } from '.';
 
 const order: CredentialOrder = CredentialOrderFactory({ target_courses: [] }).one();
 const product: Product = ProductFactory().one();
 const targetsCourses: TargetCourse[] = TargetCourseFactory().many(3);
+const enrollment = EnrollmentFactory().one();
 
 export default {
   title: 'Widgets/Dashboard/Order/Writable',
-  component: DashboardItemOrder,
+  component: OrderDetails,
   parameters: {
     docs: {
       source: {
@@ -25,14 +26,14 @@ export default {
     },
   },
   render: (args) =>
-    StorybookHelper.wrapInApp(<DashboardItemOrder {...args} />, {
+    StorybookHelper.wrapInApp(<OrderDetails {...args} />, {
       queriesCallback: (queries) => {
         queries.push(QueryStateFactory(['product', order.product_id], { data: product }));
       },
     }),
-} as Meta<typeof DashboardItemOrder>;
+} as Meta<typeof OrderDetails>;
 
-type Story = StoryObj<typeof DashboardItemOrder>;
+type Story = StoryObj<typeof OrderDetails>;
 
 export const StateOther: Story = {
   args: {

diff --git a/...ntend/js/widgets/Dashboard/components/DashboardItem/DashboardItemCourseEnrolling.spec.tsx b/...ntend/js/widgets/Dashboard/components/DashboardItem/DashboardItemCourseEnrolling.spec.tsx
@@ -9,7 +9,7 @@ import { Enrolled } from './DashboardItemCourseEnrolling';
 
 /**
  * Most of the component of this file are tested from DashboardItemEnrollment.spec.tsx and
- * DashboardItemOrder.spec.tsx. But here are some tests that are more straightforward.
+ * OrderDetails.spec.tsx. But here are some tests that are more straightforward.
  */
 describe('<Enrolled/>', () => {
   const wrapper = ({ children }: PropsWithChildren) => {