@designcrowd/library.brand-page 5.14.11 → 5.14.12

package/src/bundles/bundled-translations.fr-FR.json

@@ -528,6 +528,7 @@
     "sendPlaceholder": "Envoyer",
     "formSuccessMessage": "Merci ! Nous vous contacterons dès que possible.",
     "fullWidthLabel": "Pleine largeur",
+    "enablePopupLabel": "Ouvrir des images dans un pop-up",
     "autoplayLabel": "Lecture automatique",
     "muteLabel": "Muet",
     "headingStyleLabel": "Style de titre",
@@ -643,14 +644,29 @@
     "shapeColor": "Couleur de forme",
     "imageCaptionPlaceholder": "Ajouter une légende d'image",
     "imageLink": "Lien d'image",
-    "imageCaption": "Légende d'image",
+    "imageCaption": "Légende du pop-up des images",
+    "imageCaptionSub": "Cette légende n'apparaît que dans le pop-up des images",
     "addTitlePlaceholder": "Ajouter un titre",
     "title": "Titre",
     "addParagraphPlaceholder": "Ajouter un paragraphe",
     "paragraph": "Paragraphe",
     "addItemLabel": "Ajouter un élément",
     "image": "Image",
-    "shape": "Forme"
+    "shape": "Forme",
+    "none": "Aucune",
+    "popup": "Pop-up",
+    "openLink": "Ouvrir le lien",
+    "imageBehaviour": "Comportement de l’image",
+    "button": "Bouton",
+    "buttonText": "Texte du bouton",
+    "getStarted": "Commencez",
+    "buttonLink": "Lien de bouton",
+    "url": "Url",
+    "email": "Adresse e-mail",
+    "telephone": "Numéro de téléphone",
+    "buttonTextStyleLabel": "Style de texte des boutons",
+    "selectPage": "Sélectionnez une page",
+    "page": "Page"
   },
   "textItemsField": {
     "fontSettings": "Paramètres de police",

package/src/bundles/bundled-translations.json

@@ -528,6 +528,7 @@
     "sendPlaceholder": "Send",
     "formSuccessMessage": "Thank you! We'll get in touch with you as soon as possible.",
     "fullWidthLabel": "Full width",
+    "enablePopupLabel": "Open images in a pop-up",
     "autoplayLabel": "Autoplay",
     "muteLabel": "Mute",
     "headingStyleLabel": "Heading style",
@@ -643,14 +644,29 @@
     "shapeColor": "Shape Color",
     "imageCaptionPlaceholder": "Add image caption",
     "imageLink": "Image link",
-    "imageCaption": "Image caption",
+    "imageCaption": "Image pop-up caption",
+    "imageCaptionSub": "This caption only appears in the image pop-up",
     "addTitlePlaceholder": "Add title",
     "title": "Title",
     "addParagraphPlaceholder": "Add paragraph",
     "paragraph": "Paragraph",
     "addItemLabel": "Add Item",
     "image": "Image",
-    "shape": "Shape"
+    "shape": "Shape",
+    "none": "None",
+    "popup": "Pop-up",
+    "openLink": "Open Link",
+    "imageBehaviour": "Image behaviour",
+    "button": "Button",
+    "buttonText": "Button text",
+    "getStarted": "Get Started",
+    "buttonLink": "Button Link",
+    "url": "Url",
+    "email": "Email Address",
+    "telephone": "Phone Number",
+    "buttonTextStyleLabel": "Button text Style",
+    "selectPage": "Select a page",
+    "page": "Page"
   },
   "textItemsField": {
     "fontSettings": "Font Settings",

package/src/bundles/bundled-translations.pt-BR.json

@@ -528,6 +528,7 @@
     "sendPlaceholder": "Enviar",
     "formSuccessMessage": "Obrigado! Entraremos em contato consigo assim que possível.",
     "fullWidthLabel": "Largura total",
+    "enablePopupLabel": "Abrir imagens em um pop-up",
     "autoplayLabel": "Reprodução automática",
     "muteLabel": "Silenciar",
     "headingStyleLabel": "Estilo de cabeçalho",
@@ -643,14 +644,29 @@
     "shapeColor": "Cor da forma",
     "imageCaptionPlaceholder": "Adicionar legenda à imagem",
     "imageLink": "Link da imagem",
-    "imageCaption": "Legenda da imagem",
+    "imageCaption": "Legenda da imagem pop-up",
+    "imageCaptionSub": "Esta legenda só aparece no pop-up da imagem",
     "addTitlePlaceholder": "Adicionar título",
     "title": "Título",
     "addParagraphPlaceholder": "Adicionar parágrafo",
     "paragraph": "Parágrafo",
     "addItemLabel": "Adicionar item",
     "image": "Imagem",
-    "shape": "Forma"
+    "shape": "Forma",
+    "none": "Nenhum",
+    "popup": "Pop-up",
+    "openLink": "Abrir link",
+    "imageBehaviour": "Comportamento da imagem",
+    "button": "Botão",
+    "buttonText": "Texto do botão",
+    "getStarted": "Começar",
+    "buttonLink": "Link do botão",
+    "url": "URL",
+    "email": "Endereço de e-mail",
+    "telephone": "Número de telefone",
+    "buttonTextStyleLabel": "Estilo do texto do botão",
+    "selectPage": "Selecione uma página",
+    "page": "Página"
   },
   "textItemsField": {
     "fontSettings": "Definições de fontes",

package/src/bundles/bundled-translations.pt-PT.json

@@ -528,6 +528,7 @@
     "sendPlaceholder": "Enviar",
     "formSuccessMessage": "Obrigado! Entraremos em contacto consigo assim que possível.",
     "fullWidthLabel": "Largura total",
+    "enablePopupLabel": "Abrir imagens num pop-up",
     "autoplayLabel": "Reprodução automática",
     "muteLabel": "Silenciar",
     "headingStyleLabel": "Estilo de cabeçalho",
@@ -643,14 +644,29 @@
     "shapeColor": "Cor da Forma",
     "imageCaptionPlaceholder": "Incluir legenda da imagem",
     "imageLink": "Link da imagem",
-    "imageCaption": "Legenda da imagem",
+    "imageCaption": "Legenda pop-up da imagem",
+    "imageCaptionSub": "Esta legenda só aparece no pop-up da imagem",
     "addTitlePlaceholder": "Adicionar título",
     "title": "Título",
     "addParagraphPlaceholder": "Adicionar parágrafo",
     "paragraph": "Parágrafo",
     "addItemLabel": "Adicionar Item",
     "image": "Imagem",
-    "shape": "Forma"
+    "shape": "Forma",
+    "none": "Nenhum",
+    "popup": "Pop-up",
+    "openLink": "Abrir link",
+    "imageBehaviour": "Comportamento da imagem",
+    "button": "Botão",
+    "buttonText": "Texto do botão",
+    "getStarted": "Comece",
+    "buttonLink": "Link de botão",
+    "url": "URL",
+    "email": "Endereço de email",
+    "telephone": "Número de telefone",
+    "buttonTextStyleLabel": "Estilo do texto do botão",
+    "selectPage": "Selecione uma página",
+    "page": "Página"
   },
   "textItemsField": {
     "fontSettings": "Definições de tipo de letra",

package/src/shared/content-settings/components/button-configuration-field/ButtonConfigurationField.vue

@@ -0,0 +1,283 @@
+<template>
+  <div>
+    <div class="tw-flex tw-items-center tw-justify-between tw-mb-4">
+      <h4 class="tw-text-sm tw-font-bold">
+        {{ buttonConfigurationFieldTr(`button`) }}
+      </h4>
+      <Toggle
+        :id="`button-toggle-${id}-${index}`"
+        :model-value="buttonConfig.buttonText !== false"
+        :attrs="{
+          'data-test-tag': `button-toggle-${id}-${index}`,
+        }"
+        color="primary"
+        @update:model-value="onButtonToggleChange"
+      />
+    </div>
+
+    <div v-if="buttonConfig.buttonText !== false" class="tw-space-y-4">
+      <div>
+        <TextInput
+          :model-value="buttonTextAsString"
+          size="sm"
+          :maxlength="titleLength"
+          :placeholder="buttonConfigurationFieldTr(`getStarted`)"
+          :attrs="{
+            'data-test-tag': `button-text-input-${id}-${index}`,
+          }"
+          :error="buttonTextAsString.length >= titleLength"
+          @input="onButtonTextChange"
+        />
+      </div>
+
+      <div v-if="buttonConfig.buttonText">
+        <h4 class="tw-text-sm tw-font-bold tw-mb-2">
+          {{ buttonConfigurationFieldTr(`buttonLink`) }}
+        </h4>
+        <ButtonGroup
+          :model-value="currentLinkType"
+          :options="linkTypeOptions"
+          :columns="2"
+          :attrs="{
+            'data-test-tag': `button-group-input-${id}-${index}`,
+          }"
+          @on-select="onLinkTypeChange"
+        />
+
+        <div v-if="!isPageLinkType && isUrlLinkType" class="tw-mt-2">
+          <UrlField
+            :id="`url-field-${id}-${index}`"
+            :name="`url-${id}-${index}`"
+            :value="buttonConfig.url || ''"
+            :placeholder="getUrlPlaceholder()"
+            role="url"
+            :attrs="{
+              'data-test-tag': `button-url-input-${id}-${index}`,
+            }"
+            @update:model-value="onButtonUrlChange"
+          />
+        </div>
+
+        <div v-if="!isPageLinkType && isEmailOrTelLinkType" class="tw-mt-2">
+          <TextInput
+            :model-value="buttonConfig.url || ''"
+            size="sm"
+            :maxlength="descriptionLength"
+            :placeholder="getUrlPlaceholder()"
+            :error="
+              (buttonConfig.url || '').length >= descriptionLength ||
+              !isValidButtonUrl
+            "
+            :attrs="{
+              'data-test-tag': `button-${currentLinkType}-input-${id}-${index}`,
+            }"
+            @input="onButtonUrlChange"
+          />
+          <p
+            v-if="!isValidButtonUrl"
+            class="tw-text-error-500 tw-text-sm tw-mt-2"
+          >
+            {{ invalidUrlError }}
+          </p>
+        </div>
+
+        <div v-if="isPageLinkType" class="tw-mt-2">
+          <PageDropdownField
+            :id="`page-dropdown-${id}-${index}`"
+            :name="`pageSlug-${id}-${index}`"
+            :value="buttonConfig.pageSlug || ''"
+            :placeholder="buttonConfigurationFieldTr('selectPage')"
+            :attrs="{ 'data-test-tag': `pageSlug-${id}-${index}` }"
+            @update:model-value="onPageSlugChange"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { TextInput, ButtonGroup, Toggle } from '@designcrowd/fe-shared-lib';
+import PageDropdownField from '../page-dropdown-field/PageDropdownField.vue';
+import UrlField from '../url-field/UrlField.vue';
+import {
+  textImageFieldTr as buttonConfigurationFieldTr,
+  validatorTr,
+  contentSettingsTr,
+} from '../../../../composables/useTranslate';
+import type { ButtonLinkType } from '../../../../brand-page';
+import {
+  MAX_DESCRIPTION_LENGTH,
+  MAX_TITLE_LENGTH,
+  BUTTON_LINK_TYPE,
+} from '../../../../brand-page';
+import { isURL, isEmail, isTel } from '../../../../utils/validator.util';
+import { useUiPageSettingsStore } from '../../../page-settings/store';
+
+// Props
+interface ButtonConfig {
+  buttonText: string | boolean;
+  buttonLinkType: ButtonLinkType;
+  url: string;
+  pageSlug: string;
+}
+
+interface Props {
+  id: string;
+  index: number;
+  buttonConfig: ButtonConfig;
+  pages?: Array<{ slug: string; title: string }>;
+  titleLength?: number;
+  descriptionLength?: number;
+  isAdmin?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  titleLength: MAX_TITLE_LENGTH,
+  descriptionLength: MAX_DESCRIPTION_LENGTH,
+  isAdmin: false,
+});
+
+const pageSettingsStore = useUiPageSettingsStore();
+
+// Preserve button text when toggling
+const preservedButtonText = ref<string>('');
+
+// Emits
+const emit = defineEmits<{
+  'update:buttonConfig': [buttonConfig: ButtonConfig];
+}>();
+
+// Computed
+const currentLinkType = computed(
+  () => props.buttonConfig.buttonLinkType || BUTTON_LINK_TYPE.url,
+);
+
+const isUrlLinkType = computed(
+  () => currentLinkType.value === BUTTON_LINK_TYPE.url,
+);
+
+const isPageLinkType = computed(
+  () => currentLinkType.value === BUTTON_LINK_TYPE.page,
+);
+
+const isEmailOrTelLinkType = computed(
+  () =>
+    currentLinkType.value === BUTTON_LINK_TYPE.mailTo ||
+    currentLinkType.value === BUTTON_LINK_TYPE.tel,
+);
+
+const buttonTextAsString = computed(
+  () => (props.buttonConfig.buttonText as string) || '',
+);
+
+const linkTypeOptions = computed(() => {
+  const allLinkTypes = [
+    { value: BUTTON_LINK_TYPE.url, labelKey: 'url', alwaysShow: true },
+    {
+      value: BUTTON_LINK_TYPE.page,
+      labelKey: 'page',
+      alwaysShow: false,
+      condition: () =>
+        pageSettingsStore.pages && pageSettingsStore.pages.length > 1,
+    },
+    { value: BUTTON_LINK_TYPE.mailTo, labelKey: 'email', alwaysShow: true },
+    { value: BUTTON_LINK_TYPE.tel, labelKey: 'telephone', alwaysShow: true },
+  ];
+
+  return allLinkTypes
+    .filter(
+      (linkType) =>
+        linkType.alwaysShow || (linkType.condition && linkType.condition()),
+    )
+    .map((linkType) => ({
+      value: linkType.value,
+      label: buttonConfigurationFieldTr(linkType.labelKey),
+      isSelected: currentLinkType.value === linkType.value,
+    }));
+});
+
+const isValidButtonUrl = computed((): boolean => {
+  if (!props.buttonConfig.url) return true;
+
+  switch (currentLinkType.value) {
+    case BUTTON_LINK_TYPE.mailTo:
+      return isEmail(props.buttonConfig.url);
+    case BUTTON_LINK_TYPE.tel:
+      return isTel(props.buttonConfig.url);
+    default:
+      return isURL(props.buttonConfig.url);
+  }
+});
+
+const invalidUrlError = computed((): string => {
+  switch (currentLinkType.value) {
+    case BUTTON_LINK_TYPE.mailTo:
+      return validatorTr('invalidEmailMessage');
+    case BUTTON_LINK_TYPE.tel:
+      return validatorTr('invalidTelMessage');
+    default:
+      return validatorTr('invalidUrlMessage');
+  }
+});
+
+// Methods
+const emitUpdate = (updates: Partial<ButtonConfig>) => {
+  emit('update:buttonConfig', { ...props.buttonConfig, ...updates });
+};
+
+const onButtonToggleChange = (enabled: boolean): void => {
+  if (enabled) {
+    const textToRestore =
+      preservedButtonText.value ||
+      (props.buttonConfig.buttonText === false ||
+      props.buttonConfig.buttonText === ''
+        ? contentSettingsTr('getStartedButtonText')
+        : props.buttonConfig.buttonText);
+    emitUpdate({ buttonText: textToRestore });
+  } else {
+    if (
+      typeof props.buttonConfig.buttonText === 'string' &&
+      props.buttonConfig.buttonText !== ''
+    ) {
+      preservedButtonText.value = props.buttonConfig.buttonText;
+    }
+    emitUpdate({ buttonText: false });
+  }
+};
+
+const onButtonTextChange = (value: string): void => {
+  emitUpdate({ buttonText: value });
+};
+
+const onLinkTypeChange = (option: any): void => {
+  const linkType = typeof option === 'string' ? option : option.value;
+  emitUpdate({ buttonLinkType: linkType as ButtonLinkType, url: '' });
+};
+
+const onPageSlugChange = (
+  payload: string | { id: string; name: string; value: string },
+): void => {
+  const pageSlug = typeof payload === 'string' ? payload : payload.value;
+  emitUpdate({ pageSlug });
+};
+
+const onButtonUrlChange = (
+  value: string | { id: string; name: string; value: string },
+): void => {
+  const urlValue = typeof value === 'string' ? value : value.value;
+  emitUpdate({ url: urlValue });
+};
+
+const getUrlPlaceholder = (): string => {
+  switch (currentLinkType.value) {
+    case BUTTON_LINK_TYPE.mailTo:
+      return 'me@website.com';
+    case BUTTON_LINK_TYPE.tel:
+      return '12345-6789';
+    default:
+      return 'https://example.com';
+  }
+};
+</script>

package/src/shared/content-settings/components/content-settings/i18n/content-settings.de-DE.json

@@ -142,6 +142,7 @@
     "sendPlaceholder" : "Senden",
     "formSuccessMessage" : "Vielen Dank! Wir werden uns so schnell wie möglich mit Ihnen in Verbindung setzen.",
     "fullWidthLabel" : "Volle Breite",
+    "enablePopupLabel" : "Bilder in einem Pop-up öffnen",
     "autoplayLabel" : "Autoplay",
     "muteLabel" : "Stumm",
     "headingStyleLabel" : "Überschriftstil",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.es-ES.json

@@ -142,6 +142,7 @@
     "sendPlaceholder" : "Enviar",
     "formSuccessMessage" : "¡Gracias! Nos pondremos en contacto contigo lo antes posible.",
     "fullWidthLabel" : "Ancho total",
+    "enablePopupLabel" : "Abre imágenes en una ventana emergente",
     "autoplayLabel" : "Reproducción automática",
     "muteLabel" : "Silenciar",
     "headingStyleLabel" : "Estilo de encabezado",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.fr-CA.json

@@ -142,6 +142,7 @@
     "sendPlaceholder" : "Envoyer",
     "formSuccessMessage" : "Merci ! Nous vous contacterons dès que possible.",
     "fullWidthLabel" : "Pleine largeur",
+    "enablePopupLabel" : "Ouvrir des images dans une fenêtre contextuelle",
     "autoplayLabel" : "Lecture automatique",
     "muteLabel" : "Muet",
     "headingStyleLabel" : "Style de titre",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.fr-FR.json

@@ -142,6 +142,7 @@
     "sendPlaceholder" : "Envoyer",
     "formSuccessMessage" : "Merci ! Nous vous contacterons dès que possible.",
     "fullWidthLabel" : "Pleine largeur",
+    "enablePopupLabel" : "Ouvrir des images dans un pop-up",
     "autoplayLabel" : "Lecture automatique",
     "muteLabel" : "Muet",
     "headingStyleLabel" : "Style de titre",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.json

@@ -153,6 +153,7 @@
     "formSuccessMessage": "Thank you! We'll get in touch with you as soon as possible.",
 
     "fullWidthLabel": "Full width",
+    "enablePopupLabel": "Open images in a pop-up",
     "autoplayLabel": "Autoplay",
     "muteLabel": "Mute",
     "headingStyleLabel": "Heading style",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-BR.json

@@ -142,6 +142,7 @@
     "sendPlaceholder" : "Enviar",
     "formSuccessMessage" : "Obrigado! Entraremos em contato consigo assim que possível.",
     "fullWidthLabel" : "Largura total",
+    "enablePopupLabel" : "Abrir imagens em um pop-up",
     "autoplayLabel" : "Reprodução automática",
     "muteLabel" : "Silenciar",
     "headingStyleLabel" : "Estilo de cabeçalho",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-PT.json

@@ -142,6 +142,7 @@
     "sendPlaceholder" : "Enviar",
     "formSuccessMessage" : "Obrigado! Entraremos em contacto consigo assim que possível.",
     "fullWidthLabel" : "Largura total",
+    "enablePopupLabel" : "Abrir imagens num pop-up",
     "autoplayLabel" : "Reprodução automática",
     "muteLabel" : "Silenciar",
     "headingStyleLabel" : "Estilo de cabeçalho",

package/src/shared/content-settings/components/items-field/ItemsField.mixin.ts

@@ -30,7 +30,7 @@ export default defineComponent({
       default: false,
     },
   },
-  emits: ['itemsChange', 'itemsDelete'],
+  emits: ['items-change', 'items-delete'],
   data: () => ({
     itemStates: {} as Record<number, ItemFieldState>,
   }),
@@ -68,7 +68,7 @@ export default defineComponent({
 
         const items: ItemFieldItem[] = fields.map((f) => f.item);
 
-        this.$emit('itemsChange', items);
+        this.$emit('items-change', items);
       },
     },
   },
@@ -77,7 +77,7 @@ export default defineComponent({
       this.itemStates[index].isCollapsed = !this.itemStates[index].isCollapsed;
     },
     onDelete(index: number): void {
-      this.$emit('itemsDelete', index);
+      this.$emit('items-delete', index);
     },
     onEdit(index: number): void {
       this.$emit('itemsEdit', index);