chore: validate addresses for google and apple pay (#782)

* chore: validate addresses for google and apple pay * fix: lint and creditcard redirect after clear the basket * fix: update sdk * fix: message for no created address(es) * fix: lang
plentymarkets · Nov 6, 2024 · addff21 · addff21
1 parent fd9c750
commit addff21
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 25 deletions.
diff --git a/apps/web/components/PayPal/PayPalCreditCardForm.vue b/apps/web/components/PayPal/PayPalCreditCardForm.vue
@@ -107,6 +107,7 @@ onMounted(() => {
         });
 
         if (order?.order?.id) {
+          useProcessingOrder().processingOrder.value = true;
           clearCartItems();
 
           navigateTo(

diff --git a/apps/web/composables/useCheckout/__tests__/useCheckout.spec.ts b/apps/web/composables/useCheckout/__tests__/useCheckout.spec.ts
@@ -134,11 +134,7 @@ describe('useCheckout', () => {
       };
     });
     const { validateTerms } = useCheckout();
-    const callback = vi.fn();
-
-    validateTerms(callback);
-
-    expect(callback).toHaveBeenCalledWith(true);
+    expect(validateTerms()).toBe(true);
   });
 
   it('should test if terms are not accepted', () => {
@@ -149,11 +145,7 @@ describe('useCheckout', () => {
       };
     });
     const { validateTerms } = useCheckout();
-    const callback = vi.fn();
-
-    validateTerms(callback);
-
-    expect(callback).toHaveBeenCalledWith(false);
+    expect(validateTerms()).toBe(false);
   });
 
   it('should set initial state when persisting shipping address', () => {

diff --git a/apps/web/composables/useCheckout/useCheckout.ts b/apps/web/composables/useCheckout/useCheckout.ts
@@ -1,11 +1,14 @@
 import { type Address, AddressType, cartGetters, userAddressGetters } from '@plentymarkets/shop-api';
-import { type PayPalAddToCartCallback } from '~/components/PayPal/types';
 import { scrollToHTMLObject } from '~/utils/scollHelper';
 
 const ID_CHECKBOX = '#terms-checkbox';
 const ID_SHIPPING_ADDRESS = '#shipping-address';
 const ID_BILLING_ADDRESS = '#billing-address';
 
+const scrollToShippingAddress = () => {
+  scrollToHTMLObject(ID_SHIPPING_ADDRESS);
+};
+
 export const useCheckout = (cacheKey = '') => {
   const state = useState('useCheckout' + cacheKey, () => ({
     combineShippingAndBilling: true,
@@ -63,12 +66,11 @@ export const useCheckout = (cacheKey = '') => {
     return false;
   };
 
-  const validateTerms = (callback?: PayPalAddToCartCallback): boolean => {
+  const validateTerms = (): boolean => {
     const isValid = termsAccepted.value;
 
     setShowErrors(!isValid);
     if (!isValid) scrollToHTMLObject(ID_CHECKBOX);
-    callback?.(isValid);
 
     return isValid;
   };
@@ -116,5 +118,6 @@ export const useCheckout = (cacheKey = '') => {
     hasBillingAddress,
     backToFormEditing,
     validateTerms,
+    scrollToShippingAddress,
   };
 };
diff --git a/apps/web/composables/useJsonEditor/useJsonEditor.ts b/apps/web/composables/useJsonEditor/useJsonEditor.ts
@@ -15,7 +15,7 @@ export const useJsonEditor = (initialJson: string): UseJsonEditorReturn => {
   const updateLineCount = () => {
     if (textarea.value) {
       const lineBreaks = (jsonText.value.match(/\n/g) || []).length;
-      lineCount.value = Array.from({ length: lineBreaks + 1 }, (_, i) => i + 1);
+      lineCount.value = Array.from({ length: lineBreaks + 1 }, (_, index) => index + 1);
     }
   };
 

diff --git a/apps/web/lang/de.json b/apps/web/lang/de.json
@@ -490,6 +490,9 @@
     "notificationsWarningOverselling": "Die gewählte Menge übersteigt den verfügbaren Warenbestand. :stock sind zur Zeit auf Lager; :oversellingAmount werden nachgeliefert."
   },
   "errorMessages": {
+    "checkout": {
+      "missingAddress": "Bitte geben Sie Ihre Adresse ein, um mit dem Bezahlvorgang fortzufahren."
+    },
     "contact": {
       "messageRequired": "Nachricht ist erforderlich.",
       "nameRequired": "Name ist erforderlich.",

diff --git a/apps/web/lang/en.json b/apps/web/lang/en.json
@@ -490,6 +490,9 @@
     "notificationsWarningOverselling": "The selected quantity exceeds the available stock. :stock are currently in stock; :oversellingAmount will be supplied later."
   },
   "errorMessages": {
+    "checkout": {
+      "missingAddress": "Please provide your address to continue with the checkout."
+    },
     "contact": {
       "messageRequired": "Message is required.",
       "nameRequired": "Name is required.",

diff --git a/apps/web/pages/checkout.vue b/apps/web/pages/checkout.vue
@@ -46,7 +46,7 @@
             <client-only v-if="selectedPaymentId === paypalPaymentId">
               <PayPalExpressButton
                 :disabled="!termsAccepted || disableShippingPayment || cartLoading"
-                @validation-callback="handlePayPalExpress"
+                @validation-callback="handleReadyToBuy"
                 type="Checkout"
               />
               <PayPalPayLaterBanner
@@ -69,12 +69,12 @@
             <PayPalApplePayButton
               v-else-if="selectedPaymentId === paypalApplePayPaymentId"
               :style="createOrderLoading || disableShippingPayment || cartLoading ? 'pointer-events: none;' : ''"
-              @button-clicked="validateTerms"
+              @button-clicked="handleReadyToBuy"
             />
             <PayPalGooglePayButton
               v-else-if="selectedPaymentId === paypalGooglePayPaymentId"
               :style="createOrderLoading || disableShippingPayment || cartLoading ? 'pointer-events: none;' : ''"
-              @button-clicked="validateTerms"
+              @button-clicked="handleReadyToBuy"
             />
             <UiButton
               v-else
@@ -141,6 +141,7 @@ const {
   hasBillingAddress,
   backToFormEditing,
   validateTerms,
+  scrollToShippingAddress,
 } = useCheckout();
 
 const {
@@ -212,7 +213,13 @@ const readyToBuy = () => {
     return backToFormEditing();
   }
 
-  return !(!validateTerms() || !hasShippingAddress.value || !hasBillingAddress.value);
+  if (!hasShippingAddress.value || !hasBillingAddress.value) {
+    send({ type: 'secondary', message: t('errorMessages.checkout.missingAddress') });
+    scrollToShippingAddress();
+    return false;
+  }
+
+  return validateTerms();
 };
 
 const openPayPalCardDialog = async () => {
@@ -233,7 +240,7 @@ const handleRegularOrder = async () => {
   }
 };
 
-const handlePayPalExpress = (callback?: PayPalAddToCartCallback) => {
+const handleReadyToBuy = (callback?: PayPalAddToCartCallback) => {
   if (callback) {
     callback(readyToBuy());
   }

diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "lhci:mobile": "lhci autorun"
   },
   "dependencies": {
-    "@plentymarkets/shop-api": "^0.72.1",
+    "@plentymarkets/shop-api": "^0.72.2",
     "@types/applepayjs": "^14.0.8",
     "@types/googlepay": "^0.7.6",
     "@vee-validate/nuxt": "^4.13.2",

diff --git a/yarn.lock b/yarn.lock
@@ -4237,7 +4237,7 @@ __metadata:
     "@nuxt/test-utils": ^3.13.1
     "@nuxtjs/turnstile": ^0.8.0
     "@paypal/paypal-js": 8.1.0
-    "@plentymarkets/shop-api": ^0.72.1
+    "@plentymarkets/shop-api": ^0.72.2
     "@types/applepayjs": ^14.0.8
     "@types/googlepay": ^0.7.6
     "@types/uuid": ^9.0.8
@@ -4271,14 +4271,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@plentymarkets/shop-api@npm:^0.72.1":
-  version: 0.72.1
-  resolution: "@plentymarkets/shop-api@npm:0.72.1::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40plentymarkets%2Fshop-api%2F0.72.1%2F9750e86e9b2a839a628cd260869d8ccc6c82e4dd"
+"@plentymarkets/shop-api@npm:^0.72.2":
+  version: 0.72.2
+  resolution: "@plentymarkets/shop-api@npm:0.72.2::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40plentymarkets%2Fshop-api%2F0.72.2%2F7371967a71ce02df820ea101fb9d994088eda326"
   dependencies:
     "@vue-storefront/middleware": ^3.10.0
     axios: ^1.7.7
     consola: ^3.2.3
-  checksum: 765e4ff1caa58beddae861ddf74d81e2aadd7ffe67d6d2c9ab7b21f46c42100a660a7d72bb9fe478305e3accd5e84e5b6f0a2cdf59bf203deb998b95aa4f79a2
+  checksum: 8fe6d4bf487d9a6f2b8714a75d876c77fdd2009a1b4139cd436ea90f5233dca710ae019ffd31fd91ebc66239f0334dc062d7d3e1c7486c7959762b463a049c27
   languageName: node
   linkType: hard