Merge pull request #125 from Adyen/release/1.1.0

Release/1.1.0
Adyen · Mar 20, 2024 · 5182a58 · 5182a58
2 parents eb06855 + bf05304
commit 5182a58
Show file tree

Hide file tree

Showing 17 changed files with 51,799 additions and 39,700 deletions.
diff --git a/packages/adyen-retail-react-app/.env.example b/packages/adyen-retail-react-app/.env.example
@@ -7,6 +7,7 @@ RefArch_ADYEN_WEBHOOK_PASSWORD=""
 RefArch_ADYEN_HMAC_KEY=""
 RefArch_SYSTEM_INTEGRATOR_NAME=""
 RefArch_ADYEN_APPLE_DOMAIN_ASSOCIATION=""
+RefArch_ADYEN_LIVE_URL_PREFIX=""
 
 COMMERCE_API_CLIENT_ID=""
 COMMERCE_API_ORG_ID=""

diff --git a/packages/adyen-retail-react-app/config/sites.js b/packages/adyen-retail-react-app/config/sites.js
@@ -18,22 +18,6 @@ module.exports = [
                 {
                     id: 'en-US',
                     preferredCurrency: 'USD'
-                },
-                {
-                    id: 'fr-FR',
-                    preferredCurrency: 'EUR'
-                },
-                {
-                    id: 'pt-BR',
-                    preferredCurrency: 'BRL'
-                },
-                {
-                    id: 'ja-JP',
-                    preferredCurrency: 'JPY'
-                },
-                {
-                    id: 'sv-SE',
-                    preferredCurrency: 'SEK'
                 }
             ]
         }

diff --git a/...e-pwa/lib/pages/checkout/confirmation.jsx → ...rides/app/pages/checkout/confirmation.jsx b/...e-pwa/lib/pages/checkout/confirmation.jsx → ...rides/app/pages/checkout/confirmation.jsx
@@ -37,8 +37,21 @@ import CartItemVariantPrice from '@salesforce/retail-react-app/app/components/it
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
 import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
 import PropTypes from 'prop-types'
-import AdyenCheckout from '../../components/adyenCheckout'
-import {AdyenCheckoutProvider} from '../../context/adyen-checkout-context'
+import AdyenCheckout from '@adyen/adyen-salesforce-pwa/lib/components/adyenCheckout'
+import {AdyenCheckoutProvider} from '@adyen/adyen-salesforce-pwa/lib/context/adyen-checkout-context'
+
+/* -----------------Adyen Begin ------------------------ */
+import {
+    AuthHelpers,
+    useAccessToken,
+    useAuthHelper,
+    useCustomerId,
+    useCustomerType,
+    useOrder,
+    useProducts
+} from '@salesforce/commerce-sdk-react'
+import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+/* -----------------Adyen End ------------------------ */
 
 const onClient = typeof window !== 'undefined'
 
@@ -528,16 +541,8 @@ const CheckoutConfirmation = ({useOrder, useProducts, useAuthHelper, AuthHelpers
     )
 }
 
-const CheckoutConfirmationContainer = ({
-    useAccessToken,
-    useCustomerId,
-    useCustomerType,
-    useOrder,
-    useProducts,
-    useAuthHelper,
-    useMultiSite,
-    AuthHelpers
-}) => {
+/* -----------------Adyen Begin ------------------------ */
+const CheckoutConfirmationContainer = () => {
     return (
         <AdyenCheckoutProvider
             useAccessToken={useAccessToken}
@@ -561,16 +566,6 @@ CheckoutConfirmation.propTypes = {
     useAuthHelper: PropTypes.any,
     AuthHelpers: PropTypes.any
 }
-
-CheckoutConfirmationContainer.propTypes = {
-    useOrder: PropTypes.any,
-    useProducts: PropTypes.any,
-    useAuthHelper: PropTypes.any,
-    AuthHelpers: PropTypes.any,
-    useAccessToken: PropTypes.any,
-    useCustomerId: PropTypes.any,
-    useCustomerType: PropTypes.any,
-    useMultiSite: PropTypes.any
-}
+/* -----------------Adyen End ------------------------ */
 
 export default CheckoutConfirmationContainer
diff --git a/...ce-pwa/lib/pages/checkout/error/index.jsx → ...rrides/app/pages/checkout/error/index.jsx b/...ce-pwa/lib/pages/checkout/error/index.jsx → ...rrides/app/pages/checkout/error/index.jsx
diff --git a/...lesforce-pwa/lib/pages/checkout/index.jsx → ...pp/overrides/app/pages/checkout/index.jsx b/...lesforce-pwa/lib/pages/checkout/index.jsx → ...pp/overrides/app/pages/checkout/index.jsx
@@ -16,9 +16,20 @@ import ShippingOptions from '@salesforce/retail-react-app/app/pages/checkout/par
 import OrderSummary from '@salesforce/retail-react-app/app/components/order-summary'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
 import Payment from './partials/payment'
-import {AdyenCheckoutProvider} from '../../context/adyen-checkout-context'
+import {AdyenCheckoutProvider} from '@adyen/adyen-salesforce-pwa/lib/context/adyen-checkout-context'
 import PropTypes from 'prop-types'
 
+/* -----------------Adyen Begin ------------------------ */
+import '@adyen/adyen-salesforce-pwa/dist/app/adyen.css'
+import {
+    useAccessToken,
+    useCustomerId,
+    useCustomerType,
+    useShopperBasketsMutation
+} from '@salesforce/commerce-sdk-react'
+import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+/* -----------------Adyen End ------------------------ */
+
 const Checkout = ({useShopperBasketsMutation}) => {
     const {step} = useCheckout()
     const [error] = useState()
@@ -68,21 +79,29 @@ const Checkout = ({useShopperBasketsMutation}) => {
     )
 }
 
-const CheckoutContainer = ({
-    useAccessToken,
-    useCustomerId,
-    useCustomerType,
-    useShopperBasketsMutation,
-    useMultiSite,
-    adyenConfig
-}) => {
+/**
+ * Customize Adyen Checkout
+ * - Translations
+ * - Payment Methods
+ * - Execute Callbacks
+ */
+
+const checkoutCustomizations = {
+    paymentMethodsConfiguration: {
+        klarna_account: {
+            useKlarnaWidget: false
+        }
+    }
+}
+
+const CheckoutContainer = () => {
     return (
         <AdyenCheckoutProvider
             useAccessToken={useAccessToken}
             useCustomerId={useCustomerId}
             useCustomerType={useCustomerType}
             useMultiSite={useMultiSite}
-            adyenConfig={adyenConfig}
+            adyenConfig={checkoutCustomizations}
         >
             <CheckoutProvider>
                 <Checkout useShopperBasketsMutation={useShopperBasketsMutation} />

diff --git a/...a/lib/pages/checkout/partials/payment.jsx → ...s/app/pages/checkout/partials/payment.jsx b/...a/lib/pages/checkout/partials/payment.jsx → ...s/app/pages/checkout/partials/payment.jsx
@@ -22,8 +22,8 @@ import AddressDisplay from '@salesforce/retail-react-app/app/components/address-
 import {PromoCode, usePromoCode} from '@salesforce/retail-react-app/app/components/promo-code'
 import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
 import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
-import AdyenCheckout from '../../../components/adyenCheckout'
-import {useAdyenCheckout} from '../../../context/adyen-checkout-context'
+import AdyenCheckout from '@adyen/adyen-salesforce-pwa/lib/components/adyenCheckout'
+import {useAdyenCheckout} from '@adyen/adyen-salesforce-pwa/lib/context/adyen-checkout-context'
 
 const Payment = ({useShopperBasketsMutation}) => {
     const {formatMessage} = useIntl()

diff --git a/...pwa/lib/pages/checkout/redirect/index.jsx → ...des/app/pages/checkout/redirect/index.jsx b/...pwa/lib/pages/checkout/redirect/index.jsx → ...des/app/pages/checkout/redirect/index.jsx
@@ -1,15 +1,12 @@
 import React from 'react'
-import AdyenCheckout from '../../../components/adyenCheckout'
-import {AdyenCheckoutProvider} from '../../../context/adyen-checkout-context'
+import AdyenCheckout from '@adyen/adyen-salesforce-pwa/lib/components/adyenCheckout'
+import {AdyenCheckoutProvider} from '@adyen/adyen-salesforce-pwa/lib/context/adyen-checkout-context'
 import PropTypes from 'prop-types'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
-
-const AdyenCheckoutRedirectContainer = ({
-    useAccessToken,
-    useCustomerId,
-    useCustomerType,
-    useMultiSite
-}) => {
+import '@adyen/adyen-salesforce-pwa/dist/app/adyen.css'
+import {useAccessToken, useCustomerId, useCustomerType} from '@salesforce/commerce-sdk-react'
+import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+const AdyenCheckoutRedirectContainer = () => {
     const {data: basket} = useCurrentBasket()
     if (!basket) {
         return null

diff --git a/packages/adyen-retail-react-app/overrides/app/routes.jsx b/packages/adyen-retail-react-app/overrides/app/routes.jsx
@@ -12,117 +12,32 @@ import {routes as _routes} from '@salesforce/retail-react-app/app/routes'
 import {Skeleton} from '@chakra-ui/react'
 
 /* -----------------Adyen Begin ------------------------ */
-// these hooks need to be passed to checkout page from Adyen
 import '@adyen/adyen-salesforce-pwa/dist/app/adyen.css'
-import {
-    AuthHelpers,
-    useAccessToken,
-    useAuthHelper,
-    useCustomerId,
-    useCustomerType,
-    useOrder,
-    useProducts,
-    useShopperBasketsMutation
-} from '@salesforce/commerce-sdk-react'
-import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
 
 // Components
 const fallback = <Skeleton height="75vh" width="100%" />
 
-/**
- * Customize Adyen Checkout
- * - Translations
- * - Payment Methods
- * - Execute Callbacks
- *
- * const checkoutCustomizations = {
- *     beforeSubmit: [
- *         function logAfterSubmit() {
- *             console.log('before submit')
- *             return true
- *         }
- *     ],
- *     afterSubmit: [
- *         function logAfterSubmit() {
- *             console.log('after submit')
- *             return true
- *         }
- *     ],
- *     translations: {
- *         'en-US': {
- *             payButton: ''
- *         }
- *     },
- *     paymentMethodsConfiguration: {
- *         paypal: {
- *             style: {
- *                 layout: 'vertical',
- *                 color: 'blue'
- *             }
- *         }
- *     }
- * }
- */
-
 // Create your pages here and add them to the routes array
 // Use loadable to split code into smaller js chunks
+
 // Checkout page from Adyen
-const Checkout = loadable(() => import('@adyen/adyen-salesforce-pwa'), {
-    fallback: fallback,
-    resolveComponent: (components) => {
-        return () => (
-            <components.Checkout
-                useAccessToken={useAccessToken}
-                useCustomerId={useCustomerId}
-                useCustomerType={useCustomerType}
-                useShopperBasketsMutation={useShopperBasketsMutation}
-                useMultiSite={useMultiSite}
-                // adyenConfig={checkoutCustomizations}
-            />
-        )
-    }
+const Checkout = loadable(() => import('./pages/checkout'), {
+    fallback: fallback
 })
 
 // CheckoutConfirmation page from Adyen
-const CheckoutConfirmation = loadable(() => import('@adyen/adyen-salesforce-pwa'), {
-    fallback: fallback,
-    resolveComponent: (components) => {
-        return () => (
-            <components.CheckoutConfirmation
-                useOrder={useOrder}
-                useProducts={useProducts}
-                useAuthHelper={useAuthHelper}
-                AuthHelpers={AuthHelpers}
-                useAccessToken={useAccessToken}
-                useCustomerId={useCustomerId}
-                useCustomerType={useCustomerType}
-                useMultiSite={useMultiSite}
-            />
-        )
-    }
+const CheckoutConfirmation = loadable(() => import('./pages/checkout/confirmation'), {
+    fallback: fallback
 })
 
 // Checkout Redirect page from Adyen
-const AdyenCheckoutRedirect = loadable(() => import('@adyen/adyen-salesforce-pwa'), {
-    fallback: fallback,
-    resolveComponent: (components) => {
-        return () => (
-            <components.AdyenCheckoutRedirect
-                useAccessToken={useAccessToken}
-                useCustomerId={useCustomerId}
-                useCustomerType={useCustomerType}
-                useMultiSite={useMultiSite}
-            />
-        )
-    }
+const AdyenCheckoutRedirect = loadable(() => import('./pages/checkout/redirect'), {
+    fallback: fallback
 })
 
 // Checkout Error page from Adyen
-const AdyenCheckoutError = loadable(() => import('@adyen/adyen-salesforce-pwa'), {
-    fallback: fallback,
-    resolveComponent: (components) => {
-        return () => <components.AdyenCheckoutError />
-    }
+const AdyenCheckoutError = loadable(() => import('./pages/checkout/error'), {
+    fallback: fallback
 })
 
 const routes = [

diff --git a/packages/adyen-retail-react-app/overrides/app/ssr.js b/packages/adyen-retail-react-app/overrides/app/ssr.js
@@ -73,11 +73,18 @@ const {handler} = runtime.createHandler(options, (app) => {
                     'connect-src': [
                         "'self'",
                         'api.cquotient.com',
+                        'https://api.lab.amplitude.com/sdk/vardata',
                         '*.adyen.com',
                         '*.amazon.com',
                         'https://www.sandbox.paypal.com/xoplatform/logger/api/logger?disableSetCookie=true'
                     ],
-                    'frame-src': ["'self'", '*.adyen.com', '*.paypal.com', '*.google.com'],
+                    'frame-src': [
+                        "'self'",
+                        '*.adyen.com',
+                        '*.paypal.com',
+                        '*.google.com',
+                        'https://sandbox.kit.cash.app'
+                    ],
                     /* -----------------Adyen End ------------------------ */
                     // Do not upgrade insecure requests for local development
                     'upgrade-insecure-requests': isRemote() ? [] : null