@viur/shop-components 0.8.0 → 0.9.1

package/package.json

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

package/src/Shop.vue

@@ -120,12 +120,12 @@ onBeforeMount(()=>{
     }
 
     shopStore.state.moduleName= props.modulename
-    fetchCart()
     shopStore.fetchMetaData()
     const params = useUrlSearchParams('hash')
     if (Object.keys(params).includes('order')){
         shopStore.state.orderKey = params['order']
         fetchOrder(shopStore.state.orderKey).then(()=>{
+          fetchCart();  // load after cartKey has been loaded from order
           shopStore.state.orderReady = true
           // navigate to order state
           if(shopStore.state.order?.['is_ordered']){
@@ -135,6 +135,7 @@ onBeforeMount(()=>{
           }
         })
     }else{
+      fetchCart()
       shopStore.state.orderReady = true
     }
 

package/src/components/PaymentProviderUnzer.vue

@@ -38,7 +38,12 @@
           <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>
@@ -56,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})
 
@@ -126,6 +135,7 @@ function initUnzerForm(){
 }
 
 function paymentError(error){
+  console.error(error)
   state.loading = false
   state.hasError = true
 }

package/src/composables/cart.js

@@ -39,18 +39,18 @@ export function useCart() {
       //first fetch root then fetchItems for this root
       state.isLoading = true;
 
-      if (shopStore.state.order != null && shopStore.order?.cart?.key.length) {
-        shopStore.state.cartRoot = {};
-        shopStore.state.cartRoot = shopStore.state.order.cart;
+      if (shopStore.state.order != null && shopStore.state.order?.cart?.dest.key) {
+        // shopStore.state.cartRoot = {};
+        shopStore.state.cartRoot = shopStore.state.order.cart.dest;
 
-        return fetchCartItems(shopStore.state.order.cart.key).then(() => {
+        return fetchCartItems(shopStore.state.cartRoot["key"]).then(() => {  // TODO: duplicate code
           state.isLoading = false;
           shopStore.state.cartReady = true;
         });
       }
       return fetchCartRoot().then(() => {
         if (!shopStore.state.cartRoot?.["key"]) return 0;
-        fetchCartItems(shopStore.state.cartRoot["key"]).then(() => {
+        fetchCartItems(shopStore.state.cartRoot["key"]).then(() => {  // TODO: duplicate code
           state.isLoading = false;
           shopStore.state.cartReady = 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,7 +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."
+      '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,7 +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."
+      '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,7 +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."
+      '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: {