From b67baf2b1d467480e2b8727e3fe5fb8c79049948 Mon Sep 17 00:00:00 2001 From: Maciej <7597086+mdanilowicz@users.noreply.github.com> Date: Wed, 27 Nov 2024 13:11:40 +0100 Subject: [PATCH 1/4] fix(vue-demo): double opt in registration --- .changeset/funny-chicken-play.md | 5 +++++ .changeset/light-games-appear.md | 5 +++++ packages/composables/src/useUser/useUser.ts | 8 ++++++-- .../components/account/AccountRegisterForm.vue | 5 ++--- 4 files changed, 18 insertions(+), 5 deletions(-) create mode 100644 .changeset/funny-chicken-play.md create mode 100644 .changeset/light-games-appear.md diff --git a/.changeset/funny-chicken-play.md b/.changeset/funny-chicken-play.md new file mode 100644 index 000000000..a4b6788e2 --- /dev/null +++ b/.changeset/funny-chicken-play.md @@ -0,0 +1,5 @@ +--- +"@shopware-pwa/composables-next": minor +--- + +Set user details when fully active diff --git a/.changeset/light-games-appear.md b/.changeset/light-games-appear.md new file mode 100644 index 000000000..ed5be16f4 --- /dev/null +++ b/.changeset/light-games-appear.md @@ -0,0 +1,5 @@ +--- +"vue-demo-store": minor +--- + +Fix registration form for the double opt in registration flow diff --git a/packages/composables/src/useUser/useUser.ts b/packages/composables/src/useUser/useUser.ts index dd7b54cff..318671e2f 100644 --- a/packages/composables/src/useUser/useUser.ts +++ b/packages/composables/src/useUser/useUser.ts @@ -180,8 +180,12 @@ export function useUser(): UseUserReturn { storefrontUrl: getStorefrontUrl(), }, }); - _user.value = data; - if (_user.value?.active) await refreshSessionContext(); + // Set data when uses is active and not double opt in + if (_user.value?.active && !_user.value?.doubleOptInRegistration) { + _user.value = data; + await refreshSessionContext(); + } + return data; } diff --git a/templates/vue-demo-store/components/account/AccountRegisterForm.vue b/templates/vue-demo-store/components/account/AccountRegisterForm.vue index 30f431b9e..fa1e1fd99 100644 --- a/templates/vue-demo-store/components/account/AccountRegisterForm.vue +++ b/templates/vue-demo-store/components/account/AccountRegisterForm.vue @@ -109,14 +109,13 @@ const invokeSubmit = async () => { try { loading.value = true; const response = await register(state); - if (response && response.active) router.push("/"); - else if (response && !response.active) { + if (response && response.doubleOptInRegistration) { Object.assign(state, JSON.parse(JSON.stringify(initialState))); showDoubleOptInBox.value = true; await nextTick(); doubleOptInBox.value?.scrollIntoView(); $v.value.$reset(); - } + } else if (response && response.active) router.push("/"); } catch (error) { if (error instanceof ApiClientError) { const errors = resolveApiErrors(error.details.errors); From eec17f8d8102f051dcf73abef8703e77eb3005c5 Mon Sep 17 00:00:00 2001 From: Maciej <7597086+mdanilowicz@users.noreply.github.com> Date: Wed, 27 Nov 2024 14:06:59 +0100 Subject: [PATCH 2/4] fix: changes after CR --- .changeset/funny-chicken-play.md | 2 +- .changeset/light-games-appear.md | 2 +- .../composables/src/useUser/useUser.test.ts | 25 +++++++++++++++++++ packages/composables/src/useUser/useUser.ts | 4 +-- 4 files changed, 29 insertions(+), 4 deletions(-) diff --git a/.changeset/funny-chicken-play.md b/.changeset/funny-chicken-play.md index a4b6788e2..5ae4f44a2 100644 --- a/.changeset/funny-chicken-play.md +++ b/.changeset/funny-chicken-play.md @@ -2,4 +2,4 @@ "@shopware-pwa/composables-next": minor --- -Set user details when fully active +Changed `registration` method in the `useUser` composable. Because of changes in the double opt-in on registration flow in the Shopware backend we are adjusting this method on our side. In new approach we are checking `active` and `doubleOptInRegistration` properties that represents current status of the user. diff --git a/.changeset/light-games-appear.md b/.changeset/light-games-appear.md index ed5be16f4..bf9cd24f4 100644 --- a/.changeset/light-games-appear.md +++ b/.changeset/light-games-appear.md @@ -1,5 +1,5 @@ --- -"vue-demo-store": minor +"vue-demo-store": patch --- Fix registration form for the double opt in registration flow diff --git a/packages/composables/src/useUser/useUser.test.ts b/packages/composables/src/useUser/useUser.test.ts index 1c7502c72..3badbf0b5 100644 --- a/packages/composables/src/useUser/useUser.test.ts +++ b/packages/composables/src/useUser/useUser.test.ts @@ -98,6 +98,31 @@ describe("useUser", () => { expect(vm.isLoggedIn).toBe(true); }); + it("register function with double opt-in option", async () => { + const { vm, injections } = useSetup(() => useUser()); + injections.apiClient.invoke.mockResolvedValue({ + data: { + active: true, + doubleOptInRegistration: true, + id: "test123", + guest: false, + }, + }); + + await vm.register(REGISTRATION_DATA); + + expect(injections.apiClient.invoke).toHaveBeenCalledWith( + expect.stringContaining("register"), + expect.objectContaining({ + body: { + ...REGISTRATION_DATA, + storefrontUrl: "http://localhost:3000", // This is the default value from the useInternationalization + }, + }), + ); + expect(vm.isLoggedIn).toBe(false); + }); + it("logout", async () => { const { vm, injections } = useSetup(() => useUser()); injections.apiClient.invoke.mockResolvedValue({ data: {} }); diff --git a/packages/composables/src/useUser/useUser.ts b/packages/composables/src/useUser/useUser.ts index 318671e2f..1419ce587 100644 --- a/packages/composables/src/useUser/useUser.ts +++ b/packages/composables/src/useUser/useUser.ts @@ -180,8 +180,8 @@ export function useUser(): UseUserReturn { storefrontUrl: getStorefrontUrl(), }, }); - // Set data when uses is active and not double opt in - if (_user.value?.active && !_user.value?.doubleOptInRegistration) { + // Update the user data in the context if the user is active and not using double opt-in registration set in the Shopware Admin + if (data.active && !data.doubleOptInRegistration) { _user.value = data; await refreshSessionContext(); } From 9783fb4fd95ba14e36785eb095db2d0a26402bdf Mon Sep 17 00:00:00 2001 From: Maciej <7597086+mdanilowicz@users.noreply.github.com> Date: Fri, 29 Nov 2024 09:13:08 +0100 Subject: [PATCH 3/4] feat(vue-demo): add confirmation page --- .changeset/young-chicken-confess.md | 5 ++ .../composables/src/useUser/useUser.test.ts | 2 +- packages/composables/src/useUser/useUser.ts | 3 +- templates/vue-demo-store/assets/error.svg | 3 + templates/vue-demo-store/assets/spinner.svg | 11 ++++ .../account/AccountRegisterForm.vue | 3 +- templates/vue-demo-store/eslint.config.mjs | 5 ++ .../vue-demo-store/i18n/de-DE/account.json | 3 +- .../vue-demo-store/i18n/de-DE/errors.json | 3 +- .../vue-demo-store/i18n/en-GB/account.json | 3 +- .../vue-demo-store/i18n/en-GB/errors.json | 3 +- .../vue-demo-store/i18n/pl-PL/account.json | 3 +- .../vue-demo-store/i18n/pl-PL/errors.json | 3 +- .../pages/registration/confirm.vue | 57 +++++++++++++++++++ 14 files changed, 97 insertions(+), 10 deletions(-) create mode 100644 .changeset/young-chicken-confess.md create mode 100644 templates/vue-demo-store/assets/error.svg create mode 100644 templates/vue-demo-store/assets/spinner.svg create mode 100644 templates/vue-demo-store/pages/registration/confirm.vue diff --git a/.changeset/young-chicken-confess.md b/.changeset/young-chicken-confess.md new file mode 100644 index 000000000..06e6d296f --- /dev/null +++ b/.changeset/young-chicken-confess.md @@ -0,0 +1,5 @@ +--- +"vue-demo-store": minor +--- + +Added a confirmation page after the double opt-in option. The confirmation link is included in the email after registration. diff --git a/packages/composables/src/useUser/useUser.test.ts b/packages/composables/src/useUser/useUser.test.ts index 3badbf0b5..8eaaa61fa 100644 --- a/packages/composables/src/useUser/useUser.test.ts +++ b/packages/composables/src/useUser/useUser.test.ts @@ -98,7 +98,7 @@ describe("useUser", () => { expect(vm.isLoggedIn).toBe(true); }); - it("register function with double opt-in option", async () => { + it("register function with double opt-in option should not automatically log user in", async () => { const { vm, injections } = useSetup(() => useUser()); injections.apiClient.invoke.mockResolvedValue({ data: { diff --git a/packages/composables/src/useUser/useUser.ts b/packages/composables/src/useUser/useUser.ts index 1419ce587..0a744b191 100644 --- a/packages/composables/src/useUser/useUser.ts +++ b/packages/composables/src/useUser/useUser.ts @@ -183,9 +183,8 @@ export function useUser(): UseUserReturn { // Update the user data in the context if the user is active and not using double opt-in registration set in the Shopware Admin if (data.active && !data.doubleOptInRegistration) { _user.value = data; - await refreshSessionContext(); } - + await refreshSessionContext(); return data; } diff --git a/templates/vue-demo-store/assets/error.svg b/templates/vue-demo-store/assets/error.svg new file mode 100644 index 000000000..404e43a70 --- /dev/null +++ b/templates/vue-demo-store/assets/error.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/templates/vue-demo-store/assets/spinner.svg b/templates/vue-demo-store/assets/spinner.svg new file mode 100644 index 000000000..c38739738 --- /dev/null +++ b/templates/vue-demo-store/assets/spinner.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/templates/vue-demo-store/components/account/AccountRegisterForm.vue b/templates/vue-demo-store/components/account/AccountRegisterForm.vue index fa1e1fd99..e6847f3a8 100644 --- a/templates/vue-demo-store/components/account/AccountRegisterForm.vue +++ b/templates/vue-demo-store/components/account/AccountRegisterForm.vue @@ -144,7 +144,8 @@ useBreadcrumbs([ {{ $t("account.messages.signUpSuccess") }}
diff --git a/templates/vue-demo-store/eslint.config.mjs b/templates/vue-demo-store/eslint.config.mjs index 75c933203..c26f6fbeb 100644 --- a/templates/vue-demo-store/eslint.config.mjs +++ b/templates/vue-demo-store/eslint.config.mjs @@ -42,4 +42,9 @@ export default [ "vue/component-tags-order": "off", }, }, + { + name: "turn-off-deprecated-rules-for-pages-and-layouts", + files: ["layouts/*.vue", "pages/**/*.vue"], + rules: { "vue/multi-word-component-names": "off" }, + }, ]; diff --git a/templates/vue-demo-store/i18n/de-DE/account.json b/templates/vue-demo-store/i18n/de-DE/account.json index f557da48c..9e9310ebc 100644 --- a/templates/vue-demo-store/i18n/de-DE/account.json +++ b/templates/vue-demo-store/i18n/de-DE/account.json @@ -64,7 +64,8 @@ "paymentSetSuccessfully": "Standardzahlungsmethode erfolgreich festgelegt", "signUpSuccess": "Vielen Dank für Ihre Registrierung! Sie erhalten in Kürze eine Bestätigungs-E-Mail. Klicken Sie auf den Link darin, um die Registrierung abzuschließen.", "paymentMethodChanged": "Zahlungsmethode geändert", - "productsAdded": "Produkte hinzugefügt" + "productsAdded": "Produkte hinzugefügt", + "verifying": "Konto bestätigen" } } } diff --git a/templates/vue-demo-store/i18n/de-DE/errors.json b/templates/vue-demo-store/i18n/de-DE/errors.json index 12d7fbc89..ce11e9df8 100644 --- a/templates/vue-demo-store/i18n/de-DE/errors.json +++ b/templates/vue-demo-store/i18n/de-DE/errors.json @@ -40,6 +40,7 @@ "CHECKOUT__UNKNOWN_PAYMENT_METHOD": "Die ausgewählte Zahlungsmethode existiert nicht.", "VIOLATION::TOO_SHORT_ERROR": "{field} ist zu kurz.", "CHECKOUT__ORDER_ORDER_ALREADY_PAID": "Die Bestellung mit der Bestellnummer {orderNumber} wurde bereits bezahlt und kann nicht mehr bearbeitet werden.", - "CHECKOUT__ORDER_ORDER_NOT_FOUND": "Diese Bestellung konnte nicht gefunden werden." + "CHECKOUT__ORDER_ORDER_NOT_FOUND": "Diese Bestellung konnte nicht gefunden werden.", + "CHECKOUT__CUSTOMER_IS_ALREADY_CONFIRMED": "Die E-Mail-Adresse wurde bereits bestätigt oder die URL ist ungültig." } } diff --git a/templates/vue-demo-store/i18n/en-GB/account.json b/templates/vue-demo-store/i18n/en-GB/account.json index be72a08ba..3710bc01c 100644 --- a/templates/vue-demo-store/i18n/en-GB/account.json +++ b/templates/vue-demo-store/i18n/en-GB/account.json @@ -66,7 +66,8 @@ "paymentSetSuccessfully": "Set default payment method successfully", "signUpSuccess": "Thank you for signing up! You will receive a confirmation email shortly. Click on the link in it to complete the sign-up.", "paymentMethodChanged": "Payment method changed successfully", - "productsAdded": "Products added to cart" + "productsAdded": "Products added to cart", + "verifying": "Account confirmation" } } } diff --git a/templates/vue-demo-store/i18n/en-GB/errors.json b/templates/vue-demo-store/i18n/en-GB/errors.json index d4940e395..2265a7d1e 100644 --- a/templates/vue-demo-store/i18n/en-GB/errors.json +++ b/templates/vue-demo-store/i18n/en-GB/errors.json @@ -41,6 +41,7 @@ "CHECKOUT__UNKNOWN_PAYMENT_METHOD": "The selected payment method does not exist.", "VIOLATION::TOO_SHORT_ERROR": "{field} is too short.", "CHECKOUT__ORDER_ORDER_ALREADY_PAID": "The order with the order number {orderNumber} was already paid and cannot be edited afterwards.", - "CHECKOUT__ORDER_ORDER_NOT_FOUND": "This order could not be found." + "CHECKOUT__ORDER_ORDER_NOT_FOUND": "This order could not be found.", + "CHECKOUT__CUSTOMER_IS_ALREADY_CONFIRMED": "Either the email address has already been confirmed or the URL is invalid." } } diff --git a/templates/vue-demo-store/i18n/pl-PL/account.json b/templates/vue-demo-store/i18n/pl-PL/account.json index cdb3aa25d..eed8c24a7 100644 --- a/templates/vue-demo-store/i18n/pl-PL/account.json +++ b/templates/vue-demo-store/i18n/pl-PL/account.json @@ -64,7 +64,8 @@ "paymentSetSuccessfully": "Ustawiono domyślną metodę płatności", "signUpSuccess": "Dziękujemy za rejestrację! Wkrótce otrzymasz e-mail z potwierdzeniem. Kliknij w link w nim zawarty, aby ukończyć rejestrację.", "paymentMethodChanged": "Metoda płatności została zmieniona", - "productsAdded": "Produkty zostały dodane do koszyka" + "productsAdded": "Produkty zostały dodane do koszyka", + "verifying": "Potwierdzenie konta" } } } diff --git a/templates/vue-demo-store/i18n/pl-PL/errors.json b/templates/vue-demo-store/i18n/pl-PL/errors.json index 44ec4179d..74c58565b 100644 --- a/templates/vue-demo-store/i18n/pl-PL/errors.json +++ b/templates/vue-demo-store/i18n/pl-PL/errors.json @@ -40,6 +40,7 @@ "CHECKOUT__UNKNOWN_PAYMENT_METHOD": "Wybrana metoda płatności nie istnieje.", "VIOLATION::TOO_SHORT_ERROR": "{field} jest za krótkie.", "CHECKOUT__ORDER_ORDER_ALREADY_PAID": "Zamówienie o numerze {orderNumber} zostało już opłacone i nie może zostać zrealizowane.", - "CHECKOUT__ORDER_ORDER_NOT_FOUND": "Nie udało się znaleźć tego zamówienia." + "CHECKOUT__ORDER_ORDER_NOT_FOUND": "Nie udało się znaleźć tego zamówienia.", + "CHECKOUT__CUSTOMER_IS_ALREADY_CONFIRMED": "Adres e-mail został już potwierdzony lub URL jest nieprawidłowy." } } diff --git a/templates/vue-demo-store/pages/registration/confirm.vue b/templates/vue-demo-store/pages/registration/confirm.vue new file mode 100644 index 000000000..79f140b1e --- /dev/null +++ b/templates/vue-demo-store/pages/registration/confirm.vue @@ -0,0 +1,57 @@ + + From 0db6d251828b7ebe9b0dbf1bbb5a8f7eea331b78 Mon Sep 17 00:00:00 2001 From: patzick <13100280+patzick@users.noreply.github.com> Date: Wed, 4 Dec 2024 10:12:26 +0100 Subject: [PATCH 4/4] chore: remove svgs --- templates/vue-demo-store/assets/error.svg | 3 --- templates/vue-demo-store/assets/spinner.svg | 11 ----------- .../vue-demo-store/pages/registration/confirm.vue | 6 +++--- 3 files changed, 3 insertions(+), 17 deletions(-) delete mode 100644 templates/vue-demo-store/assets/error.svg delete mode 100644 templates/vue-demo-store/assets/spinner.svg diff --git a/templates/vue-demo-store/assets/error.svg b/templates/vue-demo-store/assets/error.svg deleted file mode 100644 index 404e43a70..000000000 --- a/templates/vue-demo-store/assets/error.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/templates/vue-demo-store/assets/spinner.svg b/templates/vue-demo-store/assets/spinner.svg deleted file mode 100644 index c38739738..000000000 --- a/templates/vue-demo-store/assets/spinner.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/templates/vue-demo-store/pages/registration/confirm.vue b/templates/vue-demo-store/pages/registration/confirm.vue index 7ad45e1ae..3ee497c89 100644 --- a/templates/vue-demo-store/pages/registration/confirm.vue +++ b/templates/vue-demo-store/pages/registration/confirm.vue @@ -43,12 +43,12 @@ onMounted(async () => {