))}..." data-copied="Copied!" title="Copy to clipboard">
A guest user does not have access to the order history page. Therefore, the only way to access an order is by using the Order Search form. The search order form retrieves the order that matches the specified email address, last name, and order name, as shown below:
The OrderSearchForm
component is responsible for rendering the form to search for an order. It receives the following parameters:
See the following code for an example of the implementation:
...{inLineAlert.text ? ( <InLineAlert data-testid="orderAlert" className={'order-order-search-form__alert'} type={inLineAlert.type} variant="secondary" heading={inLineAlert.text} icon={<Icon source={WarningFilled} />} />) : null}
<Form className={'order-order-search-form__wrapper'} name="orderSearchForm" loading={loading} fieldsConfig={fieldsConfig} onSubmit={onSubmit}> <div className="order-order-search-form__button-container"> <Button className={'order-order-search-form__button'} size={'medium'} variant={'primary'} key={'logIn'} type={'submit'} disabled={loading} > <Text id={'Order.OrderSearchForm.button'} /> </Button> </div></Form>...
The cancellation form allows the customer to select a cancellation reason and submit the form.
The OrderCancel
component renders the OrderCancelForm
container inside a modal. This modal receives two parameters:
For example:
...<Modal centered={true} size="medium" onClose={handleClose} className={'order-order-cancel__modal'} title={ <h2 className={'order-order-cancel__title'}> <Text id={'Order.OrderCancelForm.title'} /> </h2> } data-testid="order-cancellation-reasons-modal"><OrderCancelForm orderRef={orderRef} cancelReasons={transformCancelReasons(orderCancellationReasons)} /></Modal>...
The OrderCancelForm
component is responsible for:
...{isErrorVisible && ( <InLineAlert heading={translations.ErrorHeading} description={translations.ErrorDescription} />)}<div className="order-order-cancel-reasons-form__text"> <Text id={'Order.OrderCancelForm.description'} /></div><Picker name="cancellationReasons" floatingLabel={translations.orderCancellationLabel} defaultOption={cancelReasons[0]} variant="primary" options={cancelReasons} value={String(selectedReason)} handleSelect={handleReasonSelect} required={true} data-testid="order-cancellation-reasons-selector" {...pickerProps}/><div className="order-order-cancel-reasons-form__button-container"> <Button variant="primary" data-testid="order-cancel-submit-button" {...submitButtonProps} > <Text id={'Order.OrderCancelForm.button'} /> </Button></div>...
When a logged-in customer submits the cancellation form, Commerce immediately sets the status of the order to Canceled
and the drop-in displays a confirmation notice.
If the shopper is a guest user, the drop-in displays the following dialog:
The order status remains Pending
until the shopper clicks the link in an email similar to the following to confirm the cancellation.
Once clicked, the order becomes Canceled
and the order status page is updated accordingly.
The order status page uses the OrderStatusContent
component to render the order with all its properties and the available actions.
See the following code for an example of the OrderStatusContent
implementation below:
...<Card className="order-order-status-content" variant="secondary"> <Header title={headerTitle} /> <div className="order-order-status-content__wrapper"> <div className={classes([ 'order-order-status-content__wrapper-description', [ 'order-order-status-content__wrapper-description--actions-slot', !!slots?.OrderActions, ], ])} > <p>{isReturnPage ? returnMessage : orderMessage}</p> </div> <OrderActions orderData={orderData} slots={slots} routeCreateReturn={routeCreateReturn} routeOnSuccess={routeOnSuccess} onError={onError} /> </div></Card>...
After performing any action, the order status page is re-rendered, so that it reflects the new status and the available actions. The appropriate message is shown to the user, depending on the action performed.