From fd9c75098745cdb29182dc378954f15f17c86035 Mon Sep 17 00:00:00 2001 From: Kevin Stederoth <43753494+ksted@users.noreply.github.com> Date: Wed, 6 Nov 2024 13:30:09 +0100 Subject: [PATCH 1/4] docs: update changelog (#779) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: update changelog * docs: update changelog from review * Update docs/changelog/changelog_en.md * Update docs/changelog/changelog_de.md * chore: move changelog entry --------- Co-authored-by: Maximilian Röll <30629157+maxiroellplenty@users.noreply.github.com> --- docs/changelog/changelog_de.md | 44 +++++++++++++++++++++++ docs/changelog/changelog_en.md | 65 ++++++++++++++++------------------ 2 files changed, 75 insertions(+), 34 deletions(-) diff --git a/docs/changelog/changelog_de.md b/docs/changelog/changelog_de.md index e4ae749c1..2103022d7 100644 --- a/docs/changelog/changelog_de.md +++ b/docs/changelog/changelog_de.md @@ -1,5 +1,49 @@ # Changelog plentyshopPWA +## v1.7.0 (2024-11-06) Übersicht aller Änderungen + +### 🚀 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) Übersicht aller Änderungen ### TODO 📙 Migrationsanleitung diff --git a/docs/changelog/changelog_en.md b/docs/changelog/changelog_en.md index b1c7209d3..ef645cd42 100644 --- a/docs/changelog/changelog_en.md +++ b/docs/changelog/changelog_en.md @@ -1,50 +1,47 @@ # Changelog plentyshopPWA -## 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 -- Fix cls mobile -- Edit mode toolbar + Json editor Front End +## v1.7.0 (2024-11-06) Overview of all changes ### 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) Overview of all changes From addff217add27896ccf57fe40593a9f3ede0297a Mon Sep 17 00:00:00 2001 From: Fabian Gerke <124085586+FabianGerke@users.noreply.github.com> Date: Wed, 6 Nov 2024 13:49:26 +0100 Subject: [PATCH 2/4] 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 --- .../components/PayPal/PayPalCreditCardForm.vue | 1 + .../useCheckout/__tests__/useCheckout.spec.ts | 12 ++---------- apps/web/composables/useCheckout/useCheckout.ts | 9 ++++++--- .../composables/useJsonEditor/useJsonEditor.ts | 2 +- apps/web/lang/de.json | 3 +++ apps/web/lang/en.json | 3 +++ apps/web/pages/checkout.vue | 17 ++++++++++++----- package.json | 2 +- yarn.lock | 10 +++++----- 9 files changed, 34 insertions(+), 25 deletions(-) diff --git a/apps/web/components/PayPal/PayPalCreditCardForm.vue b/apps/web/components/PayPal/PayPalCreditCardForm.vue index 05fa7dc12..69c02996b 100644 --- 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 index 4fdca1712..c3355ecdf 100644 --- 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 index 54d480fc1..0be1c606a 100644 --- 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 index eb69aa44b..b3f2448e0 100644 --- 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 index cce632831..8cc3977a8 100644 --- 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 index 8961a8822..f8742bb91 100644 --- 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 index 69eb3f4f0..724f9cff9 100644 --- a/apps/web/pages/checkout.vue +++ b/apps/web/pages/checkout.vue @@ -46,7 +46,7 @@ { 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 index 7d72e9a46..fb44c7e61 100644 --- 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 index 5b98faffe..b492b1c0b 100644 --- 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 From 0ab1c97127b5d82975584d1321cb2ea84bf83793 Mon Sep 17 00:00:00 2001 From: Fabian Gerke <124085586+FabianGerke@users.noreply.github.com> Date: Wed, 6 Nov 2024 13:58:14 +0100 Subject: [PATCH 3/4] chore: close quick checkout after finishing paypal payment (#784) --- apps/web/components/PayPal/PayPalExpressButton.vue | 3 +++ apps/web/components/QuickCheckout/QuickCheckout.vue | 6 +++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/apps/web/components/PayPal/PayPalExpressButton.vue b/apps/web/components/PayPal/PayPalExpressButton.vue index b36c1be37..76c574b0e 100644 --- a/apps/web/components/PayPal/PayPalExpressButton.vue +++ b/apps/web/components/PayPal/PayPalExpressButton.vue @@ -22,6 +22,7 @@ const localePath = useLocalePath(); const emits = defineEmits<{ (event: 'validation-callback', callback: PayPalAddToCartCallback): Promise; + (event: 'on-approved'): void; }>(); const props = defineProps(); @@ -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}`)); diff --git a/apps/web/components/QuickCheckout/QuickCheckout.vue b/apps/web/components/QuickCheckout/QuickCheckout.vue index e14a62b9f..d6c039fca 100644 --- a/apps/web/components/QuickCheckout/QuickCheckout.vue +++ b/apps/web/components/QuickCheckout/QuickCheckout.vue @@ -76,7 +76,7 @@ class="w-full mb-3" variant="secondary" > - {{ $t('quickCheckout.checkYourCart') }} + {{ t('quickCheckout.checkYourCart') }} - {{ $t('goToCheckout') }} + {{ t('goToCheckout') }} - + From ef8cd7884955c775187f91206f06f657833a5c0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20R=C3=B6ll?= <30629157+maxiroellplenty@users.noreply.github.com> Date: Wed, 6 Nov 2024 14:09:07 +0100 Subject: [PATCH 4/4] chore: fix creditcard test --- apps/web/__tests__/support/pageObjects/CheckoutPageObject.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/__tests__/support/pageObjects/CheckoutPageObject.ts b/apps/web/__tests__/support/pageObjects/CheckoutPageObject.ts index a8aa7a11c..b57470a9d 100644 --- a/apps/web/__tests__/support/pageObjects/CheckoutPageObject.ts +++ b/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; }