Configure page layouts for order approvals

You must make changes to a number of the storefront layouts to add order approvals to your storefront.

Oracle recommends that you clone the out-of-the-box layouts and then make your changes to the clones. If your site only supports account-based shoppers, you can mark the clones as the defaults and make the order approval changes to those pages. If your site must support both account-based shoppers and other, non-account affiliated shoppers, then you will need two versions of the pages, one marked as default for the non-account affiliated shoppers and the other marked as “Display layout to account shoppers only” for the account-based shoppers. In this scenario, you would make the order approval changes to the pages designed for the account-based shoppers.

The modifications described in the sections below involve adding new widgets to page layouts and also making sure the latest versions are used for some widgets that are included in the page layouts out of the box. To replace a widget with the latest version, see Upgrade deployed widgets in Customize your store layouts.

Profile layout for order approvals

To add the order approval feature to your storefront, you must add these two widgets the Profile layout:

The Order Approval Settings widget provides the delegated administrator with an interface for enabling and disabling order approvals and setting the purchase limit.

If you integrate with an external system determine if orders require approval, the account’s delegated administrators will not be able to enable and disable order approvals or set a purchase limit. See Integrate with an external system for order approvals for more information.

The Orders Pending Approval widget allows an approver to view a list of orders pending approval.

To add the order approval widgets to the Profile layout, you can create a vertical tab stack and place the order approval widgets on individual tabs within the stack. To restrict the display of the Order Approval Settings widget to contacts with administrator privileges and the display of the Orders Pending Approval tab to contacts with approver privileges, you can add something similar to the following code snippet in the vertical tab stack’s template:

<!-- ko foreach: regions -->
<!--ko if:($data.displayName() == 'Profile') ||
((($data.displayName() == 'Account Contacts') ||
($data.displayName() == 'Account Addresses') ||
($data.displayName() == 'Order Approval Settings')) &&
($masterViewModel.data.global.user.roles.map(function(data)
{return data.function; }).indexOf("admin")!== -1)) ||
(($data.displayName() == 'Orders Pending Approval') &&
($masterViewModel.data.global.user.roles.map(function(data)
{return data.function; }).indexOf("approver")!== -1))-->
   <li role="presentation" data-bind="css: {active: $index() === 0},
        attr: { id: 'verticalTabs-'+$parent.id()+'-tab-'+$index() }">
      <a data-toggle="tab" data-bind="attr: { 'href': '#verticalTabs-' +
           $parent.id() + '-content-' + $index()}">
         <span data-bind="text: displayName"></span>
      </a>
   </li>
<!-- /ko -->
<!-- /ko -->

This code snippet shows the My Profile tab to all contacts but restricts the display of the Orders Pending Approval tab to approvers and the display of the other tabs (Account Contacts, Account Addresses, and Order Approval Settings) to administrators. (It assumes you used “My Profile”, “Account Contacts”, “Account Addresses”, “Order Approval Settings”, and “Orders Pending Approval” as the display names for the tabs that hold the Customer Profile, Account Contacts, Account Addresses, Order Approval Settings, and Orders Pending Approval widgets, respectively.)

In addition to adding the Order Approval Settings and Orders Pending Approval widgets to the Profile layout, you must also make sure you are using the latest version of the Account Contacts widget. This version allows the delegated administrator to assign the Approver role to contacts.

Note: The Account Addresses and Account Contacts widgets are described in the Add delegated administration to your storefront section. For more information on vertical tab stacks, see Add Vertical Tabs in Customize your store layouts and Use Stacks for Increased Widget Layout Control.

Order Details layout and Scheduled Order layout for order approvals

These two layouts provide detailed information about orders, both regular (Order Details layout) and scheduled (Scheduled Order layout). The modifications you have to make to them are similar and are described below.

You have to add the Order Approvals widget to each layout. This widget allows an approver to approve or reject an order and provide comments when viewing an order’s details. Note that Order Approvals widget only appears in the storefront when an approver is viewing an order’s details. Otherwise, it is hidden.

You also must use the latest version of these widgets:

The Order Details widget or the Order Details with Additional Info widget on the Order Details layout.
The Scheduled Order widget on the Scheduled Order layout.

The updated versions of these widgets provide:

The reasons an order requires approval. If you are using the Order Approvals webhook to integrate with an external system, all the reasons returned by the webhook response are listed.
The approver name and comments, along with the rest of an order’s details, after the order has been approved or rejected.
A Complete Payment button for the shopper if an order has been approved but still requires payment.
An Add Items to Cart button for orders that have been rejected. This button allows the shopper to quickly add the items in the rejected order to a new cart, forming the basis for a modified order that will pass approval.

Order Confirmation layout for order approvals

To incorporate order approvals on the Order Confirmation layout, make sure you are using the latest version of either the Order Confirmation widget or the Order Confirmation with Additional Info widget. The latest versions of these widgets include conditional text for two cases:

If the order is pending approval, a message describing the reasons the order requires approval is provided. If you are using the Order Approvals webhook to integrate with an external system, all the reasons returned by the webhook response are listed.
If the order will need payment after approval (in other words, the payment method used for the order is not a deferred payment method like invoice or cash), this message is provided: “After approval, you will need to provide payment information.”

Order History layout for order approvals

To incorporate order approvals on the Order History layout, make sure you are using the latest version of the Order History widget. This version allows a contact to see orders that are pending approval, approved, rejected, or canceled, along with orders that did not require approval. Note that the text strings used to communicate the order statuses can be customized via the Text Snippets tool.

Checkout layout for order approvals

The checkout layout requires more customization to support order approvals than the other page layouts. As such, it is described in its own section, Manage the checkout flow for orders requiring approval.