@viur/shop-components 0.13.2-0 → 0.13.2-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.13.2-0",
+  "version": "0.13.2-1",
   "description": "Frontend Vue components for the shop module of ViUR",
   "repository": {
     "type": "git",

package/src/Steps/ShopOrderConfirm.vue

@@ -81,7 +81,6 @@
     </sl-dialog>
   </template>
 
-  paypal?
   <template v-if="shopStore.state.order?.['payment_provider'] !== null && shopStore.state.order?.['payment_provider'].startsWith('paypal')">
     <sl-dialog v-if="state.paymentPopup" :label="$t('viur.shop.order_pay')" :open="state.paymentPopup" @sl-after-hide="state.paymentPopup=false">
         <payment-provider-paypal @cancel="paymentCanceled"></payment-provider-paypal>

package/src/components/PaymentProviderPaypal.vue

@@ -1,6 +1,4 @@
 <template>
-  PAYPAL HERE
-
   <div class="loading-wrapper" v-if="state.loading">
     <sl-spinner class="loading"></sl-spinner>
   </div>
@@ -25,16 +23,15 @@ import {Request} from '@viur/vue-utils';
 import {HTTPError} from '@viur/vue-utils/utils/request.js';
 import {useIntervalFn} from '@vueuse/core';
 import {onBeforeMount, reactive} from 'vue';
-import {useAddress} from '../composables/address.js';
 import {useOrder} from '../composables/order';
 import {useViurShopStore} from '../shop';
 
 const shopStore = useViurShopStore();
 const {fetchOrder} = useOrder();
-const {saveBirthdate} = useAddress();
 
 const emits = defineEmits(['cancel']);
 
+// TODO: Duplicate code
 const {pause: PaymentCheckPause, resume: PaymentCheckResume, isActive: PaymentCheckIsActive} = useIntervalFn(() => {
   console.debug('checking ...');
 
@@ -56,6 +53,7 @@ const state = reactive({
   errorMessage: null,
   waitPayment: false,
   order_id: null,
+  debugPaypal: false,
 });
 
 /**
@@ -66,7 +64,6 @@ function initPaypalForm() {
     console.error(`PayPal Checkout does not work with ${shopStore.state.order?.['payment_provider']}.`);
     return null;
   }
-  const client_id = shopStore.state.paymentProviderData.public_key;
 
   const scriptConfig = {
     // https://developer.paypal.com/sdk/js/configuration/#configure-and-customize-your-integration
@@ -75,7 +72,7 @@ function initPaypalForm() {
     'currency': 'EUR',
     'components': 'buttons,applepay',
     'enable-funding': 'venmo,paylater,card,sofort,sepa,giropay',
-    'debug': shopStore.state.debug,
+    'debug': state.debugPaypal,
   };
 
   const paypalScriptPromise = new Promise((resolve, reject) => {
@@ -88,7 +85,6 @@ function initPaypalForm() {
     document.head.appendChild(paypalScript);
   });
 
-
   paypalScriptPromise.then(() => {
     console.debug('paypalScriptPromise resolved - READY');
     console.debug(shopStore.state.paymentProviderData);
@@ -106,92 +102,91 @@ function initPaypalForm() {
 
       async createOrder() {
         console.debug('createOrder');
-        try {
-          let resp = await shopStore.checkoutOrder();//.then((resp) => {
-          console.debug(resp);
+        state.loading = true;
 
-          // const orderData = await resp.json();
-          const orderData = await resp.payment;
-          // const orderData = await response.json();
+        if (shopStore.state.order?.['is_ordered'] && shopStore.state.order?.['is_checkout_in_progress'] && !shopStore.state.order?.['is_paid']) {
+          // already ordered; needs a re-checkout method to create a new order. But we can try it again with the last order_id
+          state.order_id = (shopStore.state.order?.payment?.payments ?? []).at(-1)?.payment_id;
+          return state.order_id;
+        }
 
-          // let orderData = shopStore.state.paymentProviderData;
-          console.debug(orderData);
+        try {
+          const resp = await shopStore.checkoutOrder(); // must be inline awaited to return order_id on success
+          // TODO: re-checkout with new attempt or different method
+          console.debug('checkoutOrder', resp);
+          const orderData = resp.payment;
 
           if (orderData.id) {
+            // SUCCESS; return the order_id to the PayPal instance
             state.order_id = orderData.id;
             return orderData.id;
+          } else {
+            // ERROR; show error message
+            const errorDetail = orderData?.details?.[0];
+            const errorMessage = errorDetail
+              ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
+              : JSON.stringify(orderData);
+            console.error(errorDetail);
+            paymentError(`Could not initiate PayPal Checkout...<br><br>${errorMessage}`);
           }
-
-          const errorDetail = orderData?.details?.[0];
-          const errorMessage = errorDetail
-            ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
-            : JSON.stringify(orderData);
-
-          throw new Error(errorMessage);
         } catch (error) {
-          console.error(error);
-          // resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
+          paymentError(error);
+          return null;
+        } finally {
+          state.loading = false;
         }
       },
 
+      /**
+       * Buyer approved the payment, send it to the backend to capture it and mark as paid.
+       */
       async onApprove(data, actions) {
         console.debug('onApprove', data, actions);
         state.loading = true;
 
-        // buyer approved the payment, send it to the backend to capture it and mark as paid
         const paymenttarget = shopStore.state.order?.['payment_provider'].replace(/-/g, '_');
         Request.post(`${shopStore.state.shopUrl}/pp_${paymenttarget}/capture_order`, {
           dataObj: {
             order_key: shopStore.state.orderKey,
             order_id: state.order_id,
           },
-        }).then(async (resp) => {
-          console.debug('capture_order', resp);
-          const data = await resp.json();
-          const orderData = data.payment;
-          console.debug(orderData);
-
-          // Three cases to handle:
-          //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
-          //   (2) Other non-recoverable errors -> Show a failure message
-          //   (3) Successful transaction -> Show confirmation or thank you message
-          const errorDetail = orderData?.details?.[0];
-
-          if (errorDetail?.issue === 'INSTRUMENT_DECLINED') {
-            // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
-            // recoverable state, per
-            // https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
-            return actions.restart();
-          } else if (errorDetail) {
-            // (2) Other non-recoverable errors -> Show a failure message
-            paymentError(`${errorDetail.description} (${orderData.debug_id})`);
-          } else if (!orderData.purchase_units) {
-            console.error(`No purchase_units`);
-            paymentError(`Missing purchase_units`);
-          } else {
-            // (3) Successful transaction -> Show confirmation or thank you message
-            // Or go to another URL:  actions.redirect('thank_you.html');
-            const transaction =
-              orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
-              orderData?.purchase_units?.[0]?.payment?.authorizations?.[0];
-            console.debug('Capture result', orderData, JSON.stringify(orderData, null, 2));
-
-            state.loading = false;
-            state.hasError = false;
-            state.waitPayment = true;
-            PaymentCheckResume();
-          }
-        }).catch(error => {
-          paymentError(error);
-        });
+        })
+          .then(async (resp) => {
+            console.debug('capture_order', resp);
+            const data = await resp.json();
+            const orderData = data.payment;
+
+            // Three cases to handle:
+            //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
+            //   (2) Other non-recoverable errors -> Show a failure message
+            //   (3) Successful transaction -> Show confirmation or thank you message
+            const errorDetail = orderData?.details?.[0];
+
+            if (errorDetail?.issue === 'INSTRUMENT_DECLINED') {
+              // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
+              // recoverable state, per
+              // https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
+              return actions.restart();
+            } else if (errorDetail) {
+              // (2) Other non-recoverable errors -> Show a failure message
+              paymentError(`${errorDetail.description} (${orderData?.debug_id})`);
+            } else if (!orderData.purchase_units) {
+              paymentError(`Missing purchase_units`);
+            } else {
+              // (3) Successful transaction -> Show confirmation or thank you message
+              // Or go to another URL:  actions.redirect('thank_you.html');
+              state.loading = false;
+              state.hasError = false;
+              state.waitPayment = true;
+              PaymentCheckResume();
+            }
+          })
+          .catch(paymentError);
       },
 
-      onError: (err) => {
-        console.error(err);
-        paymentError(err);
-      },
+      onError: paymentError,
 
-      appSwitchWhenAvailable: true,
+      // appSwitchWhenAvailable: true,
     });
     paypalButtons.render('#paypal-button-container');
   });

package/src/components/PaymentProviderUnzer.vue

@@ -93,6 +93,7 @@ const {saveBirthdate} = useAddress();
 
 const emits = defineEmits(['cancel']);
 
+// TODO: Duplicate code
 const {pause: PaymentCheckPause, resume: PaymentCheckResume, isActive: PaymentCheckIsActive} = useIntervalFn(() => {
   console.debug('checking ...');