@wearejh/m2-pwa-adyen 0.23.2 → 0.26.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.26.0](https://github.com/WeareJH/mage-mono/compare/v0.25.0...v0.26.0) (2024-07-15)
+
+**Note:** Version bump only for package @wearejh/m2-pwa-adyen
+
+
+
+
+
+# [0.25.0](https://github.com/WeareJH/mage-mono/compare/v0.23.2...v0.25.0) (2024-06-13)
+
+**Note:** Version bump only for package @wearejh/m2-pwa-adyen
+
+
+
+
+
+# [0.24.0](https://github.com/WeareJH/mage-mono/compare/v0.23.2...v0.24.0) (2024-06-13)
+
+**Note:** Version bump only for package @wearejh/m2-pwa-adyen
+
+
+
+
+
 ## [0.23.2](https://github.com/WeareJH/mage-mono/compare/v0.23.1...v0.23.2) (2024-04-10)
 
 **Note:** Version bump only for package @wearejh/m2-pwa-adyen

package/lib/AdyenProvider.tsx

@@ -118,10 +118,16 @@ export function AdyenProvider(props: AdyenProviderProps) {
 
     const dispatch = useDispatch();
 
-    const { action, checkoutConfig, orderId, selectedPaymentMethod, step, supportedPaymentMethods } = useSelector(
-        getAdyenStateFromStore,
-        shallowEqual,
-    );
+    const {
+        action,
+        checkoutConfig,
+        cartId,
+        cartVariant,
+        orderId,
+        selectedPaymentMethod,
+        step,
+        supportedPaymentMethods,
+    } = useSelector(getAdyenStateFromStore, shallowEqual);
 
     const checkoutTotalsState = useSelector(getCheckoutTotalsStateFromStore, shallowEqual);
 
@@ -269,6 +275,8 @@ export function AdyenProvider(props: AdyenProviderProps) {
             action,
             adyenCheckout,
             attemptPayment,
+            cartId,
+            cartVariant,
             checkoutConfig: adyenCheckoutConfig,
             orderId,
             paymentFormSubmit,
@@ -284,6 +292,8 @@ export function AdyenProvider(props: AdyenProviderProps) {
             adyenCheckoutConfig,
             attemptPayment,
             availiablePaymentMethods,
+            cartId,
+            cartVariant,
             orderId,
             paymentFormSubmit,
             paymentFormSubmitted,

package/lib/AdyenRedirect.tsx

@@ -5,11 +5,13 @@ import { ActionTypes, AdyenMessage } from './adyen.actions';
 import { AdyenRedirectParams, AdyenSteps } from './adyen.types';
 import { useAdyen } from './AdyenProvider';
 
+type AdyenRedirectProps = Omit<AdyenRedirectParams, 'orderId' | 'cartId' | 'cartVariant'>;
+
 /**
  * React component for for processing the the payment provider
  * redirection response.
  */
-export function AdyenRedirect(props: Omit<AdyenRedirectParams, 'orderId'>) {
+export function AdyenRedirect(props: AdyenRedirectProps) {
     const { redirectResult } = props;
 
     const { step } = useAdyen();

package/lib/adyen.reducer.ts

@@ -102,6 +102,8 @@ export function reducer(state = initialState, action: Actions): Store {
 
         case ActionTypes.ProcessRedirect:
             newState.orderId = action.payload.orderId;
+            newState.cartId = action.payload.cartId;
+            newState.cartVariant = action.payload.cartVariant;
             newState.step = AdyenSteps.ProcessRedirect;
             break;
 

package/lib/adyen.types.ts

@@ -83,6 +83,8 @@ export interface AdyenPaymentAction extends PaymentAction {
 }
 
 export interface AdyenRedirectParams {
+    cartId?: string;
+    cartVariant?: string;
     merchantReference?: string;
     orderId?: string;
     payload?: string;
@@ -130,6 +132,8 @@ export type AdyenSubmitParams = {
 
 export enum AdyenStorageKey {
     OrderId = 'adyen.orderid',
+    CartId = 'adyen.cartid',
+    CartVariant = 'adyen.cartvariant',
 }
 
 /**
@@ -306,6 +310,10 @@ export interface Store {
 
     messages: Message[];
 
+    cartId?: string;
+
+    cartVariant?: string;
+
     orderId?: string;
 
     /**

package/lib/epics/adyenPayment.epic.ts

@@ -1,4 +1,3 @@
-import { cartVariantAndId } from '@wearejh/m2-pwa-cart/lib/utils/stateObservables';
 import { CartVariant } from '@wearejh/m2-pwa-cart/lib/cart.reducer';
 import { AppendState, CheckoutActions, CheckoutMsg, State, TypeMap as CheckoutTypes } from '@wearejh/m2-pwa-checkout';
 import { EpicDeps } from '@wearejh/m2-pwa-engine/lib/types';
@@ -13,6 +12,7 @@ import { Actions, AdyenMessage, ActionTypes, TypeMap } from '../adyen.actions';
 import { AdyenPayload, AdyenResponseParams } from '../adyen.types';
 
 import { processAdyenResponse } from './utils/processAdyenResponse';
+import { getAdyenCart } from './utils/getAdyenCart';
 
 function getOrderStatus({ cartVariant, orderId, cartId }, deps: EpicDeps) {
     if (cartVariant === CartVariant.Account) {
@@ -29,6 +29,11 @@ function getOrderStatus({ cartVariant, orderId, cartId }, deps: EpicDeps) {
 export function adyenPayment(action$: Observable<any>, state$: Observable<any>, deps: EpicDeps): Observable<any> {
     const pendingPayment$ = state$.pipe(pluck<AppendState, 'checkout', 'pendingPayment'>('checkout', 'pendingPayment'));
 
+    /**
+     * Get checkout cart variant and id from the store.
+     */
+    const adyenCart$ = getAdyenCart(state$);
+
     return action$.pipe(
         /**
          * Listern for the event to be triggered
@@ -36,7 +41,7 @@ export function adyenPayment(action$: Observable<any>, state$: Observable<any>,
          */
         ofType<Actions, TypeMap[ActionTypes.PaymentSubmit]>(ActionTypes.PaymentSubmit),
 
-        withLatestFrom(pendingPayment$, cartVariantAndId(state$)),
+        withLatestFrom(pendingPayment$, adyenCart$),
 
         switchMap(([{ payload }, pendingPayment, [cartVariant, cartId]]) => {
             if (!pendingPayment) {
@@ -92,7 +97,15 @@ export function adyenPayment(action$: Observable<any>, state$: Observable<any>,
                                         cartId,
                                     },
                                     deps,
-                                ).pipe(mergeMap((response) => processAdyenResponse(response, orderId))),
+                                ).pipe(
+                                    mergeMap((response) =>
+                                        processAdyenResponse(response, {
+                                            cartId,
+                                            cartVariant,
+                                            orderId,
+                                        }),
+                                    ),
+                                ),
                             ),
                         ),
 

package/lib/epics/getAdyenConfig.epic.ts

@@ -1,4 +1,4 @@
-import { cartTotals, cartVariantAndId } from '@wearejh/m2-pwa-cart/lib/utils/stateObservables';
+import { cartTotals } from '@wearejh/m2-pwa-cart/lib/utils/stateObservables';
 import { CheckoutActions } from '@wearejh/m2-pwa-checkout/lib/checkout.actions';
 import { CartVariant } from '@wearejh/m2-pwa-cart/lib/cart.reducer';
 import { EpicDeps } from '@wearejh/m2-pwa-engine/lib/types';
@@ -18,6 +18,8 @@ import {
     PaymentMethodTypes,
 } from '../adyen.types';
 
+import { getAdyenCart } from './utils/getAdyenCart';
+
 /**
  * API url for Adyen Web Components.
  *
@@ -58,6 +60,11 @@ export function getAdyenConfig(action$: Observable<any>, state$: Observable<any>
      */
     const shippingAddress$ = state$.pipe(pluck('checkout', 'shippingAddress'));
 
+    /**
+     * Get checkout cart variant and id from the store.
+     */
+    const adyenCart$ = getAdyenCart(state$);
+
     return action$.pipe(
         /**
          * Listern for the event to be triggered
@@ -77,7 +84,7 @@ export function getAdyenConfig(action$: Observable<any>, state$: Observable<any>
          */
         withLatestFrom(
             cartTotals(state$),
-            cartVariantAndId(state$),
+            adyenCart$,
             shippingAddress$,
             deps.window$.pipe(map((win) => Boolean((win as any).Cypress))),
         ),

package/lib/epics/getRedirectData.epic.ts

@@ -20,10 +20,22 @@ export function getRedirectData(action$: Observable<any>, _state$: Observable<an
 
         mergeMap(() => {
             const orderId = deps.storage.get(AdyenStorageKey.OrderId);
+            const cartId = deps.storage.get(AdyenStorageKey.CartId);
+            const cartVariant = deps.storage.get(AdyenStorageKey.CartVariant);
 
-            if (orderId) {
+            const hasRequiredOrderData =
+                orderId !== undefined &&
+                orderId !== null &&
+                cartId !== undefined &&
+                cartId !== null &&
+                cartVariant !== undefined &&
+                cartVariant !== null;
+
+            if (hasRequiredOrderData) {
                 return of(
                     AdyenMessage(ActionTypes.ProcessRedirect, {
+                        cartId,
+                        cartVariant,
                         orderId,
                     }),
                 );
@@ -32,7 +44,7 @@ export function getRedirectData(action$: Observable<any>, _state$: Observable<an
             return of(
                 AdyenMessage(ActionTypes.Error, {
                     cancelPayment: true,
-                    message: 'Cannot proceed without an order id',
+                    message: 'Cannot proceed without order information',
                 }),
             );
         }),

package/lib/epics/paymentDetails.epic.ts

@@ -1,4 +1,3 @@
-import { cartVariantAndId } from '@wearejh/m2-pwa-cart/lib/utils/stateObservables';
 import { CartVariant } from '@wearejh/m2-pwa-cart/lib/cart.reducer';
 import { EpicDeps } from '@wearejh/m2-pwa-engine/lib/types';
 import { extractErrorAndCode } from '@wearejh/swagger-rxjs/utils/ajax-helpers';
@@ -12,6 +11,7 @@ import { execute as getUserAdyenPaymentDetailsQuery } from '../rest/AdyenPayment
 import { execute as getGuestAdyenPaymentDetailsQuery } from '../rest/AdyenPaymentGuestAdyenThreeDS2ProcessV1InitiatePost';
 
 import { processAdyenResponse } from './utils/processAdyenResponse';
+import { getAdyenCart } from './utils/getAdyenCart';
 
 /**
  * Process Adyen payment details.
@@ -26,6 +26,11 @@ export function paymentDetails(
      */
     const orderId$ = state$.pipe(pluck<AdyenStore, 'adyen', 'orderId'>('adyen', 'orderId'));
 
+    /**
+     * Get checkout cart variant and id from the store.
+     */
+    const adyenCart$ = getAdyenCart(state$);
+
     return action$.pipe(
         /**
          * Listern for the event to be triggered
@@ -37,12 +42,20 @@ export function paymentDetails(
          * Get the latest data from the Store
          * before proceeding.
          */
-        withLatestFrom(orderId$, cartVariantAndId(state$)),
+        withLatestFrom(orderId$, adyenCart$),
 
         switchMap(([{ payload }, orderId, [cartVariant, cartId]]) => {
             const process$ = (() => {
-                if (!orderId) {
-                    return throwError(new Error(`cannot continue without an order id`));
+                const hasRequiredOrderData =
+                    orderId !== undefined &&
+                    orderId !== null &&
+                    cartId !== undefined &&
+                    cartId !== null &&
+                    cartVariant !== undefined &&
+                    cartVariant !== null;
+
+                if (!hasRequiredOrderData) {
+                    return throwError(new Error(`Cannot proceed without order information`));
                 }
 
                 const outgoing = JSON.stringify({
@@ -71,7 +84,13 @@ export function paymentDetails(
                 /**
                  * Handle the JSON response.
                  */
-                mergeMap((response: any) => processAdyenResponse(response, orderId)),
+                mergeMap((response: any) =>
+                    processAdyenResponse(response, {
+                        cartId,
+                        cartVariant,
+                        orderId,
+                    }),
+                ),
 
                 catchError((errorResponse) => {
                     const { error } = extractErrorAndCode(errorResponse);

package/lib/epics/utils/completeAdyen.ts

@@ -1,8 +1,9 @@
+import { StorageActions, StorageMsg } from '@wearejh/m2-pwa-engine/lib/storage';
 import { CheckoutMsg } from '@wearejh/m2-pwa-checkout';
-import { concat, of } from 'rxjs';
+import { of } from 'rxjs';
 
 import { ActionTypes, AdyenMessage } from '../../adyen.actions';
-import { AdyenSteps } from '../../adyen.types';
+import { AdyenSteps, AdyenStorageKey } from '../../adyen.types';
 
 /**
  * Let `m2-pwa-checkout` know that Adyen
@@ -17,10 +18,12 @@ export function completeAdyen(orderId: string) {
 
     const paymentProviderComplete = CheckoutMsg('Checkout.PaymentProviderComplete');
 
-    return concat(
-        of(AdyenMessage(ActionTypes.SetStep, AdyenSteps.Complete)),
-        of(paymentProviderSuccess),
-        of(paymentProviderComplete),
-        of(AdyenMessage(ActionTypes.SetStep, AdyenSteps.Init)),
+    return of(
+        StorageMsg(StorageActions.Delete, AdyenStorageKey.OrderId),
+        StorageMsg(StorageActions.Delete, AdyenStorageKey.CartId),
+        StorageMsg(StorageActions.Delete, AdyenStorageKey.CartVariant),
+        AdyenMessage(ActionTypes.SetStep, AdyenSteps.Complete),
+        paymentProviderSuccess,
+        paymentProviderComplete,
     );
 }

package/lib/epics/utils/getAdyenCart.ts

@@ -0,0 +1,32 @@
+import { cartVariantAndId } from '@wearejh/m2-pwa-cart/lib/utils/stateObservables';
+import { combineLatest, Observable } from 'rxjs';
+import { map, pluck, switchMap } from 'rxjs/operators';
+
+import { AppendAdyenState, AppendState as AdyenStore } from '../../adyen.types';
+
+type GetAdyenCartState = Observable<AppendAdyenState<AdyenStore>>;
+
+/**
+ * Get checkout cart variant and id from the store.
+ */
+export function getAdyenCart(state$: GetAdyenCartState) {
+    const cartId$ = cartVariantAndId(state$).pipe(
+        switchMap((cartState) =>
+            state$.pipe(
+                pluck<AdyenStore, 'adyen', 'cartId'>('adyen', 'cartId'),
+                map((cartId) => cartId ?? cartState[1]),
+            ),
+        ),
+    );
+
+    const cartVariant$ = cartVariantAndId(state$).pipe(
+        switchMap((cartState) =>
+            state$.pipe(
+                pluck<AdyenStore, 'adyen', 'cartVariant'>('adyen', 'cartVariant'),
+                map((cartVariant) => cartVariant ?? cartState[0]),
+            ),
+        ),
+    );
+
+    return combineLatest([cartVariant$, cartId$]);
+}

package/lib/epics/utils/processAdyenResponse.ts

@@ -17,7 +17,15 @@ import { completeAdyen } from './completeAdyen';
 // One day (24 hours) in milliseconds.
 const ONE_DAY = 60 * 60 * 24 * 1000;
 
-export function processAdyenResponse(response?: AdyenResponseParams, orderId?: string) {
+type ProcessAdyenResponseConfig = {
+    cartId?: string;
+    cartVariant?: string;
+    orderId?: string;
+};
+
+export function processAdyenResponse(response?: AdyenResponseParams, config?: ProcessAdyenResponseConfig) {
+    const { orderId, cartId, cartVariant } = config || {};
+
     if (!orderId) {
         return throwError(new Error(`cannot continue without an orderid`));
     }
@@ -57,6 +65,7 @@ export function processAdyenResponse(response?: AdyenResponseParams, orderId?: s
         switch (action.type) {
             case AdyenActionTypes.Redirect:
                 const paymentMethodType = action?.paymentMethodType;
+                const storageExpiry = new Date().getTime() + ONE_DAY;
 
                 switch (paymentMethodType) {
                     case PaymentMethodTypes.Giftcard:
@@ -68,10 +77,20 @@ export function processAdyenResponse(response?: AdyenResponseParams, orderId?: s
                              * the user is returned to the site.
                              */
                             StorageMsg(StorageActions.Set, {
-                                expiry: new Date().getTime() + ONE_DAY,
+                                expiry: storageExpiry,
                                 key: AdyenStorageKey.OrderId,
                                 value: orderId,
                             }),
+                            StorageMsg(StorageActions.Set, {
+                                expiry: storageExpiry,
+                                key: AdyenStorageKey.CartId,
+                                value: cartId,
+                            }),
+                            StorageMsg(StorageActions.Set, {
+                                expiry: storageExpiry,
+                                key: AdyenStorageKey.CartVariant,
+                                value: cartVariant,
+                            }),
                             AdyenMessage(ActionTypes.ActionGiftCardRedirect, action),
                         );
 
@@ -85,10 +104,20 @@ export function processAdyenResponse(response?: AdyenResponseParams, orderId?: s
                              * the user is returned to the site.
                              */
                             StorageMsg(StorageActions.Set, {
-                                expiry: new Date().getTime() + ONE_DAY,
+                                expiry: storageExpiry,
                                 key: AdyenStorageKey.OrderId,
                                 value: orderId,
                             }),
+                            StorageMsg(StorageActions.Set, {
+                                expiry: storageExpiry,
+                                key: AdyenStorageKey.CartId,
+                                value: cartId,
+                            }),
+                            StorageMsg(StorageActions.Set, {
+                                expiry: storageExpiry,
+                                key: AdyenStorageKey.CartVariant,
+                                value: cartVariant,
+                            }),
                             AdyenMessage(ActionTypes.ActionKlarnaRedirect, action),
                         );
 

package/package.json

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