Merge branch 'feat/paypal-test' of github.com:plentymarkets/storefron…

…t-nuxt3-boilerplate into feat/paypal-test
plentymarkets · Jun 10, 2024 · 8377d3e · 8377d3e
2 parents 33d0ece + 780cf17
commit 8377d3e
Show file tree

Hide file tree

Showing 16 changed files with 105 additions and 92 deletions.
diff --git a/apps/web/components/GuestLogin/GuestLogin.vue b/apps/web/components/GuestLogin/GuestLogin.vue
@@ -3,61 +3,51 @@
     <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>
-        <OrDivider>
-          <template #above>
-            <div class="w-[400px] mb-4">
-              <OrDivider>
-                <template #above>
-                  <SfButton
-                    data-testid="guest-checkout-button"
-                    :tag="NuxtLink"
-                    :to="localePath(paths.checkout)"
-                    class="w-full mb-4"
-                  >
-                    {{ $t('continueAsGuest') }}
-                  </SfButton>
-                </template>
-                <template #below>
-                  <client-only>
-                    <PayPalExpressButton v-if="!loginSubmit" class="mt-4" type="CartPreview" />
-                  </client-only>
-                </template>
-              </OrDivider>
-            </div>
-          </template>
-          <template #below>
-            <div class="w-[400px] mt-4">
-              <form @submit.prevent="loginUser">
-                <h1 class="font-bold text-lg">{{ $t('loginFastCheckout') }}</h1>
-                <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>
+        <SfButton
+          data-testid="guest-checkout-button"
+          :tag="NuxtLink"
+          :to="localePath(paths.checkout)"
+          class="w-full mb-4"
+        >
+          {{ $t('continueAsGuest') }}
+        </SfButton>
+        <OrDivider />
+        <div v-if="isAvailable">
+          <client-only>
+            <PayPalExpressButton v-if="!loginSubmit" class="mt-4" type="CartPreview" />
+          </client-only>
+          <OrDivider />
+        </div>
+        <div class="w-[400px] mt-4">
+          <form @submit.prevent="loginUser">
+            <h1 class="font-bold text-lg">{{ $t('loginFastCheckout') }}</h1>
+            <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>
 
-                <SfButton type="submit" class="mt-4 w-full">
-                  <SfLoaderCircular v-if="loading" />
-                  <span>
-                    {{ $t('auth.login.loginAndContinue') }}
-                  </span>
-                </SfButton>
-                <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>
+            <SfButton type="submit" class="mt-4 w-full">
+              <SfLoaderCircular v-if="loading" />
+              <span>
+                {{ $t('auth.login.loginAndContinue') }}
+              </span>
+            </SfButton>
+            <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>
-          </template>
-        </OrDivider>
+          </form>
+        </div>
       </div>
     </div>
   </div>
@@ -68,12 +58,17 @@ import { SfButton, SfInput, SfLoaderCircular } from '@storefront-ui/vue';
 
 const { login, loading } = useCustomer();
 const { send } = useNotification();
+const { isAvailable, loadConfig } = usePayPal();
 const { t } = useI18n();
 const localePath = useLocalePath();
 const NuxtLink = resolveComponent('NuxtLink');
 
 const emits = defineEmits(['loggedIn', 'change-view']);
 
+onMounted(() => {
+  loadConfig();
+});
+
 const email = ref('');
 const password = ref('');
 let loginSubmit = false;

diff --git a/apps/web/components/OrDivider/OrDivider.vue b/apps/web/components/OrDivider/OrDivider.vue
@@ -6,7 +6,7 @@
 
     <div class="flex items-center justify-center w-full my-2">
       <div class="border-t-2 flex-grow"></div>
-      <p class="px-2 text-sm uppercase">{{ $t('or') }}</p>
+      <p class="px-2 text-sm uppercase text-gray-400">{{ $t('or') }}</p>
       <div class="border-t-2 flex-grow"></div>
     </div>
 

diff --git a/apps/web/components/QuickCheckout/QuickCheckout.vue b/apps/web/components/QuickCheckout/QuickCheckout.vue
@@ -81,12 +81,10 @@
         >
           {{ $t('goToCheckout') }}
         </SfButton>
-        <div class="relative flex py-5 px-12 items-center">
-          <div class="flex-grow border-t border-gray-400"></div>
-          <span class="flex-shrink mx-4 text-gray-400">{{ t('quickCheckout.or') }}</span>
-          <div class="flex-grow border-t border-gray-400"></div>
+        <div v-if="isAvailable">
+          <OrDivider class="my-4" />
+          <PayPalExpressButton class="w-full text-center" type="CartPreview" />
         </div>
-        <PayPalExpressButton class="w-full text-center" type="CartPreview" />
       </div>
     </div>
   </UiModal>
@@ -105,11 +103,15 @@ const runtimeConfig = useRuntimeConfig();
 const showNetPrices = runtimeConfig.public.showNetPrices;
 const localePath = useLocalePath();
 const { data: cart } = useCart();
+const { isAvailable, loadConfig } = usePayPal();
 const { addModernImageExtension } = useModernImage();
 const { isOpen, timer, startTimer, endTimer, closeQuickCheckout, hasTimer, quantity } = useQuickCheckout();
 const cartItemsCount = computed(() => cart.value?.items?.reduce((price, { quantity }) => price + quantity, 0) ?? 0);
 
-onMounted(() => startTimer());
+onMounted(() => {
+  startTimer();
+  loadConfig();
+});
 onUnmounted(() => endTimer());
 
 const totals = computed(() => {

diff --git a/apps/web/components/Register/Register.vue b/apps/web/components/Register/Register.vue
@@ -207,7 +207,7 @@ if (props.emailAddress) {
 }
 
 const registerUser = async () => {
-  if (!meta.value.valid || !turnstile.value) {
+  if (!meta.value.valid || (!turnstile.value && turnstileSiteKey.length > 0)) {
     return;
   }
 

diff --git a/apps/web/components/WishlistButton/WishlistButton.vue b/apps/web/components/WishlistButton/WishlistButton.vue
@@ -3,7 +3,9 @@
     variant="tertiary"
     size="sm"
     :aria-label="
-      isWishlistItem(variationId) ? t('removeProductFromWishlist', productName) : t('addProductToWishlist', productName)
+      isWishlistItem(variationId)
+        ? t('removeProductFromWishlist', { label: productName })
+        : t('addProductToWishlist', { label: productName })
     "
     :class="{ 'p-[0.9rem]': !isCloseButton }"
     class="m-2"

diff --git a/apps/web/components/ui/ProductCard/ProductCard.vue b/apps/web/components/ui/ProductCard/ProductCard.vue
@@ -86,26 +86,15 @@
         </span>
       </SfButton>
       <SfButton v-else type="button" :tag="NuxtLink" :to="localePath(`${path}/${productSlug}`)" size="sm" class="w-fit">
-        <span>{{ t('showArticle') }}</span>
-        <template #prefix>
-          <SfIconChevronRight size="sm" />
-        </template>
+        <span>{{ t('showOptions') }}</span>
       </SfButton>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { productGetters } from '@plentymarkets/shop-sdk';
-import {
-  SfLink,
-  SfButton,
-  SfIconShoppingCart,
-  SfLoaderCircular,
-  SfIconChevronRight,
-  SfRating,
-  SfCounter,
-} from '@storefront-ui/vue';
+import { SfLink, SfButton, SfIconShoppingCart, SfLoaderCircular, SfRating, SfCounter } from '@storefront-ui/vue';
 import type { ProductCardProps } from '~/components/ui/ProductCard/types';
 
 const localePath = useLocalePath();

diff --git a/apps/web/composables/usePayPal/types.ts b/apps/web/composables/usePayPal/types.ts
@@ -18,6 +18,7 @@ export interface UsePayPalState {
   config: PayPalConfigResponse | null;
   loadedConfig: boolean;
   loading: boolean;
+  isAvailable: boolean;
 }
 
 export type LoadConfig = () => Promise<void>;
@@ -31,6 +32,8 @@ export type CaptureOrder = (params: PayPalCaptureOrderParams) => Promise<PayPalA
 
 export interface UsePayPalMethods {
   loading: Readonly<Ref<boolean>>;
+  isAvailable: Readonly<Ref<boolean>>;
+  loadedConfig: Readonly<Ref<boolean>>;
   loadScript: LoadScript;
   createTransaction: CreateTransaction;
   approveOrder: ApproveOrder;

diff --git a/apps/web/composables/usePayPal/usePayPal.ts b/apps/web/composables/usePayPal/usePayPal.ts
@@ -44,6 +44,7 @@ export const usePayPal: UsePayPalMethodsReturn = () => {
     order: null,
     config: null,
     loadedConfig: false,
+    isAvailable: false,
   }));
 
   /**
@@ -58,6 +59,7 @@ export const usePayPal: UsePayPalMethodsReturn = () => {
     if (!state.value.loadedConfig) {
       const { data } = await useAsyncData('paypalLoadConfig', () => useSdk().plentysystems.getPayPalDataClientToken());
       state.value.config = data.value?.data ?? null;
+      state.value.isAvailable = !!state.value.config;
       state.value.loadedConfig = true;
     }
   };

diff --git a/apps/web/cypress.config.ts b/apps/web/cypress.config.ts
@@ -16,7 +16,7 @@ export default defineConfig({
     },
     baseUrl: 'http://localhost:3000',
     specPattern: '__tests__/test/**/*.cy.{js,jsx,ts,tsx}',
-    excludeSpecPattern: [ '__tests__/test/smoke/paypalCreditCard.cy.ts' ],
+    excludeSpecPattern: ['__tests__/test/smoke/paypalCreditCard.spec.cy.ts'],
     supportFile: '__tests__/support/e2e.ts',
     retries: {
       runMode: 2,

diff --git a/apps/web/lang/de.json b/apps/web/lang/de.json
@@ -261,7 +261,7 @@
   "pleaseSelect": "Bitte wählen",
   "addToCart": "In den Warenkorb",
   "itemNotAvailable": "Der Artikel ist nicht verfügbar",
-  "showArticle": "Artikel anzeigen",
+  "showOptions": "Optionen anzeigen",
   "addToCartShort": "Hinzufügen",
   "addedToCart": "Artikel zum Warenkorb hinzugefügt",
   "deletedFromCart": "Artikel aus dem Warenkorb entfernt",
@@ -804,7 +804,6 @@
     "heading": "Zum Warenkorb hinzugefügt",
     "subTotal": "Zwischensumme",
     "checkYourCart": "Warenkorb prüfen",
-    "cartContains": "Ihr Warenkorb enthält {count} Artikel",
-    "or": "ODER"
+    "cartContains": "Ihr Warenkorb enthält {count} Artikel"
   }
 }
diff --git a/apps/web/lang/en.json b/apps/web/lang/en.json
@@ -261,7 +261,7 @@
   "pleaseSelect": "Please Select",
   "addToCart": "Add to cart",
   "itemNotAvailable": "This item is not available.",
-  "showArticle": "Show article",
+  "showOptions": "Show options",
   "addToCartShort": "Add",
   "addedToCart": "Item added to Cart",
   "deletedFromCart": "Item removed from shopping cart",
@@ -804,7 +804,6 @@
     "heading": "Added to shopping cart",
     "subTotal": "Items subtotal",
     "checkYourCart": "Check your cart",
-    "cartContains": "Your cart contains {count} item | Your cart contains {count} items",
-    "or": "OR"
+    "cartContains": "Your cart contains {count} item | Your cart contains {count} items"
   }
 }
diff --git a/apps/web/pages/cart.vue b/apps/web/pages/cart.vue
@@ -18,8 +18,8 @@ definePageMeta({
 const router = useRouter();
 const localePath = useLocalePath();
 const historyState = router.options.history.state;
-const backUrl = localePath(String(historyState.back));
-const currentUrl = localePath(String(historyState.current));
+const backUrl = localePath(historyState?.back?.toString() ?? '');
+const currentUrl = localePath(historyState?.current?.toString() ?? '');
 const homeUrl = localePath(paths.home);
 const backHref = backUrl === currentUrl ? homeUrl : backUrl;
 </script>
diff --git a/apps/web/pages/guest/login.vue b/apps/web/pages/guest/login.vue
@@ -18,8 +18,8 @@ definePageMeta({
 const router = useRouter();
 const localePath = useLocalePath();
 const historyState = router.options.history.state;
-const backUrl = localePath(String(historyState.back));
-const currentUrl = localePath(String(historyState.current));
+const backUrl = localePath(historyState?.back?.toString() ?? '');
+const currentUrl = localePath(historyState?.current?.toString() ?? '');
 const homeUrl = localePath(paths.home);
 const backHref = backUrl === currentUrl ? homeUrl : backUrl;
 </script>
diff --git a/apps/web/pages/index.vue b/apps/web/pages/index.vue
@@ -59,7 +59,7 @@
         />
         <div :id="`image-${title}`" class="flex justify-center">
           <div
-            class="mt-4 font-semibold no-underline text-normal-900 typography-text-base group-hover:text-primary-800 group-hover:font-normal group-active:text-primary-800 group-active:font-normal"
+            class="mt-4 font-semibold no-underline text-normal-900 typography-text-base group-hover:text-primary-800 group-active:text-primary-800"
           >
             {{ title }}
           </div>
@@ -75,11 +75,6 @@
           details.backgroundColor,
         ]"
       >
-        <a
-          class="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
-          :aria-label="details.title"
-          href="#"
-        />
         <div :class="['flex justify-between overflow-hidden grow', { 'flex-row-reverse': details.reverse }]">
           <div class="flex flex-col justify-center items-start p-6 lg:p-10 max-w-1/2">
             <p :class="['uppercase typography-text-xs block font-bold tracking-widest', details.subtitleClass]">
@@ -91,7 +86,9 @@
             <p class="typography-text-base block mb-4">
               {{ details.description }}
             </p>
-            <SfButton class="!bg-black">{{ details.buttonText }}</SfButton>
+            <NuxtLink to="/">
+              <SfButton class="!bg-black hover:!bg-white hover:!text-black">{{ details.buttonText }}</SfButton>
+            </NuxtLink>
           </div>
           <img
             :src="details.image"

diff --git a/docs/changelog/changelog_de.md b/docs/changelog/changelog_de.md
@@ -1,5 +1,17 @@
 # Changelog plentyshopPWA
 
+## v1.5.0 (yyyy-mm-dd) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.4.1...v1.5.0" target="_blank" rel="noopener">
+
+### Hinzugefügt
+
+### Behoben
+
+- Wunschlisten-Button Arien-Etikett
+- PayPal-Bereich im "Artikel zum Warenkorb hinzugefügt"-Dialog und Gast-Login wird nur noch angezeigt, wenn PayPal verbunden ist.
+- Registration ohne Cloudflare Turnstile-Konfiguration ist jetzt möglich.
+
+### Geändert
+
 ## v1.4.1 (2024-06-05) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.4.0...v1.4.1" target="_blank" rel="noopener">
 
 ### Hinzugefügt

diff --git a/docs/changelog/changelog_en.md b/docs/changelog/changelog_en.md
@@ -1,5 +1,18 @@
 # Changelog plentyshopPWA
 
+## v1.5.0 (yyyy-mm-dd) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.4.1...v1.5.0" target="_blank" rel="noopener">
+
+### New
+
+### Fixed
+
+- Wish list button aria label
+- Hydration errors under guest login and cart
+- PayPal area in the quick checkout dialog and guest login is only displayed if PayPal is connected.
+- Registration without cloudflare turnstile configuration is now possible.
+
+### Changed
+
 ## v1.4.1 (2024-06-05) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.4.0...v1.4.1" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
 
 ### New
-Original file line number
+Diff line change
@@ Expand Up / @@ -207,7 +207,7 @@ if (props.emailAddress) { @@
     }
     const registerUser = async () => {
-      if (!meta.value.valid || !turnstile.value) {
+      if (!meta.value.valid || (!turnstile.value && turnstileSiteKey.length > 0)) {
         return;
       }
@@ Expand Down @@