Merge branch 'main' into fix/useRoute-in-middleware

apps/web/.env.example

@@ -6,7 +6,5 @@ IMAGEAVIF=false
 IMAGEWEBP=false
 VALIDATE_RETURN_REASONS=1
 ENABLE_QUICK_CHECKOUT_TIMER=1
-NEWSLETTERFORM=true
-NEWSLETTERFORMNAMES=false
 DEFAULT_FEEDBACK_ITEMS_PER_PAGE=10
 LOG_LEVEL=info

apps/web/components/ConfigurationDrawer/ConfigurationDrawer.vue

@@ -37,29 +37,14 @@
             <div><input v-model="secondaryColorReference" type="color" /></div>
           </div>
         </div>
-        <h3>General</h3>
-        <div class="border border-black p-4 rounded-md">
-          <div class="flex items-center pt-2">
-            <SfCheckbox id="newsletterNamesCheckbox" v-model="showNames" class="peer" />
-            <label
-              class="ml-3 text-base text-gray-900 cursor-pointer font-body peer-disabled:text-disabled-900"
-              for="newsletterNamesCheckbox"
-            >
-              Newsletter form
-            </label>
-          </div>
-          <div class="flex justify-between ml-8">
-            <p class="typography-hint-xs mt-0.5 text-neutral-500">Show names</p>
-          </div>
-        </div>
       </div>
     </SfDrawer>
   </transition>
 </template>
 
 <script setup lang="ts">
 import type { SfDrawerPlacement } from '@storefront-ui/vue';
-import { SfDrawer, SfIconClose, SfIconTune, useTrapFocus, SfCheckbox } from '@storefront-ui/vue';
+import { SfDrawer, SfIconClose, SfIconTune, useTrapFocus } from '@storefront-ui/vue';
 
 const placement = ref<`${SfDrawerPlacement}`>('right');
 const drawerReference = ref();
@@ -69,7 +54,6 @@ const primaryColorReference = ref(runtimeConfig.public.primaryColor);
 const secondaryColorReference = ref(runtimeConfig.public.secondaryColor);
 
 const { open, updatePrimaryColor, updateSecondaryColor } = useConfigurationDrawer();
-const { showNames } = useNewsletter();
 
 useTrapFocus(drawerReference, { activeState: open });
 

apps/web/components/NewsletterSubscribe/NewsletterSubscribe.vue

@@ -1,14 +1,15 @@
 <template>
-  <div class="relative mt-5 bg-neutral-100 p-4 sm:p-10 text-center">
+  <div class="relative mt-5 p-4 sm:p-10 text-center" :style="{ backgroundColor: props.text?.bgColor ?? '#f5f5f5' }">
     <h2 class="typography-headline-4 sm:typography-headline-3 font-bold mb-2">
-      {{ t('newsletter.heading') }}
+      {{ props.text?.title ?? t('newsletter.heading') }}
     </h2>
-    <p class="typography-text-sm sm:typography-text-base my-2 mb-4">
-      {{ t('newsletter.info') }}
-    </p>
+    <p
+      class="typography-text-sm sm:typography-text-base my-2 mb-4"
+      v-html="props.text?.htmlDescription ?? t('newsletter.info')"
+    ></p>
 
     <form class="mx-auto max-w-[550px] pt-2" novalidate @submit.prevent="onSubmit">
-      <div v-if="showNames" class="grid grid-cols-1 sm:grid-cols-2">
+      <div v-if="props.input?.displayNameInput" class="grid grid-cols-1 sm:grid-cols-2">
         <div class="sm:mr-[1rem]">
           <label for="newsletter-first-name">
             <UiFormLabel class="text-start">{{ t('newsletter.firstName') }}</UiFormLabel>
@@ -101,7 +102,7 @@
       <div class="flex flex-col items-center">
         <UiButton type="submit" size="lg" :disabled="loading">
           <SfLoaderCircular v-if="loading" class="flex justify-center items-center" size="base" />
-          <template v-else>{{ t('newsletter.subscribe') }}</template>
+          <template v-else>{{ props.button?.label ?? t('newsletter.subscribe') }}</template>
         </UiButton>
 
         <NuxtTurnstile
@@ -127,23 +128,25 @@ import { useForm, ErrorMessage } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/yup';
 import { object, string, boolean } from 'yup';
 import { paths } from '~/utils/paths';
+import type { NewsletterSubscribeProps } from '~/components/NewsletterSubscribe/types';
 
 const runtimeConfig = useRuntimeConfig();
-const { subscribe, loading, showNames } = useNewsletter();
+const { subscribe, loading } = useNewsletter();
 const { send } = useNotification();
 const localePath = useLocalePath();
 const { t } = useI18n();
+const props = defineProps<NewsletterSubscribeProps>();
 
 const turnstileSiteKey = runtimeConfig.public?.turnstileSiteKey ?? '';
 const turnstileElement = ref();
 const wrapperClass = 'focus-within:outline focus-within:outline-offset';
 
 const validationSchema = toTypedSchema(
   object({
-    firstName: showNames.value
+    firstName: props.input?.nameIsRequired
       ? string().required(t('errorMessages.newsletter.firstNameRequired')).default('')
       : string().optional().default(''),
-    lastName: showNames.value
+    lastName: props.input?.nameIsRequired
       ? string().required(t('errorMessages.newsletter.lastNameRequired')).default('')
       : string().optional().default(''),
     email: string().email(t('errorMessages.email.valid')).required(t('errorMessages.email.required')).default(''),

apps/web/components/NewsletterSubscribe/types.ts

@@ -0,0 +1,14 @@
+export type NewsletterSubscribeProps = {
+  text?: {
+    bgColor?: string;
+    title?: string;
+    htmlDescription?: string;
+  };
+  input?: {
+    displayNameInput?: boolean;
+    nameIsRequired?: boolean;
+  };
+  button: {
+    label?: string;
+  };
+};

apps/web/components/PageBlock/PageBlock.vue

@@ -35,11 +35,7 @@
       @edit="handleEdit"
       @delete="deleteBlock"
     />
-    <component
-      :is="getComponent && getComponent(block.name)"
-      v-if="block.name !== 'NewsletterSubscribe' || showNewsletter"
-      v-bind="block.options"
-    />
+    <component :is="getComponent && getComponent(block.name)" v-bind="block.options" />
     <button
       v-if="disableActions && isPreview"
       class="z-[0] md:z-[1] lg:z-[10] absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rounded-[18px] p-[6px] bg-[#538aea] text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100"
@@ -63,7 +59,6 @@ interface Props {
   isClicked: boolean;
   clickedBlockIndex: number | null;
   isTablet: boolean;
-  showNewsletter: boolean;
   blockHasData?: (block: Block) => boolean;
   getComponent?: (name: string) => unknown;
   tabletEdit: (index: number) => void;

apps/web/composables/useHomepage/homepageTemplateDataDe.json

@@ -114,14 +114,18 @@
     {
       "name": "NewsletterSubscribe",
       "options": {
-        "email": "E-Mail",
-        "firstName": "Vorname",
-        "heading": "Abonnieren Sie unseren Newsletter",
-        "info": "Informieren Sie sich über bevorstehende Aktionen und Veranstaltungen. Erhalten Sie Geschenke und Sonderangebote!",
-        "lastName": "Nachname",
-        "policy": "Ich bestätige hiermit, dass ich die {privacyPolicy} gelesen habe. Ich kann meine Einwilligung jederzeit widerrufen.",
-        "subscribe": "Newsletter abonnieren",
-        "success": "Vielen Dank für Ihre Anmeldung! Bitte prüfen Sie Ihr E-Mail-Postfach und klicken Sie auf den Bestätigungslink in unserer Nachricht, um den Newsletter zu abonnieren."
+        "text": {
+          "bgColor": "#f5f5f5",
+          "title": "Abonnieren Sie unseren Newsletter",
+          "htmlDescription": "Informieren Sie sich über bevorstehende Aktionen und Veranstaltungen. Erhalten Sie Geschenke und Sonderangebote!"
+        },
+        "input": {
+          "displayNameInput": false,
+          "nameIsRequired": false
+        },
+        "button": {
+          "label": "Newsletter abonnieren"
+        }
       }
     }
   ],

apps/web/composables/useHomepage/homepageTemplateDataEn.json

@@ -114,14 +114,18 @@
     {
       "name": "NewsletterSubscribe",
       "options": {
-        "email": "Email",
-        "firstName": "First Name",
-        "heading": "Subscribe to our Newsletter",
-        "info": "Be aware of upcoming sales and events. Receive gifts and special offers!",
-        "lastName": "Last Name",
-        "policy": "I hereby confirm that I have read the {privacyPolicy}. I can revoke my consent at any time.",
-        "subscribe": "Subscribe To Newsletter",
-        "success": "Thank you for signing up! Please check your email inbox and click on the confirmation link in our message to complete your newsletter subscription."
+        "text": {
+          "bgColor": "#f5f5f5",
+          "title": "Subscribe to our Newsletter",
+          "htmlDescription": "Be aware of upcoming sales and events. Receive gifts and special offers!"
+        },
+        "input": {
+          "displayNameInput": false,
+          "nameIsRequired": false
+        },
+        "button": {
+          "label": "Subscribe To Newsletter"
+        }
       }
     }
   ],

apps/web/composables/useHomepage/types.ts

@@ -1,5 +1,6 @@
 import type { BannerProps } from '~/components/ui/Banner/types';
 import type { TextCardProps } from '~/components/ui/TextCard/types';
+import type { NewsletterSubscribeProps } from '~/components/NewsletterSubscribe/types';
 
 interface ImageProps {
   lg: string;
@@ -36,24 +37,14 @@ export interface ProductRecommendedProductsOptions {
   categoryId: string;
   headline?: string;
 }
-interface NewsletterSubscribeOptions {
-  email?: string;
-  firstName?: string;
-  heading?: string;
-  info?: string;
-  lastName?: string;
-  policy?: string;
-  subscribe?: string;
-  success?: string;
-}
 
 type BlockOptions =
   | BannerProps
   | UiHeroCarouselOptions
   | UiMediaCardOptions
   | TextCardProps
   | ProductRecommendedProductsOptions
-  | NewsletterSubscribeOptions;
+  | NewsletterSubscribeProps;
 
 export interface Block {
   name: string;

apps/web/composables/useNewsletter/types.ts

@@ -2,16 +2,12 @@ import type { NewsletterParams } from '@plentymarkets/shop-api';
 
 export interface UseNewsletterState {
   loading: boolean;
-  showNames: boolean;
-  showNewsletter: boolean;
 }
 
 export type Subscribe = (params: NewsletterParams) => Promise<boolean>;
 
 export interface UseNewsletter {
   loading: Readonly<Ref<boolean>>;
-  showNames: Ref<boolean>;
-  showNewsletter: Ref<boolean>;
   subscribe: Subscribe;
 }
 

apps/web/composables/useNewsletter/useNewsletter.ts

@@ -10,12 +10,8 @@ import type { UseNewsletterReturn, UseNewsletterState, Subscribe } from '~/compo
  * ```
  */
 export const useNewsletter: UseNewsletterReturn = () => {
-  const runtimeConfig = useRuntimeConfig();
-
   const state = useState<UseNewsletterState>('useNewsletter', () => ({
     loading: false,
-    showNewsletter: runtimeConfig.public.newsletterForm,
-    showNames: runtimeConfig.public.newsletterFormShowNames,
   }));
 
   /**

apps/web/nuxt.config.ts

@@ -53,9 +53,6 @@ export default defineNuxtConfig({
       showConfigurationDrawer: process.env.SHOW_CONFIGURATION_DRAWER === '1',
       primaryColor: process.env.PRIMARY || '#062633',
       secondaryColor: process.env.SECONDARY || '#31687d',
-      newsletterForm: process.env.NEWSLETTERFORM === undefined ? true : process.env.NEWSLETTERFORM === 'true',
-      newsletterFormShowNames:
-        process.env?.NEWSLETTERFORMNAMES === undefined ? false : process.env.NEWSLETTERFORMNAMES === 'true',
       defaultItemsPerPage: Number(process.env.DEFAULT_FEEDBACK_ITEMS_PER_PAGE ?? 10),
       headerLogo: process.env.LOGO || '/images/logo.svg',
       homepageCategoryId: Number(process.env.HOMEPAGE) ?? null,

apps/web/pages/index.vue

@@ -17,7 +17,6 @@
           :is-clicked="isClicked"
           :clicked-block-index="clickedBlockIndex"
           :is-tablet="isTablet"
-          :show-newsletter="showNewsletter"
           :block-has-data="blockHasData"
           :get-component="getComponent"
           :tablet-edit="tabletEdit"
@@ -48,7 +47,6 @@ const {
 } = useBlockManager();
 
 const { data, initialBlocks, fetchPageTemplate, dataIsEmpty } = useHomepage();
-const { showNewsletter } = useNewsletter();
 const { $i18n } = useNuxtApp();
 const { isEditing, isEditingEnabled, disableActions } = useEditor();
 

docs/changelog/changelog_en.md

@@ -11,6 +11,7 @@
 - Subtitle, pretitle and title options where added to the Recommened Products component
 - Added canonical for item page.
 - Media Card is now Image Text
+- The newsletter works as the other available blocks. (using the JSON as the source of the data)
 
 ### 🩹 Fixed