@liquidcommerce/elements-sdk 2.6.0-beta.120 → 2.6.0-beta.121
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.checkout.esm.js +9028 -8571
- package/dist/index.esm.js +13920 -13479
- package/dist/ssr-stub.esm.js +2 -0
- package/dist/types/core/api/api-client.service.d.ts +2 -1
- package/dist/types/core/pubsub/interfaces/checkout.interface.d.ts +6 -0
- package/dist/types/core/pubsub/interfaces/core.interface.d.ts +2 -1
- package/dist/types/core/store/interfaces/checkout.interface.d.ts +9 -1
- package/dist/types/core/store/interfaces/core.interface.d.ts +2 -2
- package/dist/types/enums/core.enum.d.ts +2 -0
- package/dist/types/interfaces/api/checkout.interface.d.ts +25 -0
- package/dist/types/modules/checkout/checkout.commands.d.ts +11 -0
- package/dist/types/modules/checkout/checkout.component.d.ts +1 -0
- package/dist/types/modules/checkout/components/checkout-delivery-method.component.d.ts +22 -0
- package/dist/types/modules/checkout/components/checkout-place-order-button.component.d.ts +0 -6
- package/dist/types/modules/checkout/components/index.d.ts +1 -0
- package/dist/types/modules/checkout/constant.d.ts +10 -0
- package/dist/types/modules/checkout/styles/delivery-method.style.d.ts +1 -0
- package/dist/types/modules/ui-components/alert/alert.component.d.ts +10 -10
- package/docs/v1/guides/accessibility.md +8 -0
- package/docs/v1/guides/checkout-component.md +11 -0
- package/docs/v1/guides/events.md +16 -0
- package/package.json +1 -1
package/dist/ssr-stub.esm.js
CHANGED
|
@@ -128,6 +128,7 @@ const ELEMENTS_ACTIONS_EVENT = {
|
|
|
128
128
|
CHECKOUT_ITEM_QUANTITY_INCREASE: 'checkout_item_quantity_increase',
|
|
129
129
|
CHECKOUT_ITEM_QUANTITY_DECREASE: 'checkout_item_quantity_decrease',
|
|
130
130
|
CHECKOUT_ITEM_ENGRAVING_UPDATED: 'checkout_item_engraving_updated',
|
|
131
|
+
CHECKOUT_DELIVERY_METHOD_UPDATED: 'checkout_delivery_method_updated',
|
|
131
132
|
CHECKOUT_TIP_UPDATED: 'checkout_tip_updated',
|
|
132
133
|
CHECKOUT_SUBMIT_STARTED: 'checkout_submit_started',
|
|
133
134
|
CHECKOUT_SUBMIT_COMPLETED: 'checkout_submit_completed',
|
|
@@ -198,6 +199,7 @@ const COMPONENT_TYPE = {
|
|
|
198
199
|
CHECKOUT_INFORMATION: 'checkout-information',
|
|
199
200
|
CHECKOUT_STRIPE_HANDLER: 'checkout-stripe-handler',
|
|
200
201
|
CHECKOUT_STRIPE_FORM: 'checkout-stripe-form',
|
|
202
|
+
CHECKOUT_DELIVERY_METHOD: 'checkout-delivery-method',
|
|
201
203
|
CHECKOUT_PAYMENT: 'checkout-payment',
|
|
202
204
|
CHECKOUT_PAYMENT_SUMMARY: 'checkout-payment-summary',
|
|
203
205
|
CHECKOUT_BILLING: 'checkout-billing',
|
|
@@ -3,7 +3,7 @@ import type { AuthClientService } from '@/core/api/auth-client.service';
|
|
|
3
3
|
import type { IPersistedStore, IPersistedStoreAction } from '@/core/store/interfaces/core.interface';
|
|
4
4
|
import type { IAddressAutocompleteResult, IAddressDetailsResult, ILocation } from '@/interfaces/api/address.interface';
|
|
5
5
|
import type { ICart, ICartUpdateParams } from '@/interfaces/api/cart.interface';
|
|
6
|
-
import type { CheckoutPaymentSessionType, IAnonymousCheckoutAddProductParams, IAnonymousCheckoutAddProductResponse, ICheckoutComplete, ICheckoutItemsUpdateParams, ICheckoutItemsUpdateResponse, ICheckoutPaymentConfirm, ICheckoutPaymentConfirmParams, ICheckoutPaymentSession, ICheckoutPrepare, ICheckoutPrepareParams } from '@/interfaces/api/checkout.interface';
|
|
6
|
+
import type { CheckoutPaymentSessionType, IAnonymousCheckoutAddProductParams, IAnonymousCheckoutAddProductResponse, ICheckoutComplete, ICheckoutFulfillmentParams, ICheckoutFulfillmentResponse, ICheckoutItemsUpdateParams, ICheckoutItemsUpdateResponse, ICheckoutPaymentConfirm, ICheckoutPaymentConfirmParams, ICheckoutPaymentSession, ICheckoutPrepare, ICheckoutPrepareParams } from '@/interfaces/api/checkout.interface';
|
|
7
7
|
import type { IProductAvailabilityResponse } from '@/interfaces/api/product.interface';
|
|
8
8
|
import type { IProductSearchParams, IProductSearchResponse } from '@/interfaces/api/product-list.interface';
|
|
9
9
|
export declare class ApiClientService {
|
|
@@ -24,6 +24,7 @@ export declare class ApiClientService {
|
|
|
24
24
|
updateCart(params: ICartUpdateParams): Promise<ApiResult<ICart>>;
|
|
25
25
|
prepareCheckout(params: ICheckoutPrepareParams): Promise<ApiResult<ICheckoutPrepare>>;
|
|
26
26
|
updateCheckoutItems(params: ICheckoutItemsUpdateParams): Promise<ApiResult<ICheckoutItemsUpdateResponse>>;
|
|
27
|
+
checkoutFulfillment(params: ICheckoutFulfillmentParams): Promise<ApiResult<ICheckoutFulfillmentResponse>>;
|
|
27
28
|
getPaymentSession(cartId: string, params?: {
|
|
28
29
|
checkoutToken?: string;
|
|
29
30
|
sessionType?: CheckoutPaymentSessionType;
|
|
@@ -38,6 +38,12 @@ export interface ICheckoutTipUpdatedEventData {
|
|
|
38
38
|
tip: number;
|
|
39
39
|
}>;
|
|
40
40
|
}
|
|
41
|
+
export interface ICheckoutDeliveryMethodUpdatedEventData {
|
|
42
|
+
cartId: string;
|
|
43
|
+
fulfillmentType: string;
|
|
44
|
+
previousFulfillmentType: string;
|
|
45
|
+
fulfillmentId: string;
|
|
46
|
+
}
|
|
41
47
|
export interface ICheckoutFailedEventData {
|
|
42
48
|
message: string;
|
|
43
49
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { IAddressActionEventData, IAddressFailedEventData } from '@/core/pubsub/interfaces/address.interface';
|
|
2
2
|
import type { ICartFailedEventData, ICartItemAddedEventData, ICartItemEngravingUpdatedEventData, ICartItemQuantityChangedEventData, ICartItemRemovedEventData, ICartLoadedEventData, ICartProductAddEventData, ICartProductAddFailedEventData, ICartPromoCodeEventData, ICartPromoCodeFailedEventData, ICartShopRetailerEventData, ICartUpdatedEventData } from '@/core/pubsub/interfaces/cart.interface';
|
|
3
|
-
import type { ICheckoutBillingInformationUpdatedEventData, ICheckoutCustomerInformationUpdatedEventData, ICheckoutExpressCheckoutAvailabilityEventData, ICheckoutFailedEventData, ICheckoutGiftCardEventData, ICheckoutGiftCardFailedEventData, ICheckoutGiftInformationUpdatedEventData, ICheckoutItemEngravingUpdatedEventData, ICheckoutItemQuantityChangedEventData, ICheckoutItemRemovedEventData, ICheckoutLoadedEventData, ICheckoutMarketingPreferencesToggleEventData, ICheckoutProductAddEventData, ICheckoutProductAddFailedEventData, ICheckoutPromoCodeEventData, ICheckoutPromoCodeFailedEventData, ICheckoutSubmitCompletedEventData, ICheckoutSubmitFailedEventData, ICheckoutSubmitStartedEventData, ICheckoutTipUpdatedEventData, ICheckoutToggleEventData } from '@/core/pubsub/interfaces/checkout.interface';
|
|
3
|
+
import type { ICheckoutBillingInformationUpdatedEventData, ICheckoutCustomerInformationUpdatedEventData, ICheckoutDeliveryMethodUpdatedEventData, ICheckoutExpressCheckoutAvailabilityEventData, ICheckoutFailedEventData, ICheckoutGiftCardEventData, ICheckoutGiftCardFailedEventData, ICheckoutGiftInformationUpdatedEventData, ICheckoutItemEngravingUpdatedEventData, ICheckoutItemQuantityChangedEventData, ICheckoutItemRemovedEventData, ICheckoutLoadedEventData, ICheckoutMarketingPreferencesToggleEventData, ICheckoutProductAddEventData, ICheckoutProductAddFailedEventData, ICheckoutPromoCodeEventData, ICheckoutPromoCodeFailedEventData, ICheckoutSubmitCompletedEventData, ICheckoutSubmitFailedEventData, ICheckoutSubmitStartedEventData, ICheckoutTipUpdatedEventData, ICheckoutToggleEventData } from '@/core/pubsub/interfaces/checkout.interface';
|
|
4
4
|
import type { IProductAddToCartEventData, IProductFulfillmentChangedEventData, IProductFulfillmentTypeChangedEventData, IProductLoadedEventData, IProductQuantityChangedEventData, IProductSizeChangedEventData } from '@/core/pubsub/interfaces/product.interface';
|
|
5
5
|
import { ELEMENTS_ACTIONS_EVENT } from '@/enums';
|
|
6
6
|
export interface IElementsClientIsReadyEventData {
|
|
@@ -69,6 +69,7 @@ export interface IElementsActionsEventsMap {
|
|
|
69
69
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_ITEM_QUANTITY_INCREASE]: ICheckoutItemQuantityChangedEventData;
|
|
70
70
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_ITEM_QUANTITY_DECREASE]: ICheckoutItemQuantityChangedEventData;
|
|
71
71
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_ITEM_ENGRAVING_UPDATED]: ICheckoutItemEngravingUpdatedEventData;
|
|
72
|
+
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_DELIVERY_METHOD_UPDATED]: ICheckoutDeliveryMethodUpdatedEventData;
|
|
72
73
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_TIP_UPDATED]: ICheckoutTipUpdatedEventData;
|
|
73
74
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_SUBMIT_STARTED]: ICheckoutSubmitStartedEventData;
|
|
74
75
|
[ELEMENTS_ACTIONS_EVENT.CHECKOUT_SUBMIT_COMPLETED]: ICheckoutSubmitCompletedEventData;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ICheckoutAmounts, ICheckoutBilling, ICheckoutCustomer, ICheckoutEvent, ICheckoutFulfillment, ICheckoutGiftCard, ICheckoutGiftRecipient, ICheckoutItem, ICheckoutMarketingPreferences, ICheckoutPaymentConfirm, ICheckoutPaymentSession, ICheckoutPresale, ICheckoutPromoCode, ICheckoutRetailer, ICheckoutShippingAddress } from '@/interfaces/api/checkout.interface';
|
|
1
|
+
import type { ICheckoutAmounts, ICheckoutBilling, ICheckoutCustomer, ICheckoutEvent, ICheckoutFulfillment, ICheckoutFulfillmentMethod, ICheckoutGiftCard, ICheckoutGiftRecipient, ICheckoutItem, ICheckoutMarketingPreferences, ICheckoutPaymentConfirm, ICheckoutPaymentSession, ICheckoutPresale, ICheckoutPromoCode, ICheckoutRetailer, ICheckoutShippingAddress } from '@/interfaces/api/checkout.interface';
|
|
2
2
|
export interface ICheckoutItemStore extends ICheckoutItem {
|
|
3
3
|
loading: boolean;
|
|
4
4
|
updating: boolean;
|
|
@@ -37,6 +37,13 @@ export interface ICheckoutPaymentFormStore {
|
|
|
37
37
|
isValid: boolean;
|
|
38
38
|
isSaving: boolean;
|
|
39
39
|
}
|
|
40
|
+
export interface ICheckoutDeliveryMethodStore {
|
|
41
|
+
methods: ICheckoutFulfillmentMethod[];
|
|
42
|
+
isExpanded: boolean;
|
|
43
|
+
isLoading: boolean;
|
|
44
|
+
isSwitching: boolean;
|
|
45
|
+
error: string | null;
|
|
46
|
+
}
|
|
40
47
|
export interface ICheckoutStore {
|
|
41
48
|
initialized: boolean;
|
|
42
49
|
token: string;
|
|
@@ -45,6 +52,7 @@ export interface ICheckoutStore {
|
|
|
45
52
|
isGift: boolean;
|
|
46
53
|
marketingPreferences: ICheckoutMarketingPreferences;
|
|
47
54
|
appliedSavedMarketingPreferences: Partial<ICheckoutMarketingPreferences>;
|
|
55
|
+
deliveryMethod: ICheckoutDeliveryMethodStore;
|
|
48
56
|
customerForm: ICheckoutCustomerFormStore;
|
|
49
57
|
giftRecipientForm: ICheckoutGiftRecipientFormStore;
|
|
50
58
|
paymentForm: ICheckoutPaymentFormStore;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { IAddressStore } from '@/core/store/interfaces/address.interface';
|
|
2
2
|
import type { ICartFulfillmentStore, ICartItemStore, ICartRetailerStore, ICartStore } from '@/core/store/interfaces/cart.interface';
|
|
3
|
-
import type { ICheckoutCustomerFormStore, ICheckoutExpressStore, ICheckoutGiftRecipientFormStore, ICheckoutItemStore, ICheckoutPaymentFormStore, ICheckoutPaymentMethodStore, ICheckoutPaymentSessionStore, ICheckoutStore } from '@/core/store/interfaces/checkout.interface';
|
|
3
|
+
import type { ICheckoutCustomerFormStore, ICheckoutDeliveryMethodStore, ICheckoutExpressStore, ICheckoutGiftRecipientFormStore, ICheckoutItemStore, ICheckoutPaymentFormStore, ICheckoutPaymentMethodStore, ICheckoutPaymentSessionStore, ICheckoutStore } from '@/core/store/interfaces/checkout.interface';
|
|
4
4
|
import type { ICheckoutInjection, ICheckoutMetadata, IElementsMetadataStore } from '@/core/store/interfaces/metadata.interface';
|
|
5
5
|
import type { IProductSizeStore, IProductStore } from '@/core/store/interfaces/product.interface';
|
|
6
6
|
import type { IPLProductStore, IProductListStore } from '@/core/store/interfaces/product-list.interface';
|
|
@@ -36,7 +36,7 @@ export interface IPersistedStore {
|
|
|
36
36
|
export interface IPersistedStoreAction {
|
|
37
37
|
success: boolean;
|
|
38
38
|
}
|
|
39
|
-
export type StorePaths = keyof IGlobalStore | `products.${string}` | `products.${string}.${keyof IProductStore}` | `products.${string}.sizes.${string}` | `products.${string}.sizes.${string}.${keyof IProductSizeStore}` | `address.${keyof IAddressStore}` | `cart.${keyof ICartStore}` | `cart.items.${string}` | `cart.items.${string}.${keyof ICartItemStore}` | `cart.retailers.${string}` | `cart.items.${string}.${keyof ICartRetailerStore}` | `cart.fulfillments.${string}` | `cart.fulfillments.${string}.${keyof ICartFulfillmentStore}` | `cart.promoCode.${keyof ICartPromoCode}` | `ui.${keyof IUIStore}` | `ui.drawer.${keyof IDrawerStore}` | `checkout.${keyof ICheckoutStore}` | `checkout.customerForm.${keyof ICheckoutCustomerFormStore}` | `checkout.giftRecipientForm.${keyof ICheckoutGiftRecipientFormStore}` | `checkout.paymentForm.${keyof ICheckoutPaymentFormStore}` | `checkout.paymentForm.paymentSession.${keyof ICheckoutPaymentSessionStore}` | `checkout.paymentForm.paymentMethod.${keyof ICheckoutPaymentMethodStore}` | `checkout.express.${keyof ICheckoutExpressStore}` | `checkout.presale.${keyof ICheckoutPresale}` | `checkout.marketingPreferences.${keyof ICheckoutMarketingPreferences}` | `checkout.giftRecipient.${keyof ICheckoutGiftRecipient}` | `checkout.giftCards.${string}` | `checkout.promoCode.${keyof ICheckoutPromoCode}` | `checkout.items.${string}` | `checkout.items.${string}.${keyof ICheckoutItemStore}` | `checkout.retailers.${string}` | `checkout.retailers.${string}.${keyof ICheckoutRetailer}` | `checkout.fulfillments.${string}` | `productsList.${string}` | `productsList.${string}.${keyof IProductListStore}` | `productsList.${string}.products.${string}` | `productsList.${string}.products.${string}.${keyof IPLProductStore}` | `metadata.${keyof IElementsMetadataStore}` | `metadata.checkout.${keyof ICheckoutMetadata}` | `metadata.checkout.injection.${keyof ICheckoutInjection}`;
|
|
39
|
+
export type StorePaths = keyof IGlobalStore | `products.${string}` | `products.${string}.${keyof IProductStore}` | `products.${string}.sizes.${string}` | `products.${string}.sizes.${string}.${keyof IProductSizeStore}` | `address.${keyof IAddressStore}` | `cart.${keyof ICartStore}` | `cart.items.${string}` | `cart.items.${string}.${keyof ICartItemStore}` | `cart.retailers.${string}` | `cart.items.${string}.${keyof ICartRetailerStore}` | `cart.fulfillments.${string}` | `cart.fulfillments.${string}.${keyof ICartFulfillmentStore}` | `cart.promoCode.${keyof ICartPromoCode}` | `ui.${keyof IUIStore}` | `ui.drawer.${keyof IDrawerStore}` | `checkout.${keyof ICheckoutStore}` | `checkout.deliveryMethod.${keyof ICheckoutDeliveryMethodStore}` | `checkout.customerForm.${keyof ICheckoutCustomerFormStore}` | `checkout.giftRecipientForm.${keyof ICheckoutGiftRecipientFormStore}` | `checkout.paymentForm.${keyof ICheckoutPaymentFormStore}` | `checkout.paymentForm.paymentSession.${keyof ICheckoutPaymentSessionStore}` | `checkout.paymentForm.paymentMethod.${keyof ICheckoutPaymentMethodStore}` | `checkout.express.${keyof ICheckoutExpressStore}` | `checkout.presale.${keyof ICheckoutPresale}` | `checkout.marketingPreferences.${keyof ICheckoutMarketingPreferences}` | `checkout.giftRecipient.${keyof ICheckoutGiftRecipient}` | `checkout.giftCards.${string}` | `checkout.promoCode.${keyof ICheckoutPromoCode}` | `checkout.items.${string}` | `checkout.items.${string}.${keyof ICheckoutItemStore}` | `checkout.retailers.${string}` | `checkout.retailers.${string}.${keyof ICheckoutRetailer}` | `checkout.fulfillments.${string}` | `productsList.${string}` | `productsList.${string}.${keyof IProductListStore}` | `productsList.${string}.products.${string}` | `productsList.${string}.products.${string}.${keyof IPLProductStore}` | `metadata.${keyof IElementsMetadataStore}` | `metadata.checkout.${keyof ICheckoutMetadata}` | `metadata.checkout.injection.${keyof ICheckoutInjection}`;
|
|
40
40
|
interface MiddlewareContext {
|
|
41
41
|
action: string;
|
|
42
42
|
payload: any;
|
|
@@ -47,6 +47,7 @@ export declare const ELEMENTS_ACTIONS_EVENT: {
|
|
|
47
47
|
readonly CHECKOUT_ITEM_QUANTITY_INCREASE: "checkout_item_quantity_increase";
|
|
48
48
|
readonly CHECKOUT_ITEM_QUANTITY_DECREASE: "checkout_item_quantity_decrease";
|
|
49
49
|
readonly CHECKOUT_ITEM_ENGRAVING_UPDATED: "checkout_item_engraving_updated";
|
|
50
|
+
readonly CHECKOUT_DELIVERY_METHOD_UPDATED: "checkout_delivery_method_updated";
|
|
50
51
|
readonly CHECKOUT_TIP_UPDATED: "checkout_tip_updated";
|
|
51
52
|
readonly CHECKOUT_SUBMIT_STARTED: "checkout_submit_started";
|
|
52
53
|
readonly CHECKOUT_SUBMIT_COMPLETED: "checkout_submit_completed";
|
|
@@ -117,6 +118,7 @@ export declare const COMPONENT_TYPE: {
|
|
|
117
118
|
readonly CHECKOUT_INFORMATION: "checkout-information";
|
|
118
119
|
readonly CHECKOUT_STRIPE_HANDLER: "checkout-stripe-handler";
|
|
119
120
|
readonly CHECKOUT_STRIPE_FORM: "checkout-stripe-form";
|
|
121
|
+
readonly CHECKOUT_DELIVERY_METHOD: "checkout-delivery-method";
|
|
120
122
|
readonly CHECKOUT_PAYMENT: "checkout-payment";
|
|
121
123
|
readonly CHECKOUT_PAYMENT_SUMMARY: "checkout-payment-summary";
|
|
122
124
|
readonly CHECKOUT_BILLING: "checkout-billing";
|
|
@@ -122,6 +122,31 @@ export interface IAnonymousCheckoutAddProductResponse {
|
|
|
122
122
|
checkout: ICheckoutPrepare | null;
|
|
123
123
|
unavailableItems: IAnonymousCheckoutUnavailableItem[];
|
|
124
124
|
}
|
|
125
|
+
export type CheckoutFulfillmentUnavailableReason = 'product_not_available' | 'product_not_supported' | 'fulfillment_not_available' | 'outside_operating_hours';
|
|
126
|
+
export interface ICheckoutFulfillmentMethod {
|
|
127
|
+
type: FulfillmentType;
|
|
128
|
+
available: boolean;
|
|
129
|
+
selected: boolean;
|
|
130
|
+
fee: number;
|
|
131
|
+
expectation: string;
|
|
132
|
+
engravingExpectation: string;
|
|
133
|
+
fulfillmentId: string;
|
|
134
|
+
partNumber: string;
|
|
135
|
+
retailerId: string;
|
|
136
|
+
reason: CheckoutFulfillmentUnavailableReason | null;
|
|
137
|
+
}
|
|
138
|
+
export type ICheckoutFulfillmentCarryOver = Omit<ICheckoutPrepareParams, 'cartId' | 'token' | 'deliveryTips' | 'deliveryInstructions'>;
|
|
139
|
+
export interface ICheckoutFulfillmentParams {
|
|
140
|
+
cartId: string;
|
|
141
|
+
location: ILocation;
|
|
142
|
+
fulfillmentType?: FulfillmentType;
|
|
143
|
+
checkout?: ICheckoutFulfillmentCarryOver;
|
|
144
|
+
}
|
|
145
|
+
export interface ICheckoutFulfillmentResponse {
|
|
146
|
+
methods: ICheckoutFulfillmentMethod[];
|
|
147
|
+
cart: ICart | null;
|
|
148
|
+
checkout: ICheckoutPrepare | null;
|
|
149
|
+
}
|
|
125
150
|
export interface ICheckoutAmounts {
|
|
126
151
|
subtotal: number;
|
|
127
152
|
engraving: number;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { BaseCommand } from '@/core/command/base-command.service';
|
|
2
2
|
import type { ICheckoutDetailsEventData } from '@/core/pubsub/interfaces/checkout.interface';
|
|
3
3
|
import type { ICheckoutPaymentMethodStore } from '@/core/store/interfaces/checkout.interface';
|
|
4
|
+
import type { FulfillmentType } from '@/enums';
|
|
4
5
|
import type { CheckoutPaymentSessionType, ICheckoutBilling, ICheckoutCustomer, ICheckoutGiftRecipient, ICheckoutMarketingPreferences, ICheckoutPaymentSession, ICheckoutPrepare } from '@/interfaces/api/checkout.interface';
|
|
5
6
|
import type { AddItemParams } from '@/modules/cart/cart.commands';
|
|
6
7
|
import type { PresaleExpiredReason } from '@/modules/checkout/components';
|
|
@@ -116,6 +117,16 @@ export declare class CheckoutCommands extends BaseCommand {
|
|
|
116
117
|
expressPaymentIntentId?: string;
|
|
117
118
|
}): Promise<void>;
|
|
118
119
|
private updateStoreFromCheckoutResponse;
|
|
120
|
+
private getDeliveryMethodLocation;
|
|
121
|
+
loadDeliveryMethods(): Promise<void>;
|
|
122
|
+
toggleDeliveryMethod(): void;
|
|
123
|
+
switchDeliveryMethod(fulfillmentType: FulfillmentType): Promise<void>;
|
|
124
|
+
private watchForReturnFromAddress;
|
|
125
|
+
relocateCheckout(): Promise<void>;
|
|
126
|
+
private requestFulfillment;
|
|
127
|
+
private deliveryMethodCarryOver;
|
|
128
|
+
private refreshPaymentAfterDeliveryMethodSwitch;
|
|
129
|
+
changeDeliveryLocation(trigger?: HTMLElement | null): void;
|
|
119
130
|
private syncFromItemUpdate;
|
|
120
131
|
private syncCheckoutState;
|
|
121
132
|
private refreshCheckout;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { BaseComponent } from '@/core/base-component.service';
|
|
2
|
+
import type { ICheckoutComponent } from '@/interfaces/configs';
|
|
3
|
+
export declare class CheckoutDeliveryMethodComponent extends BaseComponent<null, ICheckoutComponent> {
|
|
4
|
+
get hostClasses(): string[];
|
|
5
|
+
constructor();
|
|
6
|
+
protected connected(): void;
|
|
7
|
+
onStoreWatch(): void;
|
|
8
|
+
private hasOrderMoved;
|
|
9
|
+
private isSameAddress;
|
|
10
|
+
protected afterRender(): void;
|
|
11
|
+
protected template(): HTMLElement[];
|
|
12
|
+
private createHeader;
|
|
13
|
+
private createSummaryRow;
|
|
14
|
+
private createOptions;
|
|
15
|
+
private createOptionCard;
|
|
16
|
+
private createOptionTitleRow;
|
|
17
|
+
private describeOption;
|
|
18
|
+
private describeUnavailable;
|
|
19
|
+
private describeForScreenReader;
|
|
20
|
+
private createChangeLocationButton;
|
|
21
|
+
private formatFee;
|
|
22
|
+
}
|
|
@@ -2,18 +2,12 @@ import { BaseComponent, type IOnStoreChanged } from '@/core/base-component.servi
|
|
|
2
2
|
import type { ICheckoutComponent } from '@/interfaces/configs';
|
|
3
3
|
export declare class CheckoutPlaceOrderButtonComponent extends BaseComponent<null, ICheckoutComponent> {
|
|
4
4
|
private placeOrderButton;
|
|
5
|
-
private errorContainer;
|
|
6
|
-
private errorTimeoutId;
|
|
7
5
|
private lastButtonState;
|
|
8
|
-
private lastAnnouncedError;
|
|
9
6
|
get hostClasses(): string[];
|
|
10
7
|
constructor();
|
|
11
8
|
afterRender(): void;
|
|
12
|
-
disconnected(): void;
|
|
13
9
|
onStoreWatch(changes: IOnStoreChanged[]): void;
|
|
14
10
|
private updateButtonState;
|
|
15
|
-
private clearErrorTimeout;
|
|
16
|
-
private updateErrorDisplay;
|
|
17
11
|
private determineButtonState;
|
|
18
12
|
private handlePlaceOrderClick;
|
|
19
13
|
protected template(): HTMLElement[];
|
|
@@ -5,6 +5,7 @@ export * from './checkout-buyer-summary.component';
|
|
|
5
5
|
export * from './checkout-completed.component';
|
|
6
6
|
export * from './checkout-deliver-to.component';
|
|
7
7
|
export * from './checkout-deliver-to-summary.component';
|
|
8
|
+
export * from './checkout-delivery-method.component';
|
|
8
9
|
export * from './checkout-express-checkout.component';
|
|
9
10
|
export * from './checkout-express-completion.component';
|
|
10
11
|
export * from './checkout-gift-cards.component';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type FulfillmentType } from '@/enums';
|
|
1
2
|
export declare const STRIPE_SLOT_NAME = "lce-checkout-stripe-slot";
|
|
2
3
|
export declare const STRIPE_MINIMUM_CHARGE = 50;
|
|
3
4
|
export declare const EXPRESS_CHECKOUT_SLOT_NAME = "lce-checkout-express-checkout-slot";
|
|
@@ -33,3 +34,12 @@ export declare const billingFormFields: {
|
|
|
33
34
|
readonly zipCode: "zipCode";
|
|
34
35
|
};
|
|
35
36
|
export type BillingFieldName = (typeof billingFormFields)[keyof typeof billingFormFields];
|
|
37
|
+
export declare const DELIVERY_METHOD_LABEL: Record<FulfillmentType, string>;
|
|
38
|
+
export declare const DELIVERY_METHOD_COLLAPSED_LABEL: Record<FulfillmentType, string>;
|
|
39
|
+
export declare const DELIVERY_METHOD_UNAVAILABLE_COPY: Record<FulfillmentType, {
|
|
40
|
+
unavailable: string;
|
|
41
|
+
closed: string;
|
|
42
|
+
unsupported: string;
|
|
43
|
+
}>;
|
|
44
|
+
export declare const DELIVERY_METHOD_FREE_SHIPPING_THRESHOLD = 5000;
|
|
45
|
+
export declare const CHANGE_LOCATION_FOCUS_KEY = "checkout-delivery-method-change-location";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getDeliveryMethodStyles: () => string;
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import { BaseComponent, type IOnStoreChanged } from '@/core/base-component.service';
|
|
2
2
|
import type { StorePaths } from '@/core/store/interfaces/core.interface';
|
|
3
|
+
export type AlertLevel = 'success' | 'warning' | 'error';
|
|
3
4
|
export interface IAlertComponentParams {
|
|
4
|
-
|
|
5
|
-
fromEvents?: boolean;
|
|
5
|
+
storePaths: StorePaths[];
|
|
6
6
|
showFirstEvent?: boolean;
|
|
7
7
|
autoHideDelay?: number;
|
|
8
8
|
}
|
|
9
9
|
export declare class AlertComponent extends BaseComponent<IAlertComponentParams, null> {
|
|
10
10
|
private hideTimeout;
|
|
11
|
-
private
|
|
12
|
-
private lastAnnouncedKey;
|
|
11
|
+
private lastAnnounced;
|
|
13
12
|
get hostClasses(): string[];
|
|
14
13
|
beforeSetupStoreWatchers(): void;
|
|
15
|
-
afterRender(): void;
|
|
16
14
|
onStoreWatch(changes: IOnStoreChanged[]): void;
|
|
17
|
-
|
|
18
|
-
private createErrorElement;
|
|
19
|
-
private scheduleHide;
|
|
20
|
-
private hideAllErrors;
|
|
21
|
-
private updateAlert;
|
|
15
|
+
afterRender(): void;
|
|
22
16
|
protected template(): HTMLElement[];
|
|
17
|
+
private getAlerts;
|
|
18
|
+
private discard;
|
|
19
|
+
private createAlert;
|
|
20
|
+
private createDismissButton;
|
|
21
|
+
private scheduleSuccessHide;
|
|
22
|
+
private announce;
|
|
23
23
|
disconnectedCallback(): void;
|
|
24
24
|
}
|
|
@@ -121,6 +121,14 @@ on render, and a live region recreated with its text already in place is not ann
|
|
|
121
121
|
`aria-selected` / `aria-checked` — not toggle buttons with `aria-pressed`, which would describe
|
|
122
122
|
each choice as an independent on/off switch. Product sizes are a `listbox`; the delivery options
|
|
123
123
|
under each method are a `radiogroup`.
|
|
124
|
+
- Checkout's **Delivery Method** section is an accordion whose header is a real `button` carrying
|
|
125
|
+
`aria-expanded`, and whose two methods are a `radiogroup` of `radio` cards. Choosing one re-prices
|
|
126
|
+
the order, so selection does not follow focus here either: arrow keys move between the methods and
|
|
127
|
+
`Enter` / `Space` commits, rather than committing a switch the shopper was only passing through.
|
|
128
|
+
A method that cannot fulfil is `aria-disabled` and not activatable, but the **Change Location**
|
|
129
|
+
button inside it stays reachable — it is the way out of that state, so it must not be sealed in
|
|
130
|
+
with the option it sits under. Each card names the method, its fee and its timing, or, when it
|
|
131
|
+
cannot fulfil, the reason why.
|
|
124
132
|
- The delivery-method controls are a `tablist` of `tab`s. Only one method's options are rendered at
|
|
125
133
|
a time, so the selected tab carries `aria-controls` and the region it swaps in is the matching
|
|
126
134
|
`tabpanel`, labelled by that tab; the inactive tab points at nothing, because there is nothing
|
|
@@ -371,6 +371,17 @@ window.addEventListener('lce:actions.checkout_item_quantity_decrease', (event) =
|
|
|
371
371
|
});
|
|
372
372
|
```
|
|
373
373
|
|
|
374
|
+
### Delivery Method
|
|
375
|
+
|
|
376
|
+
Fires when the shopper switches a single-item checkout between same-day delivery and shipping.
|
|
377
|
+
|
|
378
|
+
```javascript
|
|
379
|
+
window.addEventListener('lce:actions.checkout_delivery_method_updated', (event) => {
|
|
380
|
+
const { fulfillmentType, previousFulfillmentType } = event.detail.data;
|
|
381
|
+
console.log(`Delivery method: ${previousFulfillmentType} to ${fulfillmentType}`);
|
|
382
|
+
});
|
|
383
|
+
```
|
|
384
|
+
|
|
374
385
|
### Tips
|
|
375
386
|
|
|
376
387
|
```javascript
|
package/docs/v1/guides/events.md
CHANGED
|
@@ -706,6 +706,22 @@ window.addEventListener('lce:actions.checkout_item_engraving_updated', (event) =
|
|
|
706
706
|
});
|
|
707
707
|
```
|
|
708
708
|
|
|
709
|
+
### `lce:actions.checkout_delivery_method_updated`
|
|
710
|
+
|
|
711
|
+
Fires when the shopper moves a single-item checkout between same-day delivery and shipping. The order
|
|
712
|
+
is re-priced, so the totals change with it.
|
|
713
|
+
|
|
714
|
+
**Data includes:** `cartId`, `fulfillmentType`, `previousFulfillmentType`, `fulfillmentId`.
|
|
715
|
+
|
|
716
|
+
**Example**
|
|
717
|
+
|
|
718
|
+
```javascript
|
|
719
|
+
window.addEventListener('lce:actions.checkout_delivery_method_updated', (event) => {
|
|
720
|
+
const { data } = event.detail;
|
|
721
|
+
console.log('Delivery method now', data.fulfillmentType);
|
|
722
|
+
});
|
|
723
|
+
```
|
|
724
|
+
|
|
709
725
|
### `lce:actions.checkout_tip_updated`
|
|
710
726
|
|
|
711
727
|
Fires when delivery tips are updated.
|
package/package.json
CHANGED