#292222 Checkout.com platform-upgrade

src/modules/icmaa-checkout/components/Review.ts

@@ -27,11 +27,16 @@ export default {
     ...mapGetters({
       shippingDetails: 'checkout/getShippingDetails',
       personalDetails: 'checkout/getPersonalDetails',
+      orderButtonComponentByCode: 'payment/getOrderButtonComponentByCode',
+      paymentMethod: 'checkout/getPaymentMethod',
       hasAgreements: 'checkout/hasAgreements',
       viewport: 'ui/getViewport'
     }),
     isMobile () {
       return ['xs', 'sm', 'md'].includes(this.viewport)
+    },
+    orderButtonComponent () {
+      return this.orderButtonComponentByCode(this.paymentMethod.code)
     }
   },
   methods: {

src/modules/icmaa-payment/store/methods/abstract.ts

@@ -16,7 +16,8 @@ const AbstractPaymentStore: Module<State, RootState> = {
     afterPlaceOrder () { }
   },
   getters: {
-    getInfoComponent: () => false
+    getInfoComponent: () => false,
+    getOrderButtonComponent: () => false
   }
 }
 

src/modules/icmaa-payment/store/payment/actions.ts

@@ -12,7 +12,9 @@ const actions: ActionTree<PaymentState, RootState> = {
     try {
       return getters.getMethodFactoryByCode(code)()
         .then(async method => {
-          rootStore.registerModule(code, method.default())
+          if (!rootStore.hasModule(code)) {
+            rootStore.registerModule(code, method.default())
+          }
           commit(types.ADD_METHOD, code)
 
           await dispatch(`${code}/init`, undefined, { root: true })

src/modules/icmaa-payment/store/payment/getters.ts

@@ -16,6 +16,10 @@ const getters: GetterTree<PaymentState, RootState> = {
   getInfoComponentByCode: (state, getters, rootState, rootGetters) => (code: string): any => {
     if (!getters.isMethod(code)) return false
     return rootGetters[`${code}/getInfoComponent`]
+  },
+  getOrderButtonComponentByCode: (state, getters, rootState, rootGetters) => (code: string): any => {
+    if (!getters.isMethod(code)) return false
+    return rootGetters[`${code}/getOrderButtonComponent`]
   }
 }
 

src/modules/icmaa-payment/store/payment/index.ts

@@ -13,7 +13,8 @@ export const PaymentStore: Module<PaymentState, RootState> = {
       'bankpayment': () => import(/* webpackChunkName: "icmaa-payment-method-bankpayment" */ '../methods/bank-payment'),
       'cashondelivery': () => import(/* webpackChunkName: "icmaa-payment-method-cashondelivery" */ '../methods/cash-on-delivery'),
       'checkoutcom_card': () => import(/* webpackChunkName: "icmaa-payment-method-checkoutcom-card" */ 'icmaa-checkout-com/store/methods/card'),
-      'checkoutcom_apm': () => import(/* webpackChunkName: "icmaa-payment-method-checkoutcom-apm" */ 'icmaa-checkout-com/store/methods/apm')
+      'checkoutcom_apm': () => import(/* webpackChunkName: "icmaa-payment-method-checkoutcom-apm" */ 'icmaa-checkout-com/store/methods/apm'),
+      'icmaa_paypal_checkout': () => import(/* webpackChunkName: "icmaa-payment-method-paypal" */ 'icmaa-paypal/store')
     },
     methodsFactoryKeyMap: [
       {

src/modules/icmaa-payment/types/methods/AbstractState.ts

@@ -8,7 +8,8 @@ interface PaymentActionTree<S, R> extends ActionTree<S, R> {
 }
 
 interface PaymentGetterTree<S, R> extends GetterTree<S, R> {
-  getInfoComponent?: any
+  getInfoComponent?: any,
+  getOrderButton?: any
 }
 
 export interface PaymentStore<S, R> extends Module<S, R> {
@@ -19,5 +20,6 @@ export interface PaymentStore<S, R> extends Module<S, R> {
 
 export default interface AbstractState {
   infoComponent?: (() => Promise<any>) | boolean,
+  orderButtonComponent?: (() => Promise<any>),
   [key: string]: any
 }

src/modules/icmaa-paypal/components/Checkout/Button.vue

@@ -17,6 +17,14 @@ export default {
       type: String,
       default: 'gold',
       validator: (v) => ['gold', 'blue', 'silver', 'white', 'black'].includes(v)
+    },
+    isInContext: {
+      type: Boolean,
+      default: false
+    },
+    formValidation: {
+      type: Function,
+      default: () => true
     }
   },
   data () {
@@ -26,15 +34,19 @@ export default {
   },
   computed: {
     ...mapGetters({
-      currency: 'icmaaPayPal/getCurrency',
-      locale: 'icmaaPayPal/getLocale',
-      brandName: 'icmaaPayPal/getBrandName',
-      softDescriptor: 'icmaaPayPal/getSoftDescriptor',
-      referenceId: 'icmaaPayPal/getReferenceId',
+      currency: 'icmaa_paypal_checkout/getCurrency',
+      locale: 'icmaa_paypal_checkout/getLocale',
+      brandName: 'icmaa_paypal_checkout/getBrandName',
+      softDescriptor: 'icmaa_paypal_checkout/getSoftDescriptor',
+      referenceId: 'icmaa_paypal_checkout/getReferenceId',
+      paymentDetails: 'checkout/getPaymentDetails',
       cartItems: 'cart/getCartItems',
       totals: 'cart/getTotals'
     }),
     grandTotal () {
+      return this.totals.find(t => t.code === 'grand_total')?.value || 0
+    },
+    grandTotalMinusShipping () {
       const shipping = this.totals.find(t => t.code === 'shipping')?.value_incl_tax || 0
       return this.totals.find(t => t.code === 'grand_total')?.value - shipping || 0
     },
@@ -53,7 +65,7 @@ export default {
             shape: 'rect',
             color: this.color,
             layout: 'horizontal',
-            label: 'checkout',
+            label: this.isInContext ? 'pay' : 'checkout',
             tagline: false
           },
           onClick: this.onClick,
@@ -79,29 +91,74 @@ export default {
           timeToLive: 8000
         })
 
+        return actions.reject()
+      } else if (!this.formValidation()) {
+        this.$store.dispatch('notification/spawnNotification', {
+          type: 'warning',
+          message: this.$t(
+            'Please fill out all required fields before you can proceed with the payment.'
+          ),
+          action1: { label: this.$t('OK') },
+          timeToLive: 5000
+        })
+
         return actions.reject()
       } else {
         return actions.resolve()
       }
     },
     createOrder (data, actions) {
-      return actions.order.create({
-        application_context: {
-          brand_name: this.brandName,
-          locale: this.locale,
-          shipping_preference: 'GET_FROM_FILE'
-        },
-        purchase_units: [
-          {
-            amount: {
-              currency_code: this.currency,
-              value: round(this.grandTotal)
-            },
-            soft_descriptor: this.softDescriptor,
-            invoice_id: this.referenceId
-          }
-        ]
-      })
+      if (this.isInContext) {
+        const { firstname, lastname, street, city, postcode, region, country_id } = this.paymentDetails
+        return actions.order.create({
+          application_context: {
+            brand_name: this.brandName,
+            locale: this.locale,
+            shipping_preference: 'SET_PROVIDED_ADDRESS'
+          },
+          purchase_units: [
+            {
+              soft_descriptor: this.softDescriptor,
+              invoice_id: this.referenceId,
+              amount: {
+                currency_code: this.currency,
+                value: round(this.grandTotal)
+              },
+              shipping: {
+                name: {
+                  full_name: `${firstname} ${lastname}`
+                },
+                address: {
+                  address_line_1: street[0],
+                  address_line_2: street[1],
+                  admin_area_2: city,
+                  admin_area_1: region,
+                  postal_code: postcode,
+                  country_code: country_id
+                }
+              }
+            }
+          ]
+        })
+      } else {
+        return actions.order.create({
+          application_context: {
+            brand_name: this.brandName,
+            locale: this.locale,
+            shipping_preference: 'GET_FROM_FILE'
+          },
+          purchase_units: [
+            {
+              amount: {
+                currency_code: this.currency,
+                value: round(this.grandTotalMinusShipping)
+              },
+              soft_descriptor: this.softDescriptor,
+              invoice_id: this.referenceId
+            }
+          ]
+        })
+      }
     },
     async onShippingChange (data, actions) {
       const patchActions = []
@@ -126,7 +183,7 @@ export default {
       }
 
       const methodCode = data?.selected_shipping_option?.id
-      let shippingMethods = await this.$store.dispatch('icmaaPayPal/getShipping', { address, methodCode })
+      let shippingMethods = await this.$store.dispatch('icmaa_paypal_checkout/getShipping', { address, methodCode })
       if (shippingMethods?.error) {
         throw Error(shippingMethods?.error)
       }
@@ -156,7 +213,7 @@ export default {
 
       if (data?.selected_shipping_option) {
         const shippingAmount = parseFloat(data.selected_shipping_option.amount.value)
-        const totalInclShipping = this.grandTotal + shippingAmount
+        const totalInclShipping = this.grandTotalMinusShipping + shippingAmount
 
         patchActions.push({
           op: 'replace',
@@ -167,7 +224,7 @@ export default {
             breakdown: {
               item_total: {
                 currency_code: this.currency,
-                value: round(this.grandTotal)
+                value: round(this.grandTotalMinusShipping)
               },
               shipping: {
                 currency_code: this.currency,
@@ -191,12 +248,12 @@ export default {
         })
     },
     async onApprove (data, actions) {
-      if (!this.shippingMethodsLoaded) {
+      if (!this.shippingMethodsLoaded && !this.isInContext) {
         return
       }
 
       const { orderID: orderId, payerID: payerId } = data
-      const result = await this.$store.dispatch('icmaaPayPal/approve', { orderId, payerId })
+      const result = await this.$store.dispatch('icmaa_paypal_checkout/approve', { orderId, payerId })
       if (result?.error) {
         throw Error(result?.error)
       }
@@ -244,7 +301,7 @@ export default {
       const address = { firstname, lastname, street, city, postcode, state, country_id }
 
       const response = await this.$store.dispatch(
-        'icmaaPayPal/capture',
+        'icmaa_paypal_checkout/capture',
         { email, address, captureResponse: resp }
       )
 
@@ -261,7 +318,7 @@ export default {
       Logger.error('An error appeared during checkout:', 'icmaa-paypal', error)()
 
       let { message } = error
-      await this.$store.dispatch('icmaaPayPal/fail', { error: message })
+      await this.$store.dispatch('icmaa_paypal_checkout/fail', { error: message })
 
       this.$store.dispatch('notification/spawnNotification', {
         type: 'error',

src/modules/icmaa-paypal/components/Checkout/ButtonWrapper.vue

@@ -2,6 +2,8 @@
   <PaypalCheckoutButton
     v-if="isLoaded"
     :color="color"
+    :is-in-context="isInContext"
+    :form-validation="formValidation"
   />
 </template>
 
@@ -20,6 +22,14 @@ export default {
       type: String,
       default: 'gold',
       validator: (v) => ['gold', 'blue', 'silver', 'white', 'black'].includes(v)
+    },
+    isInContext: {
+      type: Boolean,
+      default: false
+    },
+    formValidation: {
+      type: Function,
+      default: () => true
     }
   },
   data () {

src/modules/icmaa-paypal/components/Checkout/Info.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="t-pt-2">
+    <div
+      v-if="info.description"
+      class="t-text-sm"
+      v-text="info.description"
+    />
+  </div>
+</template>
+
+<script>
+
+import MethodInfoBoxMixin from 'icmaa-payment/mixins/methods/InfoMixin'
+
+export default {
+  name: 'IcmaaPaypalInfo',
+  mixins: [
+    MethodInfoBoxMixin
+  ]
+}
+</script>

src/modules/icmaa-paypal/components/Checkout/PlaceOrderButton.vue

@@ -0,0 +1,24 @@
+<template>
+  <PaypalCheckoutButton
+    class="t-mt-8"
+    :is-in-context="true"
+    :form-validation="formValidation"
+  />
+</template>
+
+<script>
+import PaypalCheckoutButton from 'icmaa-paypal/components/Checkout/ButtonWrapper'
+
+export default {
+  name: 'PayPalPlaceOrderButton',
+  components: {
+    PaypalCheckoutButton
+  },
+  props: {
+    formValidation: {
+      type: Function,
+      default: () => true
+    }
+  }
+}
+</script>

src/modules/icmaa-paypal/helpers/initStore.ts

@@ -2,9 +2,9 @@ import PayPalState from '../type/PayPalState'
 import { Store } from 'vuex'
 
 export default async ($store: Store<PayPalState>) => {
-  if (!$store.hasModule('icmaaPayPal')) {
-    const store = await import(/* webpackChunkName: "icmaa-paypal-store" */ '../store')
-    $store.registerModule('icmaaPayPal', store.icmaaPayPalStore)
+  if (!$store.hasModule('icmaa_paypal_checkout')) {
+    const store = await import(/* webpackChunkName: "icmaa-payment-method-paypal" */ '../store')
+    $store.registerModule('icmaa_paypal_checkout', store.icmaaPayPalStore() as any)
   }
-  return $store.dispatch('icmaaPayPal/loadSdk')
+  return $store.dispatch('icmaa_paypal_checkout/loadSdk')
 }

src/modules/icmaa-paypal/index.ts

@@ -1,5 +1,4 @@
 import { StorefrontModule } from '@vue-storefront/core/lib/modules'
 
 export const IcmaaPayPalModule: StorefrontModule = function () {
-  // Add vuex store or module logic here later ...
 }

src/modules/icmaa-paypal/store/getters.ts

@@ -3,6 +3,8 @@ import RootState from '@vue-storefront/core/types/RootState'
 import PayPalState from '../type/PayPalState'
 
 const getters: GetterTree<PayPalState, RootState> = {
+  getInfoComponent: (state) => state.infoComponent,
+  getOrderButtonComponent: (state) => state.orderButtonComponent,
   isSdkLoaded: state => !!state.isSdkLoaded,
   getClientId: state => state.clientId,
   getBrandName: state => state.brandName,