DCUpdateBillingAddress

DCUpdateBillingAddress

DCUpdateBillingAddress is the component update billing and shipping address.

DCUpdateBillingAddress methods
1. saveBillingDetails - Method to save billing and shipping details to the account.
2. getSDKInstance - Method to get digital commerce SDK instance.
3. checkValidationErrors() - Method to validate the form input fields.
4. handleBillingAddressChange - Method to save billing address change.
5. handleShippingAddressChange - Method to save shipping address change.
6. handleSameShippingAddress - Method to copy same billing address to shipping address.
7. routeToCheckout - Method to fire event to the parent.
8. loadTranslationLabels - Method to load translation labels.
9. saveBillingDetailsGetInput - filling the input payload for the SDK call.
10. saveBillingDetailsPreHook - prehook of SDK call.
11. saveBillingDetailsPostHook - posthook of SDK call.
12. saveBillingDetailsProcessResponse - This function is used to process saveBillingDetails response.
13. handleSaveBillingDetailsFailure - handle SDK failures.
14. saveBillingDetailsPreSDKCalls - function is used to do any changes prior to sdk calls.
15. saveBillingDetailsSDKCall - function is used to do actual sdk calls.
Features
1. Update shipping address.
2. Update Billing address.

Constructor

new DCUpdateBillingAddress()

Example
Sample Usage -

Include the component in your template by adding <c-dc-update-billing-address> custom tag
   
<c-dc-update-billing-address checkout-api-url="URL"></c-dc-update-billing-address>

KEY INFO -

 events fired : "vlocity-dc-checkout-success"

 events registered : 
    | Event Name                       | Event source component      | Callback Function    | Description                             |
    |----------------------------------|-----------------------------|----------------------|-----------------------------------------|
    | vlocity-dc-save-billing-address  | c-dc-check-out              | saveBillingDetails() | Event triggered on click on next button |

 Dependency - c-dc-update-billing-address is an independent component and has no dependency on any parent component.

Sample with slots -

<c-dc-update-billing-address>
   <span slot="{slot_name}">
     Custom HTML elements goes here
   </span>
</c-dc-update-billing-address>

List of available slots -

| Slot names            | Dynamic   | Description                   | Impact                    |
|-----------------------|-----------|-------------------------------|---------------------------|
| dc-billing-address    | -         | Wrapper for billing address   | Replaces billing address  |
| dc-shipping-address   | -         | Wrapper for shipping address  | Replaces shipping address |
| dc-title              | -         | Wrapper for header title      | Replaces header title     |

Extends

Methods

(static) checkValidationErrors()

Method to validate the shipping and billing address forms.

(static) disconnectedCallback()

disconnectedCallback () is invoked when this component is removed from the document’s DOM.

(static) getSDKInstance()

Method to get digital commerce SDK instance.

(static) handleBillingAddressChange(Object)

Method to save the billing address.
Parameters:
Name Type Description
Object event

(static) handleSameShippingAddress()

Method to copy billing address to the shipping address.

(static) handleSaveBillingDetailsFailure()

A custom function to be used by customers for handling api failures

(static) handleShippingAddressChange(Object)

Method to save the shipping address.
Parameters:
Name Type Description
Object event

(static) loadTranslationLabels()

Method to load translation labels.

(static) routeToCheckout(Object)

Method to trigger pubsub event to the parent
Parameters:
Name Type Description
Object payload

(async, static) saveBillingDetails()

Method to save the billing 7 shipping address.

(static) saveBillingDetailsGetInput()

Function to fetch the save billing address details sdk call inputs

(static) saveBillingDetailsPostHook()

A custom function to be used by customers for customisation, any custom action after fetch offers call can be written here

(static) saveBillingDetailsPreHook()

A custom function to be used by customers for customisation, any custom action prior to fetch offers call can be written here

(static) saveBillingDetailsPreSDKCalls()

This function is used to do any changes prior to sdk calls

(static) saveBillingDetailsProcessResponse(response)

This function is used to process saveBillingDetails response
Parameters:
Name Type Description
response object Response Object from SDK call.

(static) saveBillingDetailsSDKCall()

This function is used to do actual sdk calls