feat(payment): PAYPAL-4867 POC of headless wallet buttons

packages/core/auto-export.config.json

@@ -14,6 +14,11 @@
             "inputPath": "packages/*/src/index.ts",
             "outputPath": "packages/core/src/generated/checkout-button-strategies.ts",
             "memberPattern": "^create.+ButtonStrategy$"
+        },
+        {
+            "inputPath": "packages/*/src/index.ts",
+            "outputPath": "packages/core/src/generated/checkout-headless-wallet-strategies.ts",
+            "memberPattern": "^create.+HeadlessWalletStrategy$"
         }
     ]
 }

packages/core/src/bundles/headless-checkout-wallet.ts

@@ -0,0 +1,3 @@
+export { createTimeout } from '@bigcommerce/request-sender';
+
+export { createHeadlessCheckoutWalletInitializer } from '../checkout-buttons';

packages/core/src/cart/cart-action-creator.ts

@@ -0,0 +1,42 @@
+import { createAction, createErrorAction, ThunkAction } from '@bigcommerce/data-store';
+import { Observable, Observer } from 'rxjs';
+
+import { RequestOptions } from '@bigcommerce/checkout-sdk/payment-integration-api';
+
+import { InternalCheckoutSelectors } from '../checkout';
+import { cachableAction } from '../common/data-store';
+import ActionOptions from '../common/data-store/action-options';
+
+import { CartActionType, LoadCartAction } from './cart-actions';
+import CartRequestSender from './cart-request-sender';
+
+export default class CartActionCreator {
+    constructor(private _cartRequestSender: CartRequestSender) {}
+
+    @cachableAction
+    loadCard(
+        cartId: string,
+        options?: RequestOptions & ActionOptions,
+    ): ThunkAction<LoadCartAction, InternalCheckoutSelectors> {
+        return (store) => {
+            return Observable.create((observer: Observer<LoadCartAction>) => {
+                const state = store.getState();
+                const host = state.config.getHost();
+
+                observer.next(createAction(CartActionType.LoadCartRequested, undefined));
+
+                this._cartRequestSender
+                    .loadCard(cartId, host, options)
+                    .then((response) => {
+                        observer.next(
+                            createAction(CartActionType.LoadCartSucceeded, response.body),
+                        );
+                        observer.complete();
+                    })
+                    .catch((response) => {
+                        observer.error(createErrorAction(CartActionType.LoadCartFailed, response));
+                    });
+            });
+        };
+    }
+}

packages/core/src/cart/cart-actions.ts

@@ -0,0 +1,26 @@
+import { Action } from '@bigcommerce/data-store';
+
+import Cart from './cart';
+
+export enum CartActionType {
+    LoadCartRequested = 'LOAD_CART_REQUESTED',
+    LoadCartSucceeded = 'LOAD_CART_SUCCEEDED',
+    LoadCartFailed = 'LOAD_CART_FAILED',
+}
+
+export type LoadCartAction =
+    | LoadCartRequestedAction
+    | LoadCartSucceededAction
+    | LoadCartFailedAction;
+
+export interface LoadCartRequestedAction extends Action {
+    type: CartActionType.LoadCartRequested;
+}
+
+export interface LoadCartSucceededAction extends Action<Cart> {
+    type: CartActionType.LoadCartSucceeded;
+}
+
+export interface LoadCartFailedAction extends Action<Error> {
+    type: CartActionType.LoadCartFailed;
+}

packages/core/src/cart/cart-reducer.ts

@@ -13,6 +13,7 @@ import {
 import { ConsignmentAction, ConsignmentActionType } from '../shipping';
 
 import Cart from './cart';
+import { CartActionType, LoadCartAction } from './cart-actions';
 import CartState, { CartErrorsState, CartStatusesState, DEFAULT_STATE } from './cart-state';
 
 export default function cartReducer(state: CartState = DEFAULT_STATE, action: Action): CartState {
@@ -32,7 +33,8 @@ function dataReducer(
         | CheckoutAction
         | ConsignmentAction
         | CouponAction
-        | GiftCertificateAction,
+        | GiftCertificateAction
+        | LoadCartAction,
 ): Cart | undefined {
     switch (action.type) {
         case BillingAddressActionType.UpdateBillingAddressSucceeded:
@@ -48,6 +50,9 @@ function dataReducer(
         case GiftCertificateActionType.RemoveGiftCertificateSucceeded:
             return objectMerge(data, action.payload && action.payload.cart);
 
+        case CartActionType.LoadCartSucceeded:
+            return objectMerge(data, action.payload && action.payload);
+
         default:
             return data;
     }

packages/core/src/cart/cart-request-sender.ts

@@ -4,6 +4,23 @@ import { BuyNowCartRequestBody, Cart } from '@bigcommerce/checkout-sdk/payment-i
 
 import { ContentType, RequestOptions, SDK_VERSION_HEADERS } from '../common/http-request';
 
+import { LineItemMap } from './index';
+
+interface LoadCartResponse {
+    amount: {
+        currencyCode: string;
+    };
+    entityId: string;
+    lineItems: {
+        physicalItems: Array<{
+            name: string;
+            entityId: string;
+            quantity: string;
+            productEntityId: string;
+        }>;
+    };
+}
+
 export default class CartRequestSender {
     constructor(private _requestSender: RequestSender) {}
 
@@ -19,4 +36,53 @@ export default class CartRequestSender {
 
         return this._requestSender.post(url, { body, headers, timeout });
     }
+
+    loadCard(cartId: string, host?: string, options?: RequestOptions): Promise<Response<Cart>> {
+        const path = 'cart-information';
+        const url = host ? `${host}/${path}` : `/${path}`;
+
+        const requestOptions: RequestOptions = {
+            ...options,
+            params: {
+                cartId,
+            },
+        };
+
+        return this._requestSender
+            .get<LoadCartResponse>(url, {
+                ...requestOptions,
+            })
+            .then(this.transformToCartResponse);
+    }
+
+    private transformToCartResponse(response: Response<LoadCartResponse>): Response<Cart> {
+        const {
+            body: { amount, entityId, lineItems },
+        } = response;
+
+        const mappedLineItems: LineItemMap = {
+            // TODO:: add all missing fields
+            // eslint-disable-next-line
+            // @ts-ignore
+            physicalItems: lineItems.physicalItems.map((item) => ({
+                id: item.entityId,
+                name: item.name,
+                quantity: item.quantity,
+                productId: item.productEntityId,
+            })),
+        };
+
+        return {
+            ...response,
+            body: {
+                id: entityId,
+                // eslint-disable-next-line
+                // @ts-ignore
+                currency: {
+                    code: amount.currencyCode,
+                },
+                lineItems: mappedLineItems,
+            },
+        };
+    }
 }

packages/core/src/cart/index.ts

@@ -14,6 +14,7 @@ export { default as LineItemMap } from './line-item-map';
 export { default as CartComparator } from './cart-comparator';
 export { default as CartRequestSender } from './cart-request-sender';
 export { default as cartReducer } from './cart-reducer';
+export { default as CartActionCreator } from './cart-action-creator';
 export {
     default as CartSelector,
     CartSelectorFactory,

packages/core/src/checkout-buttons/create-headless-checkout-wallet-initializer.ts

@@ -0,0 +1,43 @@
+import { createRequestSender } from '@bigcommerce/request-sender';
+
+import { createCheckoutStore } from '../checkout';
+import { ConfigState } from '../config';
+import * as defaultCheckoutHeadlessWalletStrategyFactories from '../generated/checkout-headless-wallet-strategies';
+import { PaymentMethodActionCreator, PaymentMethodRequestSender } from '../payment';
+import { createPaymentIntegrationService } from '../payment-integration';
+
+import createCheckoutButtonStrategyRegistryV2 from './create-checkout-button-registry-v2';
+import HeadlessCheckoutWalletInitializer from './headless-checkout-wallet-initializer';
+import HeadlessCheckoutWalletInitializerOptions from './headless-checkout-wallet-initializer-options';
+import HeadlessCheckoutWalletStrategyActionCreator from './headless-checkout-wallet-strategy-action-creator';
+
+export default function createHeadlessCheckoutWalletInitializer(
+    options?: HeadlessCheckoutWalletInitializerOptions,
+): HeadlessCheckoutWalletInitializer {
+    const { host, locale = 'en' } = options ?? {};
+
+    const config: ConfigState = {
+        meta: {
+            host,
+            locale,
+        },
+        errors: {},
+        statuses: {},
+    };
+
+    const store = createCheckoutStore({ config });
+    const requestSender = createRequestSender({ host });
+    const paymentIntegrationService = createPaymentIntegrationService(store);
+    const registryV2 = createCheckoutButtonStrategyRegistryV2(
+        paymentIntegrationService,
+        defaultCheckoutHeadlessWalletStrategyFactories,
+    );
+
+    return new HeadlessCheckoutWalletInitializer(
+        store,
+        new HeadlessCheckoutWalletStrategyActionCreator(
+            registryV2,
+            new PaymentMethodActionCreator(new PaymentMethodRequestSender(requestSender)),
+        ),
+    );
+}

packages/core/src/checkout-buttons/headless-checkout-wallet-initializer-options.ts

@@ -0,0 +1,4 @@
+export default interface HeadlessCheckoutWalletInitializerOptions {
+    host?: string;
+    locale?: string;
+}