fix(vue-demo): double opt in registration

.changeset/funny-chicken-play.md

@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": minor
+---
+
+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.

.changeset/light-games-appear.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": patch
+---
+
+Fix registration form for the double opt in registration flow

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

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();
+    // 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();
+    }
+
     return data;
   }
 

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