Fluent Commerce Logo
Docs
Sign In

Multi-Parcel Component

UI Component

Changed on:

12 Feb 2024

Overview

  • Multi-Parcel is an alternative Wave configuration to the Packing step for Fluent Store. The Multi-Parcel field component supports the ability to create multiple parcels per fulfilment.
  • It supports the ability to create common parcel types for a location. These parcel types can contain useful information such as dimensions and weight attributes to improve the packing process.
  • To get started with the Multi-Parcel field component in your Fluent Store configuration we recommend the following knowledge base guide.
No alt text provided

Alias

fc.mystique.fields.basicpack

Detailed technical description

Use Cases

The Multi-Parcel field component provides the following features that enable users to submit additional and resourceful data during the packing operation:

  • Create and submit more than one parcel per order fulfillment
  • Define common parcel types, enabling you to do the following:
    • Define a preselected default parcel type value. This allows in-store associates to skip having to select a parcel type for each fulfilment, particularly useful if the Operation only has one primary parcel type
    • Optionally disable preselected parcel types on the ‘select parcel type’ dropdown. This ensures that in-store associates select a parcel type each time
    • Specify dimensional data for each parcel type
    • Option to specify minimum and maximum weights for each parcel type, to ensure users enter reasonable values to avoid under/overstating cost implications with Carriers
    • Option to define a default weight for each parcel type so that users don’t always need to manually capture the weight of each parcel resulting in a more efficient packing time per order
    • Capture custom parcel dimensions to cater for situations where none of the usual parcels are suitable for the fulfilment
    • Set different parcel types at different contexts or locations so that individual stores can have their own unique preset packaging options
    • Supports mobile views
No alt provided

Field behaviour

Adding and Removing parcels

  • In-Store Associates are able to add another parcel to the top of the table via the ADD PARCEL button
  • When there is more than one parcel, a REMOVE button appears on each row, allowing the users to remove that row.

Choosing a Parcel type

  • The parcel type can be chosen from a dropdown and should reflect the physical container the Packer has chosen to put the items into. These are sourced from either the 
    `fc.mystique.fields.basicpack`
     setting or the legacy attributes solution. See configuration behaviour for more details.
  • If no parcel types are configured, then the only available option will be 
    `custom`
     and preselected for the user.

Parcel Dimensions and Weights

  • After selecting a parcel type, the user must specify a weight. If the parcel type has a default weight, this field will be preselected with that value, allowing the user to accept a default if it is suitable for their operation.
  • The "weight" field will accept positive values in kilograms (kg) to two decimal places between 
    `"minWeight"`
     and 
    `"maxWeight"`
     (if defined, see configuration).
  • When a 
    `custom`
     parcel type is chosen the Packer will be prompted to enter the dimensions for the parcel, these must be positive values to a maximum of one decimal place.
  • Otherwise, if a preconfigured parcel type has been chosen, these dimensions will be used downstream.

Submission

  • Upon 
    `CONFIRM PACK`
     the end-user will be met with an error message if they have attempted to submit with any values blank. Otherwise, the user will then progress onto step 3 of the Wave Wizard - Dispatch.

Field Logic

  • The Multi-Parcel field refreshes the Wave data until it is deemed ready for parcel creation. Specifically, until each of the items is
    `filled + rejected quantities = requested quantity`
    . If this statement does not return true then the field component will not load.

Configuration Options

The Multi-Parcel field is configurable via the 

 setting.


Properties

Header Properties

Name

Required

Type

Description

query

No

String

An optional override for the default GraphQL query used to populate the basicpack component. The default query is provided below. The basicpack field requires certain data to be retrieved to function correctly, so if you need to retrieve more data than the default provides it is recommended to use the default query as a base and add additional fields to that, rather than generate a new query from scratch.

attributes

No

Array

Optional overrides for the data shown in each column of the multi-parcel component. Configuration details and default values are captured in the Attributes Configuration section. By default without overrides the following fields are shown in the table: Order Reference, Customer Name, Order Type and Fulfilment Status.

allowMultipleParcelsPerItem

No

Boolean

Determines whether to enable validation that limits the number of parcels that can be added to the fulfilment. When this setting is 

`true`
, there is no limit on the parcels that can be added to the fulfilment. However, when this setting is set to 
`false`
 then the number of parcels cannot exceed the total 
`quantity`
 of 
`items`
 within the fulfilment.

defaultParcel

No

String

The default parcel type. This value will be preselected on the parcel type dropdown when the page first loads. This creates a more efficient packing process, however may increase user error. If no value is defined, then the initial state of the dropdown will be blank. This forces the user to explicitly choose a parcel each time. The string must match the name of the parcel types under parcels. Otherwise, the default will remain blank.

parcels

No

Array of parcels

A list of parcels. Each entry in the array represents one option in the dropdown.

Configuration details are captured in the Parcels data dictionary section.


Query Property

The following is the default query that is used to populate them basicpack component. If the 

`query`
 prop is populated then that value will be passed instead of this default query. Otherwise, if left empty then the default will be used.

1query ($waveId: ID!) {
2  waveById(id: $waveId) {
3    id
4    ref
5    status
6    location {
7      id
8      ref
9      attributes {
10        name
11        type
12        value
13      }
14    }
15    fulfilments(first: 100) {
16      edges {
17        node {
18          id
19          ref
20          status
21          toAddress {
22            id
23            ref
24          }
25          items(first: 100) {
26            edges {
27              node {
28                ref
29                filledQuantity
30                rejectedQuantity
31                requestedQuantity
32              }
33            }
34          }
35          order {
36            id
37            ref
38            type
39            status
40            fulfilmentChoice {
41              deliveryType
42            }
43            customer {
44              firstName
45              lastName
46              primaryEmail
47              primaryPhone
48            }
49          }
50        }
51      }
52    }
53  }
54}

Language: plain_text

Name: Basicpack base query

Description:

[Warning: empty required content area]

Attribute Property

When not explicitly specified, the following configuration is displayed by default:

Name

Required

Type

Description

value

No

String

The value for a corresponding cell in a given column. For example if you were to display the order reference number you would use

`{{data.order.ref}}`

label

No

String

The column label. This is a template string For example if you were to display the label "Order Reference" you would use

`["fc.sf.ui.wave.pickAndPack.list.pack.multiparcel.column.order.ref.heading", "Order reference"]`

hideBelow

No

`'xs'`
 / 
`'sm'`
 / 
`'md'`
 / 
`'lg'`
 / 
`'xl'`

Optional to hide columns and values below certain breakpoints.

1    {
2  "attributes": [
3    {
4      "value": "{{data.order.ref}}",
5      "label": ["fc.sf.ui.wave.pickAndPack.list.pack.multiparcel.column.order.ref.heading", "Order reference"],
6      "hideBelow": "sm"
7    },
8    {
9      "value": "{{data.order.customer.firstName}} {{data.order.customer.lastName}}",
10      "label": ["fc.sf.ui.wave.pickAndPack.list.pack.multiparcel.column.customer.name.heading", "Customer name"]
11    },
12    {
13      "value": "{{orderType}}",
14      "label": ["fc.sf.ui.wave.pickAndPack.list.pack.multiparcel.column.order.type.heading", "Order type"]
15    },
16    {
17      "value": "{{data.status}}",
18      "label": ["fc.sf.ui.wave.pickAndPack.list.pack.multiparcel.column.fulfilment.status.heading", "Fulfilment status"]
19    }
20  ]

Language: plain_text

Name: Default Attributes

Description:

[Warning: empty required content area]

Parcels Properties

Add the details about each individual parcel in the parcels object below

Name

Required

Type

Description

name

Yes

String

The name of the parcel. This is what will be displayed on the dropdown to the end user.

length(cm)

Yes

Number

The length of the parcel in centimetres

width(cm)

Yes

Number

The width of the parcel in centimetres

height(cm)

Yes

Number

The height of the parcel in centimetres

barcode

No

String

This property will eventually be used for barcode scanning capabilities in the future.

deafultWeight

No

Number

The default value of the weight. The weight field will be preselected with this value when this parcel is selected.

minWeight

No

Number

The minimum weight of this parcel. If defined, the user has to input a weight value higher than this number.

maxWeight

No

Number

The maximum weight of this parcel. If defined, the user has to input a weight value lower than this number.

Configuration example

1{
2    "allowMultipleParcelsPerItem": false,
3    "parcelTypes": {
4        "defaultParcel": "small",
5        "parcels": [
6            {
7                "name": "small",
8                "length": "10",
9                "width": "10",
10                "height": "10",
11                "barcode": "10",
12                "defaultWeight": "10",
13                "minWeight": "10",
14                "maxWeight": "19"
15            },
16            {
17                "name": "medium",
18                "length": "20",
19                "width": "20",
20                "height": "20",
21                "barcode": "20",
22                "defaultWeight": "20",
23                "minWeight": "20",
24                "maxWeight": "29"
25            },
26            {
27                "name": "large",
28                "length": "30",
29                "width": "30",
30                "height": "30",
31                "barcode": "30",
32                "defaultWeight": "30",
33                "minWeight": "30",
34                "maxWeight": "39"
35            }
36        ]
37    }
38}

Language: json

Version History

0000-00-00

v1.0.0

Initial changelog entry.

Recommended Placement

N/A

Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.

Fluent Logo