feat: create LineItems component

commercelayer · Aug 10, 2023 · 08e7c82 · 08e7c82
1 parent 4df035e
commit 08e7c82
Show file tree

Hide file tree

Showing 9 changed files with 1,962 additions and 596 deletions.
diff --git a/packages/app-elements/src/main.ts b/packages/app-elements/src/main.ts
@@ -130,6 +130,7 @@ export { ListDetails } from '#ui/lists/ListDetails'
 export { ListDetailsItem } from '#ui/lists/ListDetailsItem'
 export { ListItem } from '#ui/lists/ListItem'
 // Resources
+export { LineItems } from '#ui/resources/LineItems'
 export { ListItemOrder } from '#ui/resources/ListItemOrder'
 export { ListItemsMetadata } from '#ui/resources/ListItemsMetadata'
 export { OrderSummary } from '#ui/resources/OrderSummary'

diff --git a/packages/app-elements/src/ui/resources/LineItems.mocks.ts b/packages/app-elements/src/ui/resources/LineItems.mocks.ts
@@ -0,0 +1,258 @@
+import {
+  type LineItem,
+  type ParcelLineItem,
+  type StockLineItem
+} from '@commercelayer/sdk'
+
+export const presetLineItems = {
+  oneLine: {
+    type: 'line_items',
+    item_type: 'skus',
+    id: '',
+    created_at: '',
+    updated_at: '',
+    sku_code: 'BABYBIBXA19D9D000000XXXX',
+    image_url:
+      'https://res.cloudinary.com/commercelayer/image/upload/f_auto,b_white/demo-store/skus/BABYBIBXA19D9D000000XXXX_FLAT.png',
+    name: 'Gray Baby Bib with Black Logo',
+    quantity: 2,
+    formatted_unit_amount: '9.00€',
+    formatted_total_amount: '18.00€',
+    total_amount_float: 18.0,
+    tax_amount_float: 100
+  },
+  oneLine_2: {
+    type: 'line_items',
+    item_type: 'skus',
+    id: '',
+    created_at: '',
+    updated_at: '',
+    sku_code: 'BASEBHAT000000FFFFFFXXXX',
+    image_url:
+      'https://res.cloudinary.com/commercelayer/image/upload/f_auto,b_white/demo-store/skus/BASEBHAT000000FFFFFFXXXX_FLAT.png',
+    name: 'Black Baseball Hat with White Logo',
+    quantity: 1,
+    formatted_total_amount: '34.00€',
+    formatted_unit_amount: '34.00€',
+    total_amount_float: 34.0,
+    tax_amount_float: 0
+  },
+  twoLines: {
+    type: 'line_items',
+    item_type: 'skus',
+    id: '',
+    created_at: '',
+    updated_at: '',
+    sku_code: 'HOODIEUL000000FFFFFFLXXX',
+    image_url:
+      'https://res.cloudinary.com/commercelayer/image/upload/f_auto,b_white/demo-store/skus/HOODIEUL000000FFFFFFLXXX_FLAT.png',
+    name: 'BlackUnisexLightweightHoodieWithWhiteLogo_Cotton_Fabric_long_name',
+    quantity: 10,
+    formatted_total_amount: '1090.00€',
+    formatted_unit_amount: '109.00€',
+    total_amount_float: 1090.0,
+    tax_amount_float: 200
+  },
+  withOptions: {
+    type: 'line_items',
+    item_type: 'skus',
+    id: '',
+    created_at: '',
+    updated_at: '',
+    sku_code: 'TOTEBAGLE7DDC7000000XXXX',
+    image_url:
+      'https://res.cloudinary.com/commercelayer/image/upload/f_auto,b_white/demo-store/skus/TOTEBAGLE7DDC7000000XXXX_FLAT.png',
+    name: 'Large Eco Tote Bag with Black Logo',
+    quantity: 9,
+    formatted_total_amount: '243.00€',
+    formatted_unit_amount: '27.00€',
+    total_amount_float: 243.0,
+    tax_amount_float: 100,
+
+    line_item_options: [
+      {
+        id: 'NOnEiOMPRx',
+        type: 'line_item_options',
+        name: 'Front Text',
+        quantity: 1,
+        currency_code: 'USD',
+        unit_amount_cents: 100,
+        unit_amount_float: 1,
+        formatted_unit_amount: '$1.00',
+        total_amount_cents: 100,
+        total_amount_float: 1,
+        formatted_total_amount: '$1.00',
+        delay_hours: 0,
+        delay_days: 0,
+        options: {
+          line1: 'Commerce Layer',
+          line2: 'Composable Commerce API'
+        },
+        created_at: '2023-03-27T10:33:30.074Z',
+        updated_at: '2023-03-27T10:33:30.074Z',
+        reference: null,
+        reference_origin: null,
+        metadata: {}
+      },
+      {
+        id: 'xqrRidVOVN',
+        type: 'line_item_options',
+        name: 'Rear Text',
+        quantity: 1,
+        currency_code: 'USD',
+        unit_amount_cents: 100,
+        unit_amount_float: 1,
+        formatted_unit_amount: '$1.00',
+        total_amount_cents: 100,
+        total_amount_float: 1,
+        formatted_total_amount: '$1.00',
+        delay_hours: 0,
+        delay_days: 0,
+        options: {
+          name: 'Ringo Starr',
+          team: 'Beatles'
+        },
+        created_at: '2023-03-27T10:33:30.099Z',
+        updated_at: '2023-03-27T10:33:30.099Z',
+        reference: null,
+        reference_origin: null,
+        metadata: {}
+      },
+      {
+        id: 'xqrRisOVN',
+        type: 'line_item_options',
+        name: 'Special',
+        quantity: 1,
+        currency_code: 'USD',
+        unit_amount_cents: 100,
+        unit_amount_float: 1,
+        formatted_unit_amount: '$1.00',
+        total_amount_cents: 100,
+        total_amount_float: 1,
+        formatted_total_amount: '$1.00',
+        delay_hours: 0,
+        delay_days: 0,
+        options: {
+          logo_url: 'http://data.commercelayer.com/long_url/logo.png',
+          colors: ['#400', '#fff', '#000fff'],
+          position: {
+            x: 30,
+            y: 10
+          }
+        },
+        created_at: '2023-03-27T10:33:30.099Z',
+        updated_at: '2023-03-27T10:33:30.099Z',
+        reference: null,
+        reference_origin: null,
+        metadata: {}
+      }
+    ]
+  },
+  withBundle: {
+    id: 'PljQzimxgB',
+    type: 'line_items',
+    item_type: 'bundles',
+    sku_code: null,
+    bundle_code: 'WELCOME_KIT_001',
+    quantity: 1,
+    currency_code: 'USD',
+    unit_amount_cents: 1000,
+    unit_amount_float: 10,
+    formatted_unit_amount: '$10.00',
+    formatted_options_amount: '$0.00',
+    formatted_discount: '$0.00',
+    total_amount_cents: 1000,
+    total_amount_float: 10,
+    formatted_total_amount: '$10.00',
+    tax_amount_cents: 0,
+    tax_amount_float: 0,
+    name: 'Welcome KIT',
+    image_url:
+      'https://data.commercelayer.app/assets/images/t-shirts/color/png/t-shirt-flat_GREEN-ALIEN.png',
+    created_at: '2023-04-28T09:46:16.219Z',
+    updated_at: '2023-04-28T09:46:16.219Z'
+  },
+  stockLineItem: {
+    id: 'nBJxuxMObn',
+    type: 'stock_line_items',
+    sku_code: 'TSHIRTMMFFFFFFE63E74MXXX',
+    bundle_code: null,
+    quantity: 3,
+    created_at: '2023-08-09T10:37:26.211Z',
+    updated_at: '2023-08-09T10:37:26.211Z',
+    reference: null,
+    reference_origin: null,
+    metadata: {},
+    sku: {
+      id: 'bnRwRSJQlZ',
+      type: 'skus',
+      code: 'TSHIRTMSB0B0B2000000LXXX',
+      name: 'Gray Men T-Shirt with Black Logo (L)',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque in neque vitae tincidunt. In gravida eu ipsum non condimentum. Curabitur libero leo, gravida a dictum vestibulum, sollicitudin vel quam.',
+      image_url:
+        'https://res.cloudinary.com/commercelayer/image/upload/f_auto,b_white/demo-store/skus/TSHIRTMSB0B0B2000000LXXX_FLAT.png',
+      weight: 200,
+      unit_of_weight: 'gr',
+      hs_tariff_number: '',
+      do_not_ship: false,
+      do_not_track: false,
+      inventory: null,
+      created_at: '2022-05-13T12:33:45.266Z',
+      updated_at: '2023-07-12T14:43:38.731Z',
+      reference: 'TSHIRTMMFFFFFFE63E74',
+      reference_origin: '',
+      metadata: {}
+    }
+  },
+  parcelLineItem: {
+    id: 'PZEKxtRWrw',
+    type: 'parcel_line_items',
+    sku_code: 'BOTT17OZFFFFFF000000XXXX',
+    bundle_code: null,
+    quantity: 2,
+    name: 'White Water Bottle with Black Logo',
+    image_url:
+      'https://res.cloudinary.com/commercelayer/image/upload/f_auto,b_white/demo-store/skus/BOTT17OZFFFFFF000000XXXX_FLAT.png',
+    created_at: '2023-08-10T08:13:49.214Z',
+    updated_at: '2023-08-10T08:13:49.214Z',
+    reference: null,
+    reference_origin: null,
+    metadata: {}
+  },
+  giftCard: {
+    id: 'vaoMtAZlXy',
+    type: 'line_items',
+    sku_code: null,
+    bundle_code: null,
+    quantity: 1,
+    currency_code: 'EUR',
+    unit_amount_cents: -10000,
+    unit_amount_float: -100.0,
+    formatted_unit_amount: '-€100,00',
+    options_amount_cents: 0,
+    options_amount_float: 0.0,
+    formatted_options_amount: '€0,00',
+    discount_cents: 0,
+    discount_float: 0.0,
+    formatted_discount: '€0,00',
+    total_amount_cents: -10000,
+    total_amount_float: -100.0,
+    formatted_total_amount: '-€100,00',
+    tax_amount_cents: 0,
+    tax_amount_float: 0.0,
+    formatted_tax_amount: '€0,00',
+    name: 'Gift card: €100,00',
+    image_url: null,
+    discount_breakdown: {},
+    tax_rate: 0.0,
+    tax_breakdown: {},
+    item_type: 'gift_cards',
+    frequency: null,
+    created_at: '2023-05-16T11:06:14.674Z',
+    updated_at: '2023-05-16T11:06:14.674Z',
+    reference: null,
+    reference_origin: null,
+    metadata: {}
+  }
+} satisfies Record<string, LineItem | ParcelLineItem | StockLineItem>