@wearejh/m2-pwa-adyen 0.13.2 → 0.16.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.16.0](https://github.com/WeareJH/mage-mono/compare/v0.15.0...v0.16.0) (2022-10-24)
+
+**Note:** Version bump only for package @wearejh/m2-pwa-adyen
+
+
+
+
+
+# [0.15.0](https://github.com/WeareJH/mage-mono/compare/v0.14.0...v0.15.0) (2022-10-13)
+
+**Note:** Version bump only for package @wearejh/m2-pwa-adyen
+
+
+
+
+
+# [0.14.0](https://github.com/WeareJH/mage-mono/compare/v0.13.2...v0.14.0) (2022-10-13)
+
+
+### Features
+
+* add Giftcards via Adyen support ([#77](https://github.com/WeareJH/mage-mono/issues/77)) ([632bdbf](https://github.com/WeareJH/mage-mono/commit/632bdbf859202554296c4b47a7da067f3905e499))
+
+
+
+
+
 ## [0.13.2](https://github.com/WeareJH/mage-mono/compare/v0.13.0...v0.13.2) (2022-04-04)
 
 **Note:** Version bump only for package @wearejh/m2-pwa-adyen

package/lib/AdyenProvider.tsx

@@ -210,6 +210,10 @@ export function AdyenProvider(props: AdyenProviderProps) {
     const attemptPayment = useCallback(
         (props: AttemptPaymentProps) => {
             const newState = {
+                data: {
+                    brandCode: undefined,
+                    type: undefined,
+                },
                 ...props.state,
             };
 

package/lib/AdyenRedirect.tsx

@@ -9,7 +9,7 @@ import { useAdyen } from './AdyenProvider';
  * React component for for processing the the payment provider
  * redirection response.
  */
-export function AdyenRedirect(props: Pick<AdyenRedirectParams, 'redirectResult'>) {
+export function AdyenRedirect(props: Omit<AdyenRedirectParams, 'orderId'>) {
     const { redirectResult } = props;
 
     const { step } = useAdyen();
@@ -39,12 +39,12 @@ export function AdyenRedirect(props: Pick<AdyenRedirectParams, 'redirectResult'>
             dispatch(
                 AdyenMessage(ActionTypes.ProcessPaymentDetails, {
                     details: {
-                        redirectResult,
+                        ...props,
                     },
                 }),
             );
         }
-    }, [dispatch, redirectResult, step]);
+    }, [dispatch, props, redirectResult, step]);
 
     return <div></div>;
 }

package/lib/PaymentMethodHandler.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import { PaymentMethodTypes } from './adyen.types';
+import { GiftCardTypes, PaymentMethodTypes } from './adyen.types';
 import { ApplePay } from './paymentMethods/ApplePay/ApplePay';
 import { Card } from './paymentMethods/Card/Card';
 import { GooglePayMethod } from './paymentMethods/GooglePay/GooglePay';
@@ -8,8 +8,14 @@ import { Klarna } from './paymentMethods/Klarna/Klarna';
 import { KlarnaOverTime } from './paymentMethods/Klarna/KlarnaOverTime';
 import { KlarnaPayNow } from './paymentMethods/Klarna/KlarnaPayNow';
 import { PayPal } from './paymentMethods/PayPal/PayPal';
+import { Giftcard } from './paymentMethods/Giftcard';
 
 interface PaymentMethodHandlerProps {
+    /**
+     * The type of Giftcard
+     */
+    brand?: GiftCardTypes;
+
     /**
      * The type of Adyen payment method.
      */
@@ -21,7 +27,7 @@ interface PaymentMethodHandlerProps {
  * payment method component should be rendered.
  */
 export function PaymentMethodHandler(props: PaymentMethodHandlerProps) {
-    const { type } = props;
+    const { brand, type } = props;
 
     const render = useMemo(() => {
         switch (type) {
@@ -46,11 +52,18 @@ export function PaymentMethodHandler(props: PaymentMethodHandlerProps) {
             case PaymentMethodTypes.PayPal:
                 return <PayPal />;
 
+            case PaymentMethodTypes.Giftcard:
+                if (brand) {
+                    return <Giftcard brand={brand} />;
+                }
+
+                return null;
+
             case PaymentMethodTypes.None:
             default:
                 return null;
         }
-    }, [type]);
+    }, [brand, type]);
 
     return render;
 }

package/lib/README.md

@@ -20,6 +20,7 @@
 This package supports the following payment methods:
 
 - [Apple Pay](paymentMethods/ApplePay)
+- [GiftCard](paymentMethods/Giftcard)
 - [Card](paymentMethods/Card)
   - [3DSecure 1](paymentMethods/Card/ThreeDS1Redirect.tsx)
   - [3DSecure 2](paymentMethods/Card/ThreeDS2Challenge.tsx)

package/lib/adyen.types.ts

@@ -22,6 +22,7 @@ export enum AdyenActionTypes {
 
 export enum AdyenBrandCodes {
     Klarna = 'klarna',
+    Giftcard = 'giftcard',
 }
 
 export type AdyenCheckout = Core;
@@ -82,8 +83,12 @@ export interface AdyenPaymentAction extends PaymentAction {
 }
 
 export interface AdyenRedirectParams {
+    merchantReference?: string;
     orderId?: string;
+    payload?: string;
     redirectResult?: string;
+    resultCode?: string;
+    type?: string;
 }
 
 /**
@@ -197,6 +202,59 @@ export enum PaymentMethodTypes {
     KlarnaPayNow = 'klarna_paynow',
     None = 'none',
     PayPal = 'paypal',
+    Giftcard = 'giftcard',
+}
+
+/**
+ * Type of Adyen Giftcards
+ *
+ * @link https://docs.adyen.com/payment-methods/gift-cards
+ */
+export enum GiftCardTypes {
+    Auriga = 'auriga',
+    BabyGiftCard = 'babygiftcard',
+    BloemenGiftcard = 'bloemengiftcard',
+    Cashcom = 'cashcomgiftcard',
+    EagleEye = 'eagleeye_voucher',
+    EnterCard = 'entercard',
+    ExpertCadeaukaart = 'expertgiftcard',
+    Fashiocheque = 'fashioncheque',
+    FijnCadeau = 'fijncadeau',
+    Fiserv = 'valuelink',
+    FleuropBloemenbon = 'fleuropbloemenbon',
+    FonqGiftcard = 'fonqgiftcard',
+    GallAndGall = 'gallgall',
+    GiveX = 'givex',
+    Hallmark = 'hallmarkcard',
+    iGive = 'igive',
+    Ikano = 'ikano',
+    Illicado = 'prosodie_illicado',
+    KadoWerekeld = 'kadowereld',
+    KidsCadeau = 'kidscadeau',
+    Kindpas = 'kindpas',
+    LeisureVoucher = 'leisurecard',
+    NationaleBioscoopbon = 'nationalebioscoopbon',
+    Netscard = 'netscard',
+    Oberthur = 'oberthur',
+    PatheGiftcard = 'pathegiftcard',
+    PayEx = 'payex',
+    PodiumCard = 'podiumcard',
+    ResursGiftCard = 'resursgiftcard',
+    Rotterdampas = 'rotterdampas',
+    Savvy = 'genericgiftcard',
+    Schoolspullenpas = 'schoolspullenpas',
+    SpareBank = 'sparebank',
+    SparNord = 'sparnord',
+    SVS = 'svs',
+    UniversalGiftCard = 'universalgiftcard',
+    ValueLink = 'valuelink',
+    VVVCadeaubon = 'vvvcadeaubon',
+    VVVGiftcard = 'vvvgiftcard',
+    WebshopGiftcard = 'webshopgiftcard',
+    WinkelCheque = 'winkelcheque',
+    Winterkledingpas = 'winterkledingpas',
+    XPonCard = 'xponcard',
+    YourGift = 'yourgift',
 }
 
 /**
@@ -250,3 +308,7 @@ export interface MagentoAdyenPaymentMethodsQueryResponse {
     paymentMethodsExtraDetails: MagentoAdyenPaymentMethodsExtraDetails;
     paymentMethodsResponse: MagentoAdyenPaymentMethodsResponseObject;
 }
+
+export type AdyenPaymentMethod = PaymentMethod & {
+    brand?: GiftCardTypes;
+};

package/lib/epics/adyenPayment.epic.ts

@@ -35,21 +35,21 @@ export function adyenPayment(action$: Observable<any>, state$: Observable<any>,
 
             const payloadComposed: AdyenPayload = {
                 additional_data: {
-                    brand_code: payload.brandCode,
-                    cc_type: payload.paymentMethod.brand,
-                    cvc: payload.paymentMethod.encryptedSecurityCode,
-                    expiryMonth: payload.paymentMethod.encryptedExpiryMonth,
-                    expiryYear: payload.paymentMethod.encryptedExpiryYear,
-                    java_enabled: payload.browserInfo?.javaEnabled || false,
-                    language: payload.browserInfo?.language || '',
-                    number: payload.paymentMethod.encryptedCardNumber,
-                    screen_color_depth: payload.browserInfo?.colorDepth || 0,
-                    screen_height: payload.browserInfo?.screenHeight || 0,
-                    screen_width: payload.browserInfo?.screenWidth || 0,
+                    brand_code: payload?.brandCode,
+                    cc_type: payload?.paymentMethod?.brand,
+                    cvc: payload?.paymentMethod?.encryptedSecurityCode,
+                    expiryMonth: payload?.paymentMethod?.encryptedExpiryMonth,
+                    expiryYear: payload?.paymentMethod?.encryptedExpiryYear,
+                    java_enabled: payload?.browserInfo?.javaEnabled || false,
+                    language: payload?.browserInfo?.language || '',
+                    number: payload?.paymentMethod?.encryptedCardNumber,
+                    screen_color_depth: payload?.browserInfo?.colorDepth || 0,
+                    screen_height: payload?.browserInfo?.screenHeight || 0,
+                    screen_width: payload?.browserInfo?.screenWidth || 0,
                     stateData: JSON.stringify(payload),
-                    timezone_offset: payload.browserInfo?.timeZoneOffset || 0,
+                    timezone_offset: payload?.browserInfo?.timeZoneOffset || 0,
                 },
-                method: payload.type,
+                method: payload?.type,
             };
 
             return concat(

package/lib/epics/attemptPayment.epic.ts

@@ -22,8 +22,8 @@ export function attemptPayment(action$: Observable<any>, _state$: Observable<any
             const output: AdyenSubmitParams = {
                 brandCode: payload?.brandCode,
                 browserInfo: payload?.browserInfo,
-                paymentMethod: payload.paymentMethod,
-                type: payload.type,
+                paymentMethod: payload?.paymentMethod,
+                type: payload?.type,
             };
 
             return of(AdyenMessage(ActionTypes.PaymentSubmit, output));

package/lib/epics/utils/processAdyenResponse.ts

@@ -58,9 +58,23 @@ export function processAdyenResponse(response?: AdyenResponseParams, orderId?: s
                 const paymentMethodType = action?.paymentMethodType;
 
                 switch (paymentMethodType) {
-                    case PaymentMethodTypes.Card:
-                        return of(AdyenMessage(ActionTypes.ActionThreeDS1Redirect, action));
+                    case PaymentMethodTypes.Giftcard:
+                        return of(
+                            /**
+                             * Giftcards uses a redirect to process payment, so
+                             * we need to store the users order id in
+                             * localstorage, so that it can be restored when
+                             * the user is returned to the site.
+                             */
+                            StorageMsg(StorageActions.Set, {
+                                expiry: new Date().getTime() + ONE_DAY,
+                                key: AdyenStorageKey.OrderId,
+                                value: orderId,
+                            }),
+                            AdyenMessage(ActionTypes.ActionThreeDS1Redirect, action),
+                        );
 
+                    case PaymentMethodTypes.Card:
                     case PaymentMethodTypes.GooglePay:
                         return of(AdyenMessage(ActionTypes.ActionThreeDS1Redirect, action));
 

package/lib/paymentMethods/Card/README.md

@@ -13,7 +13,7 @@
 ## :credit_card: Payment Process
 
 1. Mount Card component
-2. User enters card details, then presseds submit button.
+2. User enters card details, then presses submit button.
 3. Payment details are sent to Magento for processing.
 4. If the payment card supports 3DS1/3DS2 (security check), the user is shown a verification popup.
    1. The verification result is passed back to Magento for processing.
@@ -26,4 +26,4 @@
 - [Adyen Card Web Component Source Code](https://github.com/Adyen/adyen-web/tree/master/packages/lib/src/components/Card) - GitHub source code for Adyen's Card component.
 - [Adyen Test Cards](https://docs.adyen.com/development-resources/test-cards/test-card-numbers#mastercard) - Card details for testing the component.
 
-<br/>
+<br/>

package/lib/paymentMethods/Giftcard/Giftcard.tsx

@@ -0,0 +1,102 @@
+import React, { useEffect, useRef } from 'react';
+
+import { useAdyen } from '../../AdyenProvider';
+import { AdyenBrandCodes, AdyenSteps, GiftCardTypes, MagentoPaymentTypes } from '../../adyen.types';
+
+export type GiftCardProps = {
+    brand: GiftCardTypes;
+};
+
+/**
+ * Generic Giftcard component that supports the majority of Adyen giftcards.
+ *
+ * Adyen via Magento only supports Giftcards with HPP fallback.
+ * The 'GiftCard' web component is not currently supported. Instead we
+ * display a basic 'pay now' button, which sends a 'setPaymentMethod' event
+ * to Magento.
+ *
+ * Example flow:
+ * 1. Giftcard enabled in Dashboard
+ * 2. Displayed in UI using a basic button (not the Giftcard Web Component)
+ * 3. User clicks on button
+ * 4. API request made to Magento to set the payment method as the giftcard.
+ * 5. Magento returns a redirect URL
+ * 6. User is redirected to Adyen Hosted Payment Page (HPP) to complete
+ * the order.
+ * 7. Upon completion the User is redirected back to the site.
+ * 8. Request sent to Magento to check Adyen order status
+ *     - onSuccess - Checkout complete
+ *     - onFail - Checkout failed
+ *
+ * Note:
+ * Partial payments with Giftcards is handled within the HPP.
+ * If the Giftcard balance doesn't cover the entire order, Adyen will present
+ * the User with other payment methods which can be used to pay the
+ * remaining balance.
+ */
+export function Giftcard(props: GiftCardProps) {
+    /**
+     * Get Adyen components/functions
+     */
+    const { adyenCheckout, action, attemptPayment, paymentFormSubmitted, step } = useAdyen();
+
+    /**
+     * Setup a container that the Adyen component will be mounted on
+     */
+    const giftcardContainer = useRef<HTMLDivElement>(null);
+
+    /**
+     * Setup a container that the Adyen redirect component will be mounted on.
+     */
+    const redirectContainer = useRef<HTMLDivElement>(null);
+
+    /**
+     * When the payment form has been submitted, set the Giftcard as the
+     * chosen payment method for the order.
+     */
+    useEffect(() => {
+        if (paymentFormSubmitted) {
+            attemptPayment({
+                brandCode: AdyenBrandCodes.Giftcard,
+                magentoPaymentType: MagentoPaymentTypes.HPP,
+                state: {
+                    data: {
+                        paymentMethod: {
+                            brand: props.brand,
+                            type: AdyenBrandCodes.Giftcard,
+                        },
+                    },
+                },
+            });
+        }
+    }, [attemptPayment, paymentFormSubmitted, props.brand]);
+
+    /**
+     * Pass Magento's submit reponse to an Adyen Redirect component.
+     *
+     * Adyen will redirect the user to a Adyen Hosted Payment Page (HPP),
+     * to capture payment, before redirecting the user back to the PWA.
+     * Partial payments with Giftcards is handled within the HPP.
+     */
+    useEffect(() => {
+        if (action?.url && adyenCheckout && step === AdyenSteps.ThreeDS1Redirect && redirectContainer.current) {
+            const redirect = adyenCheckout?.create('redirect');
+
+            if (redirect) {
+                redirect.mount(redirectContainer.current);
+                redirect?.handleAction(action);
+            }
+        }
+    }, [action, adyenCheckout, step]);
+
+    /**
+     * Return our component
+     */
+    return (
+        <div ref={giftcardContainer}>
+            <div ref={redirectContainer} />
+        </div>
+    );
+}
+
+export default Giftcard;

package/lib/paymentMethods/Giftcard/README.md

@@ -0,0 +1,23 @@
+<!-- Title -->
+<h1 align="center">
+  Gift Cards
+</h1>
+
+<!-- Description -->
+<p align="center">Adyen Gift Card Component</p>
+
+<br/>
+
+## 🎁 Payment Process
+
+1. Mount the GiftCard component
+2. User presses the 'pay' button.
+3. The Giftcard is set as the order payment method and the order locked, to await payment.
+4. The order details are saved in localstorage, before the user redirected to Adyen Hosted Payment Page (HPP) for payment.
+5. The user is returned to the website and the order is restored.
+6. The Giftcard payment details are sent to Magento for processing.
+
+## 🖖 Useful Resources
+
+- [Adyen Supported GiftCards](https://docs.adyen.com/payment-methods/gift-cards#supported-gift-cards) - The types of Giftcards supported by Adyen.
+- [Adyen GiftCard Test Numbers](https://docs.adyen.com/development-resources/testing/test-card-numbers#gift-cards) - Card details for testing the component.

package/lib/paymentMethods/Giftcard/index.ts

@@ -0,0 +1 @@
+export * from './Giftcard';

package/lib/paymentMethods/README.md

@@ -22,8 +22,9 @@
 3. It may be useful to use an existing payment method component as a template:
    1. Standard workflow - [Card component](Card/Card.tsx)
    2. Redirect workflow - [Klarna component](Klarna/Klarna.tsx)
-   3. SDK workflow - [PayPal component](PayPal/PayPal.tsx)
-   4. Native/Async workflow - [ApplePay component](ApplePay/ApplePay.tsx)
+   3. Adyen Hosted Payment Page (HPP) Redirection workflow = [GiftCard component](Giftcard/Giftcard.tsx)
+   4. SDK workflow - [PayPal component](PayPal/PayPal.tsx)
+   5. Native/Async workflow - [ApplePay component](ApplePay/ApplePay.tsx)
 4. Add your component to the `PaymentMethodTypes` enum in [`adyen.types.ts`](../adyen.types.ts).
    1. The enum value must match the type name used by Magento and Adyen.
 5. Add your component to the [`PaymentMethodHandler`](../PaymentMethodHandler.tsx).
@@ -43,6 +44,7 @@ This package supports the following payment methods:
 
 - [Apple Pay](paymentMethods/ApplePay)
 - [Google Pay](paymentMethods/GooglePay)
+- [GiftCard](paymentMethods/Giftcard)
 - [Card](paymentMethods/Card)
   - [3DSecure 1](paymentMethods/Card/ThreeDS1Redirect.tsx)
   - [3DSecure 2](paymentMethods/Card/ThreeDS2Challenge.tsx)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wearejh/m2-pwa-adyen",
-    "version": "0.13.2",
+    "version": "0.16.0",
     "description": "> TODO: description",
     "author": "Shane Osbourne <shane.osbourne8@gmail.com>",
     "homepage": "",
@@ -22,13 +22,13 @@
     },
     "dependencies": {
         "@adyen/adyen-web": "4.5.0",
-        "@wearejh/m2-pwa-cart": "^0.13.2",
-        "@wearejh/m2-pwa-checkout": "^0.13.2",
-        "@wearejh/m2-pwa-engine": "^0.13.2",
-        "@wearejh/react-hooks": "^0.13.2",
-        "@wearejh/rx-form": "^0.13.2",
-        "@wearejh/swagger-rxjs": "^0.13.2",
+        "@wearejh/m2-pwa-cart": "^0.16.0",
+        "@wearejh/m2-pwa-checkout": "^0.16.0",
+        "@wearejh/m2-pwa-engine": "^0.16.0",
+        "@wearejh/react-hooks": "^0.16.0",
+        "@wearejh/rx-form": "^0.16.0",
+        "@wearejh/swagger-rxjs": "^0.16.0",
         "load-js": "^3.0.3"
     },
-    "gitHead": "a17286833b7fd91270b8fa60d65427b9b931dd81"
+    "gitHead": "4575ad20a27273e832a2f202ae941e3cae828ac8"
 }