Merge branch 'main' into email_confirmation

apps/web/__tests__/support/pageObjects/CheckoutPageObject.ts

@@ -154,7 +154,7 @@ export class CheckoutPageObject extends PageObject {
   }
 
   displayFullyPaid() {
-    this.orderPaymentStatus.contains('fullyPaid');
+    this.orderPaymentStatus.contains('Paid');
     return this;
   }
 

apps/web/components/PayPal/PayPalCreditCardForm.vue

@@ -107,6 +107,7 @@ onMounted(() => {
         });
 
         if (order?.order?.id) {
+          useProcessingOrder().processingOrder.value = true;
           clearCartItems();
 
           navigateTo(

apps/web/components/PayPal/PayPalExpressButton.vue

@@ -22,6 +22,7 @@ const localePath = useLocalePath();
 
 const emits = defineEmits<{
   (event: 'validation-callback', callback: PayPalAddToCartCallback): Promise<void>;
+  (event: 'on-approved'): void;
 }>();
 
 const props = defineProps<PaypalButtonPropsType>();
@@ -68,6 +69,8 @@ const onValidationCallback = async () => {
 const onApprove = async (data: OnApproveData) => {
   const result = await approveOrder(data.orderID, data.payerID ?? '');
 
+  emits('on-approved');
+
   if ((props.type === TypeCartPreview || props.type === TypeSingleItem) && result?.url)
     navigateTo(localePath(paths.readonlyCheckout + `/?payerId=${data.payerID}&orderId=${data.orderID}`));
 

apps/web/components/QuickCheckout/QuickCheckout.vue

@@ -76,7 +76,7 @@
           class="w-full mb-3"
           variant="secondary"
         >
-          {{ $t('quickCheckout.checkYourCart') }}
+          {{ t('quickCheckout.checkYourCart') }}
         </UiButton>
 
         <UiButton
@@ -85,10 +85,10 @@
           size="lg"
           class="w-full mb-4 md:mb-0"
         >
-          {{ $t('goToCheckout') }}
+          {{ t('goToCheckout') }}
         </UiButton>
         <OrDivider class="my-4" v-if="isPayPalReady" />
-        <PayPalExpressButton class="w-full text-center" type="CartPreview" />
+        <PayPalExpressButton class="w-full text-center" type="CartPreview" @on-approved="isOpen = false" />
         <PayPalPayLaterBanner placement="payment" :amount="totals.total" />
       </div>
     </div>

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', () => {

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,
   };
 };

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);
     }
   };
 

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.",

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.",

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());
   }

docs/changelog/changelog_de.md

@@ -1,5 +1,49 @@
 # Changelog plentyshopPWA
 
+## v1.7.0 (2024-11-06) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.6.0...v1.7.0" target="_blank" rel="noopener"><b>Übersicht aller Änderungen</b></a>
+
+### 🚀 Neu
+
+- Google Pay und Apple Pay sind ab sofort als Zahlungsarten im Checkout verfügbar.
+- Ist die Adresse beim Klicken auf **Kaufen** nicht gespeichert, wird jetzt eine Benachrichtigung angezeigt.
+- Zum Einhalten der Geoblocking-Verordnung sind beim Auswählen eines EU-Lands als Versandland jetzt alle EU-Länder in der Rechnungsadresse verfügbar.
+- Die Anzeige des Produkttitels unterstützt nun individualisierte Titel. Der Produkttitel kann am Artikel gepflegt werden. Wird so kein Produkttitel gesetzt, wird standardmäßig "Artikelname | Firmenname" verwendet.
+- Die Anzeige des Produkttitels wurde für SEO-Zwecke verbessert. Wenn kein produktspezifischer Titel verfügbar ist, wird der Standardtitel verwendet.
+- Hinweise zu Steuer und Versand wurden zur Wunschliste hinzugefügt.
+- Ein neuer Request-Header für `configId` wurde hinzugefügt.
+- Die Umgebungsvariable `NO_CACHE` zum Deaktivieren des Cachings wurde hinzugefügt.
+- Der Hero-Banner und die Medienkarte unterstützen jetzt Alt-Texte für Bilder.
+- Es ist jetzt möglich, die Schriftfarbe im Hero-Banner über eine Template-Eigenschaft anzupassen.
+- Eine neue Karussell-Komponente wurde hinzugefügt.
+- Eine Bearbeitungsmodus-Toolbar und ein JSON-Editor für das Frontend wurden hinzugefügt. Die Toolbar ist zur Zeit nur in Teilen funktional. Weitere Funktionen werden in einer kommenden Version hinzugefügt.
+
+### 🩹 Behoben
+
+- Das Erhöhen der Menge über den maximalen Lagerbestand hinaus leert jetzt nicht mehr den Warenkorb.
+- Die Benachrichtigung zum Hinzufügen von Artikeln zum Warenkorb wurde von Artikel- und Kategorieseiten entfernt, wenn der Schnellkauf nicht vorhanden ist.
+- Die Barrierefreiheit der Warenkorb- und Wunschlistenseiten wurde durch Erhöhung der Schriftgröße verbessert.
+- Ein Problem wurde behoben, bei dem der Produktpfad nicht reaktiv war, wenn die Kategorie geändert wurde.
+- Der Build generiert jetzt automatisch eine Sprachdatei für jede aktive Sprache, nicht nur für die Standardsprache.
+- Ein Problem wurde behoben, bei dem der Soft-Login nach erfolgreicher Authentifizierung auf der Bestellbestätigungsseite weiterhin angezeigt wurde.
+- Herstellerdaten wurden korrigiert, um `externalName` anstelle von `name` in strukturierten Daten zu verwenden.
+- Überschriften wurden aktualisiert, um die konfigurierte Schriftart zu verwenden.
+- Layout-Verschiebung auf der Kategorieseite wurde behoben.
+- Ein Fehler im Build-Skript, der auf Windows zu fehlerhaften Dateinamen geführt hat, wurde behoben.
+- Das Build-Skript fügt jetzt die Variable `API_URL` zur Umgebung hinzu, falls sie existiert.
+
+### 👷 Geändert
+
+- Das Design von Benachrichtigungen wurde angepasst.
+- Die Anzeigezeit für Benachrichtigungen wurde von 3 auf 5 Sekunden erhöht.
+- Die `height`- und `width`-Attribute, die in Terra-UI gesetzt sind, werden jetzt nur noch für Vollbilder eines Artikels verwendet.
+- Das Generieren fehlender Sprachdateien wurde in das Build-Skript verschoben. Welche Dateien generiert werden ergbit sich aus den Umgebungsvariablen. Die Locale-Konfiguration basiert jetzt auf den Sprachdateien im `lang`-Verzeichnis.
+- Es gab erste Schritte zum Vereinheitlichen der Fehlerbehandlung von SDK/API. Fehler geben jetzt Schlüssel zurück, die im Frontend übersetzt werden können.
+- Die Darstellung der Hersteller wurde verbessert.
+- Den Übersetzungstext der Hersteller wurde aktualisiert.
+- Der Zahlungsstatus eines Auftrags unterstützt jetzt ein zweites Argument. Dies ermöglicht eine benutzerdefinierte Übersetzungen für verschiedene Zahlungszustände.
+- Beim Versuch den Checkout mit einem leeren Warenkorb aufzurufen oder wenn der Warenkorb während des Checkout-Prozesses geleert wird, wird der Benutzer jetzt zum Warenkorb weitergeleitet.
+- Der Logo-Container ist jetzt flexibler und passt sich an das verwendete Logo an.
+
 ## v1.6.0 (2024-10-10) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.5.0...v1.6.0" target="_blank" rel="noopener"><b>Übersicht aller Änderungen</b></a>
 
 ### TODO 📙 Migrationsanleitung

docs/changelog/changelog_en.md

@@ -2,50 +2,52 @@
 
 ## v1.x.x (yyyy-mm-dd)
 
-- Added tax and shipping note in wishlist page
-- Added new carousel compoment via Swipper library
-- Created new useCarousel composable holding Carousel logic
-- Minified and purged swiper css files for speed optimization
-- Fluid logo container + max-width and max-height addaptation
+### 👷 Changed
 - Newsletter email confirmation
-- Fix cls mobile
-- Edit mode toolbar + Json editor Front End
+
+## v1.7.0 (2024-11-06) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.6.0...v1.7.0" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
+
 
 ### 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
-- Adding the ability to have alt text for images.
-- It's now possible to change the font color of the hero banner via a template property.
-- Implement new payment methods: Google Pay and Apple Pay.
-- Display product titles without global suffix when available, maintaining backward compatibility.
+- Google Pay and Apple Pay are now available as payment methods in the checkout.
+- Clicking the **Buy** button with an unsaved address now displays a notification.
+- To ensure compliance with geo-blocking regulations, selecting an EU country as the shipping country now makes all EU countries available as billing options.
+- The product title display now supports custom titles. You can set the custom title on the item. If no custom title is set, the default "Item name | Company name" is used.
+- Added tax and shipping note to the wishlist page.
+- Added a new request header for the `configId`.
+- Added the environment variable `NO_CACHE` for disabling caching.
+- The hero banner and media card now support alt text properties for images.
+- Enabled font color customization for the hero banner via a template property.
+- Added a new carousel compoment.
+- Added an edit mode toolbar and JSON editor for the front end. Note that this is a preparatory step. Further functionality will be added in an upcoming version.
 
 ### 🩹 Fixed
 
-- Fixed an issue where increasing quantity over maximum stock will lead to cart being cleared.
-- Removed the "Add to Cart" notification from the item and category pages when the quick checkout modal is not present.
-- Fixed an accessibility issue where the font size was too small.
-- Fixed an issue where product path was not reactive when category was changed.
-- Automatically generate a language file for every active language, not just the default language.
-- Soft login was still shown after successfully authenticating on the order confirmation page.
-- Fixed an issue where manufacturer data was introducing 'name' into structured data instead of 'externalName'.
-- Headlines now use the configured font.
-- Fixed layout shift on category page.
-- The build script failed on Windows because of incompatibilities between file name pattern and operating system. The file name pattern now works on Windows.
+- Fixed an issue where increasing the quantity beyond maximum stock would clear the cart.
+- Removed the "Add to Cart" notification from item and category pages when the quick checkout modal is not present.
+- Improved accessibility for the cart and wishlist pages by increasing the font size.
+- Fixed an issue where the product path was not reactive when the category was changed.
+- The build now automatically generates a language file for every active language, not just the default language.
+- Resolved an issue where the soft login was still shown after successful authentication on the order confirmation page.
+- Corrected manufacturer data to use `externalName` instead of `name` in structured data.
+- Updated headlines to use the configured font.
+- Fixed layout shift on the category page.
+- Resolved build script failure on Windows due to file name pattern incompatibilities.
 - The build script now adds the `API_URL` to the environment if it exists.
 
 ### 👷 Changed
 
-- The `height` and `width` attributes that where set in terra ui are used only for full size images of an item.
-- Generating missing language files based on the language configuration from the environment has been moved to the build script. The locale configuration is now based on the language files in the `lang` directory.
-- Started to unify the SDK/API error handling. Errors do now return keys that can be translated in the frontend.
-- Manufacturer visual improvments
-- Changed manufacturer translation text.
-- The payment status on an order now supports a second argument, allowing you to define custom translations for the different payment states.
-- In cases where the basket is empty during the checkout process, the system will now redirect to `/cart` and display a notification.
+- Implemented a new notification design.
 - Increased default notification timeout from 3 to 5 seconds.
+- The `height` and `width` attributes set in Terra UI are now used only for full-size images of an item.
+- Moved the generation of missing language files based on the environment's language configuration to the build script. The locale configuration is now based on the language files in the `lang` directory.
+- Started unifying SDK/API error handling. Errors now return keys that can be translated in the frontend.
+- Improved manufacturer visuals.
+- Updated manufacturer translation text.
+- Added support for a second argument to the payment status on an order. This allows you to define custom translations for different payment states.
+- When trying to access the checkout with an empty cart, or if the user empties the cart during the checkout process, the user is now redirected to the cart.
+- The logo container is now more flexible and adapts to the dimensions of the provided logo.
 
 ## v1.6.0 (2024-10-10) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.5.0...v1.6.0" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
 

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",

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