refactor(payment): PAYPAL-000 added paypal-commerce-button class

packages/paypal-commerce-integration/src/index.ts

@@ -1,3 +1,4 @@
+export { default as PayPalCommerceButton } from './paypal-commerce-button';
 export { default as PayPalCommerceIntegrationService } from './paypal-commerce-integration-service';
 export { default as PayPalCommerceRequestSender } from './paypal-commerce-request-sender';
 export { default as PayPalCommerceScriptLoader } from './paypal-commerce-script-loader';

packages/paypal-commerce-integration/src/paypal-commerce-button.ts

@@ -0,0 +1,96 @@
+import { isNil, omitBy } from 'lodash';
+
+import {
+    PayPalButtonStyleOptions,
+    PayPalCommerceButtonsOptions,
+    PayPalButtonStyleColor,
+    PayPalButtonStyleLabel,
+    PayPalButtonStyleShape,
+    PayPalCommerceSdk,
+} from '@bigcommerce/checkout-sdk/paypal-commerce-utils';
+import { PaymentMethod } from '@bigcommerce/checkout-sdk/payment-integration-api';
+
+import { PayPalCommerceInitializationData } from './paypal-commerce-types';
+
+interface PayPalCommerceRenderButtonOptions {
+    containerId: string;
+    config: PayPalCommerceButtonsOptions;
+    currencyCode: string;
+    paymentMethod: PaymentMethod<PayPalCommerceInitializationData>; // TODO: update with
+    onEligibleFailed?: () => void;
+    onRenderButton?: () => void;
+}
+
+interface IPayPalCommerceButton {
+    render: (options: PayPalCommerceRenderButtonOptions) => void
+}
+
+export default class PayPalCommerceButton implements IPayPalCommerceButton {
+    constructor(private paypalCommerceSdk: PayPalCommerceSdk) {}
+
+    render({
+       containerId,
+       config,
+       currencyCode,
+       onEligibleFailed,
+       paymentMethod,
+    }: PayPalCommerceRenderButtonOptions): void {
+        // TODO:
+        const paypalButtonsSdk = this.paypalCommerceSdk.getPayPalButtonsSdk();
+
+        const buttonConfig: PayPalCommerceButtonsOptions = omitBy(config, isNil);
+
+        const paypalButton = paypalButtonsSdk.Buttons({
+            ...buttonConfig,
+            style: this.getValidButtonStyle(buttonConfig.style),
+        });
+
+        if (paypalButton.isEligible()) {
+            paypalButton.render(`#${containerId}`);
+        } else {
+            if (onEligibleFailed && typeof onEligibleFailed === 'function') {
+                onEligibleFailed();
+            } else {
+                console.error('Failed to render PayPal button');
+            }
+        }
+    }
+
+    /**
+     *
+     * Styles related methods
+     *
+     */
+    getValidButtonStyle(style?: PayPalButtonStyleOptions): PayPalButtonStyleOptions {
+        const { color, height, label, shape } = style || {};
+
+        const validStyles = {
+            color: color && PayPalButtonStyleColor[color] ? color : undefined,
+            height: this.getValidHeight(height),
+            label: label && PayPalButtonStyleLabel[label] ? label : undefined,
+            shape: shape && PayPalButtonStyleShape[shape] ? shape : undefined,
+        };
+
+        return omitBy(validStyles, isNil);
+    }
+
+    private getValidHeight(height?: number): number {
+        const defaultHeight = 40;
+        const minHeight = 25;
+        const maxHeight = 55;
+
+        if (!height || typeof height !== 'number') {
+            return defaultHeight;
+        }
+
+        if (height > maxHeight) {
+            return maxHeight;
+        }
+
+        if (height < minHeight) {
+            return minHeight;
+        }
+
+        return height;
+    }
+}

packages/paypal-commerce-integration/src/paypal-commerce-credit/paypal-commerce-credit-button-strategy.ts

@@ -102,6 +102,11 @@ export default class PayPalCommerceCreditButtonStrategy implements CheckoutButto
     ): void {
         const { buyNowInitializeOptions, style, onComplete } = paypalcommercecredit;
 
+        // container id
+        // paypal sdk
+        // config
+        // onEligibleFail
+
         const paypalSdk = this.paypalCommerceIntegrationService.getPayPalSdkOrThrow();
         const state = this.paymentIntegrationService.getState();
         const paymentMethod =

packages/paypal-commerce-integration/src/paypal-commerce-integration-service.ts

@@ -14,21 +14,23 @@ import {
     RequestOptions,
     ShippingOption,
 } from '@bigcommerce/checkout-sdk/payment-integration-api';
+import {
+    PayPalButtonStyleOptions,
+    PayPalOrderDetails,
+    PayPalButtonStyleColor,
+    PayPalButtonStyleLabel,
+    PayPalButtonStyleShape,
+} from '@bigcommerce/checkout-sdk/paypal-commerce-utils'
 
 import PayPalCommerceRequestSender from './paypal-commerce-request-sender';
 import PayPalCommerceScriptLoader from './paypal-commerce-script-loader';
 import {
-    PayPalButtonStyleOptions,
     PayPalBuyNowInitializeOptions,
     PayPalCommerceInitializationData,
     PayPalCreateOrderCardFieldsResponse,
     PayPalCreateOrderRequestBody,
-    PayPalOrderDetails,
     PayPalOrderStatus,
     PayPalSDK,
-    StyleButtonColor,
-    StyleButtonLabel,
-    StyleButtonShape,
 } from './paypal-commerce-types';
 
 export default class PayPalCommerceIntegrationService {
@@ -288,19 +290,21 @@ export default class PayPalCommerceIntegrationService {
      * Buttons style methods
      *
      */
+    // TODO: remove this method when all PP buttons will be updated with PayPalCommerceButton class
     getValidButtonStyle(style?: PayPalButtonStyleOptions): PayPalButtonStyleOptions {
         const { color, height, label, shape } = style || {};
 
         const validStyles = {
-            color: color && StyleButtonColor[color] ? color : undefined,
+            color: color && PayPalButtonStyleColor[color] ? color : undefined,
             height: this.getValidHeight(height),
-            label: label && StyleButtonLabel[label] ? label : undefined,
-            shape: shape && StyleButtonShape[shape] ? shape : undefined,
+            label: label && PayPalButtonStyleLabel[label] ? label : undefined,
+            shape: shape && PayPalButtonStyleShape[shape] ? shape : undefined,
         };
 
         return omitBy(validStyles, isNil);
     }
 
+    // TODO: remove this method when all PP buttons will be updated with PayPalCommerceButton class
     getValidHeight(height?: number): number {
         const defaultHeight = 40;
         const minHeight = 25;

packages/paypal-commerce-integration/src/paypal-commerce-types.ts

@@ -4,6 +4,11 @@ import {
     ShippingOption,
     VaultedInstrument,
 } from '@bigcommerce/checkout-sdk/payment-integration-api';
+import {
+    PayPalCommerceButtonsOptions,
+    PayPalCommerceButtonMethods,
+    PayPalButtonStyleOptions,
+} from '@bigcommerce/checkout-sdk/paypal-commerce-utils';
 
 /**
  *
@@ -107,7 +112,7 @@ export interface PayPalSDK {
         render(data: PayPalCommerceHostedFieldsRenderOptions): Promise<PayPalCommerceHostedFields>;
     };
     Legal: PayPalLegal & LegalFunding;
-    Buttons(options: PayPalCommerceButtonsOptions): PayPalCommerceButtons;
+    Buttons(options: PayPalCommerceButtonsOptions): PayPalCommerceButtonMethods;
     PaymentFields(options: PayPalCommercePaymentFieldsOptions): PayPalCommercePaymentFields;
     Messages(options: PayPalCommerceMessagesOptions): PayPalCommerceMessages;
 }
@@ -219,6 +224,7 @@ export interface PayPalCommerceHostWindow extends Window {
  * PayPal Commerce Initialization Data
  *
  */
+// TODO: remove this interface because it was moved to paypal-commerce-utils package
 export interface PayPalCommerceInitializationData {
     attributionId?: string;
     availableAlternativePaymentMethods: FundingType;
@@ -324,143 +330,6 @@ export interface PayPalCommerceHostedFieldsFieldData {
     isValid: boolean;
 }
 
-/**
- *
- * PayPal Commerce Buttons
- *
- */
-export interface PayPalCommerceButtons {
-    render(id: string): void;
-    close(): void;
-    isEligible(): boolean;
-}
-
-export interface PayPalCommerceButtonsOptions {
-    experience?: string;
-    style?: PayPalButtonStyleOptions;
-    fundingSource: string;
-    createOrder(): Promise<string>;
-    onApprove(
-        data: ApproveCallbackPayload,
-        actions: ApproveCallbackActions,
-    ): Promise<boolean | void> | void;
-    onInit?(data: InitCallbackPayload, actions: InitCallbackActions): Promise<void>;
-    onComplete?(data: CompleteCallbackDataPayload): Promise<void>;
-    onClick?(data: ClickCallbackPayload, actions: ClickCallbackActions): Promise<void> | void;
-    onError?(error: Error): void;
-    onCancel?(): void;
-    onShippingChange?(data: ShippingChangeCallbackPayload): Promise<void>;
-}
-
-export interface ClickCallbackPayload {
-    fundingSource: string;
-}
-
-export interface ClickCallbackActions {
-    reject(): void;
-    resolve(): void;
-}
-
-export interface InitCallbackPayload {
-    correlationID: string;
-}
-
-export interface InitCallbackActions {
-    disable(): void;
-    enable(): void;
-}
-
-export interface ShippingChangeCallbackPayload {
-    orderID: string;
-    shipping_address: PayPalAddress;
-    selected_shipping_option: PayPalSelectedShippingOption;
-}
-
-export interface PayPalAddress {
-    city: string;
-    country_code: string;
-    postal_code: string;
-    state: string;
-}
-
-export interface PayPalSelectedShippingOption {
-    amount: {
-        currency_code: string;
-        value: string;
-    };
-    id: string;
-    label: string;
-    selected: boolean;
-    type: string;
-}
-
-export interface ApproveCallbackPayload {
-    orderID?: string;
-}
-
-export interface ApproveCallbackActions {
-    order: {
-        get: () => Promise<PayPalOrderDetails>;
-    };
-}
-
-export interface PayPalOrderDetails {
-    payer: {
-        name: {
-            given_name: string;
-            surname: string;
-        };
-        email_address: string;
-        address: PayPalOrderAddress;
-    };
-    purchase_units: Array<{
-        shipping: {
-            address: PayPalOrderAddress;
-        };
-    }>;
-}
-
-export interface PayPalOrderAddress {
-    address_line_1: string;
-    admin_area_2: string;
-    admin_area_1?: string;
-    postal_code: string;
-    country_code: string;
-}
-
-export interface CompleteCallbackDataPayload {
-    intent: string;
-    orderID: string;
-}
-
-export enum StyleButtonLabel {
-    paypal = 'paypal',
-    checkout = 'checkout',
-    buynow = 'buynow',
-    pay = 'pay',
-    installment = 'installment',
-}
-
-export enum StyleButtonColor {
-    gold = 'gold',
-    blue = 'blue',
-    silver = 'silver',
-    black = 'black',
-    white = 'white',
-}
-
-export enum StyleButtonShape {
-    pill = 'pill',
-    rect = 'rect',
-}
-
-export interface PayPalButtonStyleOptions {
-    color?: StyleButtonColor;
-    shape?: StyleButtonShape;
-    height?: number;
-    label?: StyleButtonLabel;
-}
-
 /**
  *
  * PayPal Commerce Payment fields