Order management dialog

The order management dialog is where a customer acts on one order: changes the delivery address or pickup point, changes the size, changes the products before the order is accepted (remove, change the quantity, add), cancels, picks a refund method, writes a message about the order, and starts a return, an exchange or a late return (with the return form of the Prodyflow settings).

The flow, the rules, the API calls, the validation, the errors, the question of every step, the button labels and the menu list are the engine's (resources/js/modules/orderManage.js). The texts are the order_manage language group, with theme texts on top of it. A template only gives the markup of the parts it wants to look different, like with the checkout.

Using it

Put the dialog once into a page that lists the customer's orders, e.g. pages/profile/orders.twig:

{{ order_manage() }}

Openers can be anywhere on the page:

Attribute	What it opens
`data-order-manage`	The action menu of the order. Needs `data-order-id`.
`data-return-open`	The return flow. Needs `data-order-id`, an optional `data-flow` names the first step.

The template decides how the dialog opens and closes (a <dialog>, a bottom sheet...). Give it to the engine with:

OrderManage.setup({ open() { /* show the dialog */ }, close() { /* hide it */ } });

The engine sends two events on document: order-manage:mounted and order-manage:done (a change was made; the list of orders can refresh).

Parts

The dialog comes in parts, in the order of the flow. For every part the template's layout/order-manage/<part>.twig is used when it has one, else the engine's own markup (resources/views/order-manage/parts/<part>.blade.php). A part with an underscore uses a dash in its file name (items_edit → items-edit.twig).

Part	What it is
`head`	The header of the dialog: the title and the back button
`menu`	The list of the actions this order allows (a row with a link is a real `<a>`)
`address`	Change the delivery address or the pickup point, before the order is accepted
`variant`	Change the size: another variant of the same product at the same price, before the order is accepted
`cancel`	Cancel the order
`contact`	A message about the order. The topics and their extra fields come from the Prodyflow customer service settings.
`items_edit`, `items_add`, `items_pay`, `items_summary`	Changing the products, in four steps: 1. remove or change the quantity, 2. add (search), 3. pay the difference, 4. summary
`items`	Return, 1: what is wrong with the products, and why. The questions are the Prodyflow return form (Settings → Returns).
`offer`	Return, 2: an exchange offer (only where the sale channel has exchange)
`ship`	Return, 3: how the parcel gets back to us (courier, drop-off, or "ship it myself")
`refund`	Return, 4 (also after a cancel or a change of products): where the money goes back, only if money is due back
`summary`	Return, 5: the summary before it is sent
`done`	The result
`foot`	The footer of the dialog: the error message and the buttons
`shell`	The dialog itself: the frame that lays the rendered parts out

Start from the engine's part (copy it from resources/views/order-manage/parts/) and change the markup. Every part is the DOM template of the Vue app, and may use everything the app has (the data, the computed values and the methods listed at the top of orderManage.js).

Twig and Vue

A part is rendered by Twig first and then used as a Vue template by the browser. {{ }} belongs to Twig, so the Vue expressions use [[ ]]. The app is mounted on the element with data-order-manage-app in the shell:

<div id="my-order-manage" data-order-manage-app
     data-is-change="{{ is_change ? '1' : '0' }}"
     data-is-return="{{ is_return ? '1' : '0' }}"
     data-help-url="{{ help_url }}"
     data-texts="#my-order-manage-texts"
     data-delimiters="[[,]]">
  {{ parts.head|raw }}
  {{ parts.menu|raw }}
  ...
</div>
<script type="application/json" id="my-order-manage-texts">{{ texts_json|raw }}</script>

Attribute	Description
`data-is-change`, `data-is-return`	The sale channel's settings: exchanges and returns on or off
`data-help-url`	Where a return that cannot start in the dialog goes on (the help page)
`data-texts`	The selector of the JSON script with the texts
`data-delimiters`	The Vue delimiters; `[[,]]` by default

Variables of the parts and the shell

Variable	Description
`sc`	The sale channel (see Global models)
`locale`	The active locale
`is_change`, `is_return`	The sale channel's exchange and return settings
`help_url`	The URL of the help page of the sale channel
`window`	The return window as text (`"Within 14 days of delivery"`); empty when the channel has no limit
`texts`	All the texts of the dialog, as an object
`texts_json`	The same, JSON encoded for the script element (`
`parts`	The shell only: the rendered parts as HTML (`parts.head`, `parts.items_edit`...)

Payment

Changing the products can bring a difference to pay. The engine takes the payment online before the change is sent: the payment app draws its widget into the element with the id order-manage-payment. The dialog answers the payment apps' CART calls while a payment is taken in it. An exchange's return parcel is free, and a return only offers drop-off methods that cost no more than the refund.

"Ship it myself"

When the Prodyflow return settings allow it, a pure return can be sent by the customer on their own, at their own cost. It is the ship option with self: true: no courier and no address. The template shows selfAddress (the return address of the sale channel) for it.

Order management dialog

Using it​

Parts​

Twig and Vue​

Variables of the parts and the shell​

Payment​

"Ship it myself"​