feat: notify on unsaved address (#762)

* feat: notify on unsaved address * Update de.json * Update en.json --------- Co-authored-by: Franz Mutschler <[email protected]> Co-authored-by: Maximilian Röll <[email protected]>
plentymarkets · Oct 30, 2024 · eb6666d · eb6666d
1 parent 36eaf8c
commit eb6666d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/apps/web/lang/de.json b/apps/web/lang/de.json
@@ -837,6 +837,7 @@
   "saveAddress": "Adresse speichern",
   "savedBillingAddress": "Gespeicherte Rechnungsadressen",
   "savedShippingAddress": "Gespeicherte Lieferadressen",
+  "unsavedAddress": "Die eingegebene Adresse wurde noch nicht gespeichert.",
   "scrollTop": "Nach oben scrollen",
   "search": "Suche",
   "shipping": {

diff --git a/apps/web/lang/en.json b/apps/web/lang/en.json
@@ -837,6 +837,7 @@
   "saveAddress": "Save address",
   "savedBillingAddress": "Saved billing adresses",
   "savedShippingAddress": "Saved shipping adresses",
+  "unsavedAddress": "The address you entered has not yet been saved. Click Save address to proceed with the checkout.",
   "scrollTop": "Scroll to top",
   "search": "Search",
   "shipping": {

diff --git a/apps/web/pages/checkout.vue b/apps/web/pages/checkout.vue
@@ -1,9 +1,9 @@
 <template>
   <NuxtLayout
     name="checkout"
-    :back-label-desktop="$t('backToCart')"
-    :back-label-mobile="$t('back')"
-    :heading="$t('checkout')"
+    :back-label-desktop="t('backToCart')"
+    :back-label-mobile="t('back')"
+    :heading="t('checkout')"
   >
     <div v-if="cart" class="lg:grid lg:grid-cols-12 lg:gap-x-6">
       <div class="col-span-6 xl:col-span-7 mb-10 lg:mb-0">
@@ -64,7 +64,7 @@
               size="lg"
               class="w-full mb-4 md:mb-0 cursor-pointer"
             >
-              {{ $t('buy') }}
+              {{ t('buy') }}
             </UiButton>
             <UiButton
               v-else
@@ -76,7 +76,7 @@
               class="w-full mb-4 md:mb-0 cursor-pointer"
             >
               <SfLoaderCircular v-if="createOrderLoading" class="flex justify-center items-center" size="sm" />
-              <template v-else>{{ $t('buy') }}</template>
+              <template v-else>{{ t('buy') }}</template>
             </UiButton>
             <!-- <PayPalApplePayButton
               v-if="applePayAvailable"
@@ -112,6 +112,8 @@ definePageMeta({
   pageType: 'static',
 });
 
+const { send } = useNotification();
+const { t } = useI18n();
 const localePath = useLocalePath();
 const { loading: createOrderLoading, createOrder } = useMakeOrder();
 const { shippingPrivacyAgreement } = useAdditionalInformation();
@@ -177,7 +179,11 @@ const paypalCreditCardPaymentId = computed(() => {
 // const applePayAvailable = computed(() => import.meta.client && (window as any).ApplePaySession);
 
 const readyToBuy = () => {
-  if (anyAddressFormIsOpen.value) return backToFormEditing();
+  if (anyAddressFormIsOpen.value) {
+    send({ type: 'secondary', message: t('unsavedAddress') });
+    return backToFormEditing();
+  }
+
   return !(!validateTerms() || !hasShippingAddress.value || !hasBillingAddress.value);
 };
 

diff --git a/docs/changelog/changelog_en.md b/docs/changelog/changelog_en.md
@@ -10,6 +10,7 @@
 
 ### New
 
+- Clicking "Buy" with an unsaved Address will now display a notification.
 - When an EU country is selected as the shipping country, all EU countries become available as billing options.
 - Added a new request header for configId and added no cache to environment variables.
 - Implement new notification design