chore: manage 'no tracking details' scenario

commercelayer · Aug 17, 2023 · d7fb240 · d7fb240
1 parent 5e2c9ef
commit d7fb240
Show file tree

Hide file tree

Showing 8 changed files with 275 additions and 87 deletions.
diff --git a/packages/app-elements/src/ui/atoms/Steps.test.tsx b/packages/app-elements/src/ui/atoms/Steps.test.tsx
@@ -0,0 +1,86 @@
+import { render } from '@testing-library/react'
+import { Steps } from './Steps'
+
+describe('Steps', () => {
+  it('Should be rendered', () => {
+    const { container } = render(
+      <Steps
+        steps={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
+      />
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('Should render as many `li` as many steps are provided', () => {
+    const { getByRole } = render(
+      <Steps
+        steps={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
+      />
+    )
+
+    expect(getByRole('list').children.length).toEqual(3)
+    expect(getByRole('list').children[0].textContent).toEqual('Step 1')
+    expect(getByRole('list').children[1].textContent).toEqual('Step 2')
+    expect(getByRole('list').children[2].textContent).toEqual('Step 3')
+  })
+
+  it('Should highlight all non "active" steps', () => {
+    const { getByText } = render(
+      <Steps
+        steps={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
+      />
+    )
+
+    expect(getByText('Step 1').previousSibling).toHaveClass('bg-gray-100')
+    expect(getByText('Step 2').previousSibling).toHaveClass('bg-gray-100')
+    expect(getByText('Step 3').previousSibling).toHaveClass('bg-gray-100')
+  })
+
+  it('Should highlight the "active" steps', () => {
+    const { getByText } = render(
+      <Steps
+        steps={[
+          { label: 'Step 1', active: true },
+          { label: 'Step 2', active: true },
+          { label: 'Step 3' }
+        ]}
+      />
+    )
+
+    expect(getByText('Step 1').previousSibling).toHaveClass('bg-primary')
+    expect(getByText('Step 1').previousSibling).not.toHaveClass(
+      'after:bg-white'
+    )
+    expect(getByText('Step 2').previousSibling).toHaveClass(
+      'bg-primary after:bg-white'
+    )
+    expect(getByText('Step 3').previousSibling).toHaveClass('bg-gray-100')
+    expect(getByText('Step 3').previousSibling).not.toHaveClass(
+      'after:bg-white'
+    )
+  })
+
+  it('Should mark as "active" all previous step from the latest "active"', () => {
+    const { getByText } = render(
+      <Steps
+        steps={[
+          { label: 'Step 1' },
+          { label: 'Step 2', active: true },
+          { label: 'Step 3' }
+        ]}
+      />
+    )
+
+    expect(getByText('Step 1').previousSibling).toHaveClass('bg-primary')
+    expect(getByText('Step 1').previousSibling).not.toHaveClass(
+      'after:bg-white'
+    )
+    expect(getByText('Step 2').previousSibling).toHaveClass(
+      'bg-primary after:bg-white'
+    )
+    expect(getByText('Step 3').previousSibling).toHaveClass('bg-gray-100')
+    expect(getByText('Step 3').previousSibling).not.toHaveClass(
+      'after:bg-white'
+    )
+  })
+})
diff --git a/packages/app-elements/src/ui/atoms/Steps.tsx b/packages/app-elements/src/ui/atoms/Steps.tsx
@@ -1,4 +1,5 @@
 import cn from 'classnames'
+import { useCallback, useMemo } from 'react'
 
 interface Step {
   label: string
@@ -10,18 +11,24 @@ interface Props {
 }
 
 export const Steps: React.FC<Props> = ({ steps }) => {
-  const lastActiveIndex = steps.findLastIndex((step) => step.active === true)
+  const lastActiveIndex = useMemo(
+    () => steps.findLastIndex((step) => step.active === true),
+    [steps]
+  )
 
-  const fixActive = (step: Step, index: number): Step => {
-    if (index < lastActiveIndex) {
-      return {
-        ...step,
-        active: true
+  const fixActive = useCallback(
+    (step: Step, index: number): Step => {
+      if (index < lastActiveIndex) {
+        return {
+          ...step,
+          active: true
+        }
       }
-    }
 
-    return step
-  }
+      return step
+    },
+    [lastActiveIndex]
+  )
 
   return (
     <ul
@@ -37,14 +44,15 @@ export const Steps: React.FC<Props> = ({ steps }) => {
       )}
     >
       {steps.map(fixActive).map((step, index) => {
+        const position =
+          index === 0 ? 'first' : index === steps.length - 1 ? 'last' : 'other'
+
         const activePosition =
           index < lastActiveIndex
             ? 'before'
             : index === lastActiveIndex
             ? 'active'
             : 'after'
-        const position =
-          index === 0 ? 'first' : index === steps.length - 1 ? 'last' : 'other'
 
         return (
           <li

diff --git a/packages/app-elements/src/ui/atoms/__snapshots__/Steps.test.tsx.snap b/packages/app-elements/src/ui/atoms/__snapshots__/Steps.test.tsx.snap
@@ -0,0 +1,46 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Steps > Should be rendered 1`] = `
+<div>
+  <ul
+    class="flex justify-between text-xs w-full items-center rounded h-2 mb-8 bg-gradient-to-r from-gray-100 from-50% to-primary to-50% bg-[length:200%]"
+  >
+    <li
+      class="relative text-gray-300 font-semibold"
+    >
+      <div
+        class="w-6 h-6 rounded-full flex justify-center items-center bg-gray-100"
+      />
+      <div
+        class="absolute whitespace-nowrap mt-1 translate-x-0"
+      >
+        Step 1
+      </div>
+    </li>
+    <li
+      class="relative text-gray-300 font-semibold"
+    >
+      <div
+        class="w-6 h-6 rounded-full flex justify-center items-center bg-gray-100"
+      />
+      <div
+        class="absolute whitespace-nowrap mt-1 translate-x-[calc(-50%+12px)]"
+      >
+        Step 2
+      </div>
+    </li>
+    <li
+      class="relative text-gray-300 font-semibold"
+    >
+      <div
+        class="w-6 h-6 rounded-full flex justify-center items-center bg-gray-100"
+      />
+      <div
+        class="absolute whitespace-nowrap mt-1 right-0"
+      >
+        Step 3
+      </div>
+    </li>
+  </ul>
+</div>
+`;
diff --git a/packages/app-elements/src/ui/resources/LineItems.tsx b/packages/app-elements/src/ui/resources/LineItems.tsx
@@ -171,7 +171,7 @@ export const LineItems = withSkeletonTemplate<{
                     )}
                   </td>
                   <td
-                    className={cn('pl-4 h-full', {
+                    className={cn('pl-4', {
                       'pt-6': size === 'normal',
                       'pt-4': size === 'small'
                     })}

diff --git a/packages/app-elements/src/ui/resources/ShipmentParcels.mocks.tsx b/packages/app-elements/src/ui/resources/ShipmentParcels.mocks.tsx
@@ -295,6 +295,24 @@ export const parcelWithTracking3 = createParcel({
   trackingNumber: '65345234RWQ1111'
 })
 
+export const parcelWithoutTrackingDetails1 = createParcel({
+  id: 'parcel-without-tracking-details-1',
+  weight: 80,
+  package: {
+    name: 'Standard Box #1'
+  },
+  lineItems: [
+    {
+      code: 'BASEBHAT000000FFFFFFXXXX',
+      name: 'Black Baseball Hat with White Logo',
+      quantity: 1
+    }
+  ],
+  shippingLabelUrl: 'https://example.com',
+  trackingDetails: [],
+  trackingNumber: '12314321ASD1111'
+})
+
 const rates = [
   {
     id: 'rate_dhl_1111',
@@ -389,6 +407,15 @@ export const shipmentWithMultipleParcelsMultipleTrackings = createShipment({
   parcels: [parcelWithTracking2, parcelWithTracking3]
 })
 
+export const shipmentWithoutTrackingDetails = createShipment({
+  id: 'shipment-without-tracking-details',
+  status: 'packing',
+  purchaseStartedAt: '2023-07-11',
+  rates,
+  selectedRateId: 'rate_fedex_1111',
+  parcels: [parcelWithoutTrackingDetails1]
+})
+
 export const shipmentWithoutParcels = createShipment({
   id: 'shipment-without-parcels',
   status: 'picking',