Merge branch 'main' into ci/workflow-improvements

apps/web/components/GuestLogin/GuestLogin.vue

@@ -1,53 +1,48 @@
 <template>
   <div class="md:w-full md:flex md:justify-center">
-    <div class="flex flex-col gap-4 p-2 md:p-6 rounded-md w-full md:w-2/3">
-      <div class="md:self-center">
-        <h2 class="font-bold mb-6 text-lg">{{ $t('guestCheckout') }}</h2>
-        <UiButton
-          data-testid="guest-checkout-button"
-          :tag="NuxtLink"
-          :to="localePath(paths.checkout)"
-          class="w-full mb-4"
-        >
-          {{ $t('continueAsGuest') }}
-        </UiButton>
-        <OrDivider />
-        <div v-if="isAvailable">
-          <PayPalExpressButton v-if="!loginSubmit" class="mt-4" type="CartPreview" />
-          <PayPalPayLaterBanner placement="cart" :amount="cartGetters.getTotal(cartGetters.getTotals(cart))" />
-          <OrDivider />
-        </div>
-        <div class="w-[400px] mt-4">
-          <form @submit.prevent="loginUser">
-            <h2 class="font-bold text-lg">{{ $t('loginFastCheckout') }}</h2>
-            <label>
-              <UiFormLabel class="w-full mt-4">{{ $t('form.emailLabel') }}</UiFormLabel>
-              <SfInput class="w-full" name="email" type="email" autocomplete="email" v-model="email" required />
-            </label>
+    <div class="flex flex-col gap-4 p-2 md:p-6 rounded-md w-full md:w-2/3 lg:w-1/2 3xl:w-2/5">
+      <h2 class="font-bold text-lg">{{ t('guestCheckout') }}</h2>
+
+      <UiButton
+        data-testid="guest-checkout-button"
+        :tag="NuxtLink"
+        :to="localePath(paths.checkout)"
+        class="w-full my-4"
+      >
+        {{ t('continueAsGuest') }}
+      </UiButton>
+
+      <OrDivider />
+
+      <template v-if="isAvailable && !loginSubmit">
+        <PayPalExpressButton class="mt-4" type="CartPreview" />
+        <PayPalPayLaterBanner placement="cart" :amount="cartGetters.getTotal(cartGetters.getTotals(cart))" />
+        <OrDivider class="mt-4" />
+      </template>
+
+      <form @submit.prevent="loginUser" :class="{ 'mt-4': isAvailable }">
+        <h2 class="font-bold text-lg">{{ t('loginFastCheckout') }}</h2>
+
+        <label>
+          <UiFormLabel class="w-full mt-4">{{ t('form.emailLabel') }}</UiFormLabel>
+          <SfInput class="w-full" name="email" type="email" autocomplete="email" v-model="email" required />
+        </label>
 
-            <label>
-              <UiFormLabel class="mt-6">{{ $t('form.passwordLabel') }}</UiFormLabel>
-              <UiFormPasswordInput name="password" autocomplete="current-password" v-model="password" required />
-            </label>
+        <label>
+          <UiFormLabel class="mt-6">{{ t('form.passwordLabel') }}</UiFormLabel>
+          <UiFormPasswordInput name="password" autocomplete="current-password" v-model="password" required />
+        </label>
 
-            <UiButton type="submit" class="mt-4 w-full">
-              <SfLoaderCircular v-if="loading" />
-              <span>
-                {{ $t('auth.login.loginAndContinue') }}
-              </span>
-            </UiButton>
-            <div class="text-center mt-6">
-              <!-- <SfLink href="#" variant="primary">
-                            {{ $t('auth.login.forgotPasswordLabel') }}
-                        </SfLink> -->
-              <div class="mt-6">
-                <h3 class="font-bold text-lg mb-6">{{ $t('auth.login.createAccount') }}</h3>
-                <p>{{ $t('auth.login.createAccountLater') }}!</p>
-              </div>
-            </div>
-          </form>
+        <UiButton :disabled="loading || loginSubmit" type="submit" class="mt-8 w-full">
+          <SfLoaderCircular v-if="loading || loginSubmit" class="flex justify-center items-center" size="base" />
+          <template v-else>{{ t('auth.login.loginAndContinue') }}</template>
+        </UiButton>
+
+        <div class="text-center mt-6">
+          <h3 class="font-bold text-lg mb-6">{{ t('auth.login.createAccount') }}</h3>
+          <p>{{ t('auth.login.createAccountLater') }}!</p>
         </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
@@ -57,39 +52,30 @@ import { SfInput, SfLoaderCircular } from '@storefront-ui/vue';
 import { paths } from '~/utils/paths';
 import { cartGetters } from '@plentymarkets/shop-api';
 
-const { login, isAuthorized, loading } = useCustomer();
+const { login, loading } = useCustomer();
 const { send } = useNotification();
 const { data: cart } = useCart();
 const { isAvailable, loadConfig } = usePayPal();
 const { t } = useI18n();
 const localePath = useLocalePath();
 const NuxtLink = resolveComponent('NuxtLink');
 
-const emits = defineEmits(['loggedIn', 'change-view']);
-
-onMounted(() => {
-  loadConfig();
-});
+onNuxtReady(async () => await loadConfig());
 
 const email = ref('');
 const password = ref('');
-let loginSubmit = false;
+const loginSubmit = ref(false);
 
 const loginUser = async () => {
+  loginSubmit.value = true;
   const success = await login(email.value, password.value);
-  if (success) {
-    send({ message: t('auth.login.success'), type: 'positive' });
-    emits('loggedIn');
-    loginSubmit = true;
+
+  if (!success) {
+    loginSubmit.value = false;
+    return;
   }
-};
 
-watch(
-  () => isAuthorized.value,
-  (value) => {
-    if (value === true) {
-      navigateTo(localePath(paths.checkout));
-    }
-  },
-);
+  await navigateTo(localePath(paths.checkout));
+  send({ message: t('auth.login.success'), type: 'positive' });
+};
 </script>

apps/web/components/ui/HeroCarousel/HeroCarousel.vue

@@ -7,6 +7,7 @@
       :loop="true"
       pagination
       @slide-change="onSlideChange"
+      class="!z-0"
     >
       <SwiperSlide v-for="(heroItem, index) in heroItemProps" :key="index" class="md:px-7 lg:px-15">
         <UiHeroContent :hero-item-props="heroItem" />
@@ -24,13 +25,14 @@ import { HeroContentProps } from './types';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Navigation, Pagination } from 'swiper/modules';
 const { handleArrows, onSlideChange } = useCarousel();
-import '@/assets/libraries/swiper/swiper.min.css';
-import '@/assets/libraries/swiper/navigation.min.css';
-import '@/assets/libraries/swiper/pagination.min.css';
 
 const { heroItemProps } = defineProps<{
   heroItemProps: HeroContentProps[];
 }>();
 
 const enableModules = computed(() => heroItemProps.length > 1);
 </script>
+
+<style src="./styles/navigation.min.css"></style>
+<style src="./styles/pagination.min.css"></style>
+<style src="./styles/swiper.min.css"></style>

apps/web/composables/useCartTotalChange/useCartTotalChange.ts

@@ -2,7 +2,7 @@ import { cartGetters } from '@plentymarkets/shop-api';
 
 export const useCartTotalChange = () => {
   const route = useRoute();
-  const { data: customerData } = useCustomer();
+  const { data: customerData, isGuest, isAuthorized } = useCustomer();
   const { getCart } = useCart();
   const { getOrder } = usePayPal();
   const { restrictedAddresses } = useRestrictedAddress();
@@ -29,8 +29,9 @@ export const useCartTotalChange = () => {
     if (restrictedAddresses.value) {
       state.value.changedTotal =
         cartGetters.getTotals(customerData.value.basket).total.toString() !== state.value.initialTotal;
-      await getCart();
     }
+
+    if (restrictedAddresses.value || isGuest.value || isAuthorized.value) await getCart();
   };
 
   return {

apps/web/lang/de.json

@@ -767,7 +767,7 @@
   "pagination": "Paginierte Navigation",
   "passwordVisibilty": "Sichtbarkeit des Passworts",
   "paypal": {
-    "cookieNotAccepted": "Bitte akzeptieren Sie unsere Cookies, um PayPal zu nutzen.",
+    "cookieNotAccepted": "Bitte akzeptieren Sie unsere Cookies, um PayPal zu nutzen: ",
     "errorMessageCreditCard": "Die eingegebenen Daten sind ungültig. Überprüfen Sie die Felder Kartennummer, Kartenprüfnummer (CVV), Ablaufdatum.",
     "openSettings": "Cookie-Einstellungen öffnen",
     "unbrandedCancel": "Abbrechen",

apps/web/lang/en.json

@@ -769,7 +769,7 @@
   "paypal": {
     "cookieNotAccepted": "Please accept our cookies to use PayPal: ",
     "errorMessageCreditCard": "The input data is invalid. Check the fields Card number, CVV, Expiration date.",
-    "openSettings": "open cookie settings",
+    "openSettings": "Open cookie settings",
     "unbrandedCancel": "Cancel",
     "unbrandedCardNumber": "Card number",
     "unbrandedCvv": "CVV",

apps/web/middleware/guest-guard.ts

@@ -0,0 +1,7 @@
+export default defineNuxtRouteMiddleware(() => {
+  const { isGuest, isAuthorized } = useCustomer();
+  const localePath = useLocalePath();
+
+  if (isGuest.value || (!isGuest.value && !isAuthorized.value)) return;
+  return navigateTo(localePath(paths.home));
+});

apps/web/pages/guest/login.vue

@@ -10,5 +10,8 @@
 </template>
 
 <script setup lang="ts">
-definePageMeta({ pageType: 'static' });
+definePageMeta({
+  pageType: 'static',
+  middleware: ['guest-guard'],
+});
 </script>

apps/web/pages/login.vue

@@ -8,6 +8,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: false,
+  middleware: ['guest-guard'],
 });
 
 const router = useRouter();

docs/changelog/changelog_en.md

@@ -4,6 +4,7 @@
 
 ### New
 
+- Added a Guest guard middleware to restrict access to pages for authenticated users.
 - Added the ability to filter products by rating on category pages.
 - Added PWA cookie hash to sdk client
 - Added progress loading indicator animation when navigating between pages.
@@ -36,6 +37,8 @@ Each client supports two PWA instances. With this change, you can designate the
 
 ### 🩹 Fixed
 
+- Resolved an issue where the shipping costs where not updated during guest checkout process.
+- Resolved an issue causing the Login modal to be unresponsive in the user interface.
 - Fix selling points misalignment on register page.
 - Introduced error handling to throw a 404 Not Found response when the requested product does not exist.
 - Resolved an issue where the checkout layout button was overlapping the adjacent text.
@@ -59,6 +62,8 @@ Each client supports two PWA instances. With this change, you can designate the
 - The language selector is no longer displayed if only one language is configured.
 - Fixed an issue with category product prices not being updated on page change.
 - Added SSR rendering for homepage.
+- CSS for the Swiper library is now only loaded on pages that use the `HeroCarousel` component.
+- The `HeroCarousel` no longer overlaps the navigation menu on mobile devices.
 - Improved CLS for hero skeleton.
 
 ## 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>