@viur/shop-components 0.7.2 → 0.9.0

package/package.json

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

package/src/components/PaymentProviderUnzer.vue

@@ -31,13 +31,19 @@
           </template>
 
           <template v-else-if="shopStore.state.order?.['payment_provider'] === 'unzer-paypal'">
+              <sl-alert open variant="danger">{{$t('viur.shop.paypal_client_popup_info')}}</sl-alert>
               <div id="paypal-element" class="field"></div>
           </template>
 
           <template v-else-if="shopStore.state.order?.['payment_provider'] === 'unzer-ideal'">
               <div id="ideal-element" class="field"></div>
           </template>
+        <p
+          v-if="!!shopStore.state?.paymentProviderData?.redirectUrl"
+          v-html="$t('viur.shop.payment_link', {url: shopStore.state.paymentProviderData.redirectUrl})"
+        />
       </form>
+
         <button :disabled="state.loading" class="unzerUI primary button fluid" @click="submitFormToUnzer">{{ $t('viur.shop.pay') }}</button>
         <sl-button :disabled="state.loading" variant="danger" @click="cancelPayment">{{ $t('actions.cancel') }}</sl-button>
   </div>
@@ -55,11 +61,15 @@ const {fetchOrder} = useOrder()
 const emits = defineEmits(['cancel'])
 
 const { pause:PaymentCheckPause, resume:PaymentCheckResume, isActive:PaymentCheckIsActive } = useIntervalFn(() => {
-  fetchOrder(shopStore.state.orderKey)
+  console.debug('checking ...')
 
-  if (shopStore.state.order?.['is_paid']){
-    PaymentCheckPause()
-  }
+  fetchOrder(shopStore.state.orderKey).then(()=>{
+    if (shopStore.state.order?.['is_paid']){
+      console.debug('Order is paid')
+      shopStore.navigateToTab('complete');
+      PaymentCheckPause();
+    }
+  })
 
 }, 2000,{immediate:false})
 
@@ -125,6 +135,7 @@ function initUnzerForm(){
 }
 
 function paymentError(error){
+  console.error(error)
   state.loading = false
   state.hasError = true
 }

package/src/shop.js

@@ -74,7 +74,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
                 params:{},
                 displayName: "viur.shop.order_step_complete", //Bestellung Abgeschlossen
                 icon: { name: "bag-check" },
-                active:computed(()=>state.order?.['is_ordered'] && state.order?.['is_rts']), // active if ordered
+                active:computed(()=>state.order?.['is_ordered'] && (state.order?.['is_rts'] || state.order?.['is_paid'])), // active if ordered
                 validating:false,
                 valid:false
             },
@@ -156,6 +156,10 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
 
     function navigateToTab(name){
         // navigate to Tab
+        if (!state.tabs[name].active) {
+          console.warn(`navigateToTab called at ${state.currentTab}, but tab (${name}) not active yet`);
+          return false;
+        }
         state.currentTab = name
 
         const params = useUrlSearchParams('hash')
@@ -166,11 +170,20 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
         });
     }
 
-    function navigateToNext(){
-        // shorthand for next Tab
-        if (state.tabIndexMap[state.currentTab] === state.stepperLength-1) return false
-        navigateToTab(state.indexTabMap[state.tabIndexMap[state.currentTab]+1])
+  function navigateToNext() {
+    // shorthand for next Tab
+    const currentTabIndex0 = state.tabIndexMap[state.currentTab];
+    if (currentTabIndex0 === state.stepperLength - 1) {
+      console.warn(`Tab end reached`);
+      return false;
+    }
+    const nextTabName = state.indexTabMap[currentTabIndex0 + 1];
+    if (!state.tabs[nextTabName].active) {
+      console.warn(`navigateToNext called at ${state.currentTab}, but next tab (${nextTabName}) not active yet`);
+      return false;
     }
+    navigateToTab(nextTabName);
+  }
 
     function navigateToPrevious(){
         // shorthand for previous Tab
@@ -236,7 +249,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
                   state.order = data['skel']
                   state.paymentProviderData = data['payment']
 
-                  if(state.order?.['is_ordered'] && state.order?.['is_rts']){
+                  if(state.order?.['is_ordered'] && (state.order?.['is_rts'] || state.order?.['is_paid'])){
                       // order is finished
                       useTimeoutFn(() => {
                         navigateToTab('complete')

package/src/translations/de.js

@@ -10,6 +10,7 @@ export default {
       'order_pay': 'Zahlungspflichtig bestellen',
       'order_number': 'Ihre Vorgangsnummer',
       'order_thanks': 'Vielen Dank für Ihre Bestellung',
+      'order_abort': 'Die Bestellung wurde abgebrochen.',
       'order_message': 'Wir haben Ihre Bestellung erhalten und werden diese schnellstmöglich bearbeiten.<br /> Sie erhalten in wenigen Minuten eine Bestätigung per E-Mail.',
       'order_paid': 'Ihre Zahlung ist bei uns eingegangen.',
       'order_ready_to_ship': 'Ihre Bestellung ist fertig für den Versand.',
@@ -55,6 +56,8 @@ export default {
       'order_step_payment': 'Zahlungsart',
       'order_step_verify': 'Bestellung prüfen',
       'order_step_complete': 'Bestellung Abgeschlossen',
+      'paypal_client_popup_info': 'Bitte prüfen Sie, ob Ihr Browser das PayPal-Popup zulässt.',
+      'payment_link': 'Ihr Browser öffnet kein Popup? Dann klicken Sie bitte <a href="{url}" target="_blank">hier</a>.',
     },
   },
   messages: {

package/src/translations/en.js

@@ -10,6 +10,7 @@ export default {
       'order_pay': 'Place binding order',
       'order_number': 'Your order number',
       'order_thanks': 'Thank you for your order',
+      'order_abort': 'The order was canceled.',
       'order_message': 'We have received your order and will process it as soon as possible.<br /> You will receive a confirmation email in a few minutes.',
       'order_paid': 'Your payment has been received.',
       'order_ready_to_ship': 'Your order is ready for shipping.',
@@ -55,6 +56,8 @@ export default {
       'order_step_payment': 'Payment method',
       'order_step_verify': 'Review order',
       'order_step_complete': 'Order complete',
+      'paypal_client_popup_info': 'Please make sure your browser allows the PayPal popup.',
+      'payment_link': 'Your browser does not open a popup? Then please click <a href="{{url}}" target="_blank">here</a>.',
     },
   },
   messages: {

package/src/translations/fr.js

@@ -10,6 +10,7 @@ export default {
       'order_pay': 'Valider',
       'order_number': 'N° de commande',
       'order_thanks': 'Merci pour votre commande et l’intérêt porté à notre société.',
+      'order_abort': 'La commande a été annulée.',
       'order_message': 'Nous avons bien reçu votre commande et nous allons la traiter dans les plus brefs délais.<br /> Vous recevrez une confirmation par e-mail dans quelques minutes',
       'order_paid': 'Nous avons bien reçu votre paiement',
       'order_ready_to_ship': 'Votre commande est prête à être expédiée',
@@ -55,6 +56,8 @@ export default {
       'order_step_payment': 'Mode de paiement',
       'order_step_verify': 'Vérifier la commande',
       'order_step_complete': 'Valider la commande',
+      'paypal_client_popup_info':"Assurez-vous que votre navigateur autorise la fenêtre contextuelle PayPal.",
+      'payment_link': 'Votre navigateur n\'ouvre pas de popup ? Alors cliquez <a href="{{url}}" target="_blank">ici</a>.',
     },
   },
   messages: {