ApplePay Express

packages/adyen-retail-react-app/overrides/app/pages/cart/partials/cart-cta.jsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React, {Fragment} from 'react'
+import {FormattedMessage} from 'react-intl'
+import {Flex, Button} from '@salesforce/retail-react-app/app/components/shared/ui'
+import {
+    AmexIcon,
+    DiscoverIcon,
+    LockIcon,
+    MastercardIcon,
+    VisaIcon
+} from '@salesforce/retail-react-app/app/components/icons'
+import Link from '@salesforce/retail-react-app/app/components/link'
+/* -----------------Adyen Begin ------------------------ */
+import '@adyen/adyen-salesforce-pwa/dist/app/adyen.css'
+import {useAccessToken, useCustomerId, useCustomerType} from '@salesforce/commerce-sdk-react'
+import {AdyenExpressCheckoutProvider, ApplePayExpress} from '@adyen/adyen-salesforce-pwa'
+import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+import PropTypes from 'prop-types'
+/* -----------------Adyen End ------------------------ */
+
+const CartCta = () => {
+    return (
+        <Fragment>
+            <Button
+                as={Link}
+                to="/checkout"
+                width={['95%', '95%', '95%', '100%']}
+                marginTop={[6, 6, 2, 2]}
+                mb={4}
+                rightIcon={<LockIcon />}
+                variant="solid"
+            >
+                <FormattedMessage
+                    defaultMessage="Proceed to Checkout"
+                    id="cart_cta.link.checkout"
+                />
+            </Button>
+            <Flex justify={'center'}>
+                <AdyenExpressCheckoutProvider
+                    useAccessToken={useAccessToken}
+                    useCustomerId={useCustomerId}
+                    useCustomerType={useCustomerType}
+                    useMultiSite={useMultiSite}
+                >
+                    <ApplePayExpress />
+                </AdyenExpressCheckoutProvider>
+            </Flex>
+            <Flex justify={'center'}>
+                <VisaIcon height={8} width={10} mr={2} />
+                <MastercardIcon height={8} width={10} mr={2} />
+                <AmexIcon height={8} width={10} mr={2} />
+                <DiscoverIcon height={8} width={10} mr={2} />
+            </Flex>
+        </Fragment>
+    )
+}
+
+CartCta.propTypes = {
+    shippingMethods: PropTypes.object
+}
+
+export default CartCta

packages/adyen-retail-react-app/overrides/app/pages/checkout/confirmation.jsx

@@ -37,10 +37,9 @@ 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 '@adyen/adyen-salesforce-pwa/lib/components/adyenCheckout'
-import {AdyenCheckoutProvider} from '@adyen/adyen-salesforce-pwa/lib/context/adyen-checkout-context'
 
 /* -----------------Adyen Begin ------------------------ */
+import {AdyenCheckout, AdyenCheckoutProvider} from '@adyen/adyen-salesforce-pwa'
 import {
     AuthHelpers,
     useAccessToken,

packages/adyen-retail-react-app/overrides/app/pages/checkout/index.jsx

@@ -15,11 +15,11 @@ import ShippingAddress from '@salesforce/retail-react-app/app/pages/checkout/par
 import ShippingOptions from '@salesforce/retail-react-app/app/pages/checkout/partials/shipping-options'
 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 '@adyen/adyen-salesforce-pwa/lib/context/adyen-checkout-context'
 import PropTypes from 'prop-types'
 
 /* -----------------Adyen Begin ------------------------ */
+import Payment from './partials/payment'
+import {AdyenCheckoutProvider} from '@adyen/adyen-salesforce-pwa'
 import '@adyen/adyen-salesforce-pwa/dist/app/adyen.css'
 import {
     useAccessToken,

packages/adyen-retail-react-app/overrides/app/pages/checkout/partials/payment.jsx

@@ -22,8 +22,9 @@ 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 '@adyen/adyen-salesforce-pwa/lib/components/adyenCheckout'
-import {useAdyenCheckout} from '@adyen/adyen-salesforce-pwa/lib/context/adyen-checkout-context'
+/* -----------------Adyen Begin ------------------------ */
+import {AdyenCheckout, useAdyenCheckout} from '@adyen/adyen-salesforce-pwa'
+/* -----------------Adyen End ------------------------ */
 
 const Payment = ({useShopperBasketsMutation}) => {
     const {formatMessage} = useIntl()

packages/adyen-retail-react-app/overrides/app/pages/checkout/redirect/index.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import AdyenCheckout from '@adyen/adyen-salesforce-pwa/lib/components/adyenCheckout'
-import {AdyenCheckoutProvider} from '@adyen/adyen-salesforce-pwa/lib/context/adyen-checkout-context'
+import {AdyenCheckout, AdyenCheckoutProvider} from '@adyen/adyen-salesforce-pwa'
 import PropTypes from 'prop-types'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
 import '@adyen/adyen-salesforce-pwa/dist/app/adyen.css'

packages/adyen-retail-react-app/overrides/app/routes.jsx

@@ -40,6 +40,10 @@ const AdyenCheckoutError = loadable(() => import('./pages/checkout/error'), {
     fallback: fallback
 })
 
+const Cart = loadable(() => import('./pages/cart'), {
+    fallback: fallback
+})
+
 const routes = [
     {
         path: '/checkout',
@@ -58,6 +62,11 @@ const routes = [
         path: '/checkout/confirmation/:orderNo',
         component: CheckoutConfirmation
     },
+    {
+        path: '/cart',
+        component: Cart,
+        exact: true
+    },
     ..._routes
 ]