@designcrowd/library.brand-page 5.14.11 → 5.14.12

package/src/shared/content-settings/components/text-image-field/TextImageField.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <ItemsField
-      :items="items"
+      :items="options"
       :can-collapse="true"
       :show-preview-image="false"
       @items-change="onItemsChange"
@@ -22,7 +22,7 @@
           >
             <Icon
               class="tw-pt-1"
-              :name="option.item.mediaType === 'shape' ? 'shape' : 'images'"
+              :name="isShape(option.item) ? 'shape' : 'images'"
               size="sm"
             />
           </div>
@@ -34,9 +34,9 @@
       <template #form="option">
         <h4 class="tw-mt-3 tw-mb-1.5 tw-text-sm tw-font-bold tw-capitalize">
           {{
-            option.item.mediaType === 'image'
-              ? textImageFieldTr(`image`)
-              : textImageFieldTr(`shape`)
+            isShape(option.item)
+              ? textImageFieldTr(`shape`)
+              : textImageFieldTr(`image`)
           }}
         </h4>
         <ImageField
@@ -49,6 +49,7 @@
           "
           @update:model-value="onRemoveImage(option.index)"
         />
+
         <PersonalisationOverrideField
           v-if="isAdmin && content.personalisationRole"
           :id="id"
@@ -84,75 +85,6 @@
           :toggle-unique-id="option.index.toString()"
           @update:model-value="onColorReplacementsChange($event, option.index)"
         />
-        <h4
-          v-if="option.item.mediaType !== 'shape'"
-          class="tw-mt-3 tw-text-sm tw-font-bold"
-        >
-          {{ textImageFieldTr(`imageCaption`) }}
-        </h4>
-        <div v-if="option.item.mediaType !== 'shape'">
-          <TextInput
-            v-model="options[option.index].imageTitle"
-            size="sm"
-            :maxlength="descriptionLength"
-            :placeholder="textImageFieldTr(`imageCaptionPlaceholder`)"
-            :attrs="{
-              'data-test-tag': 'image-caption-text-input',
-            }"
-            :error="
-              options[option.index].imageTitle.length >= descriptionLength
-            "
-          />
-          <p
-            v-if="options[option.index].imageTitle.length >= descriptionLength"
-            class="tw-text-error-500 tw-text-sm tw-mt-2"
-          >
-            {{ maxLengthError }}
-          </p>
-          <PersonalisationOverrideField
-            v-if="isAdmin && content.personalisationRole"
-            :id="id"
-            name="imageTitleOverride"
-            :content="content"
-            :object="content[name][option.index]"
-            personalisation-type="text-media-items"
-            @update:model-value="
-              onPersonalisationOverrideChange($event, option.index)
-            "
-          />
-        </div>
-
-        <div
-          v-if="
-            brandPageType === 'brandSite' && option.item.mediaType !== 'shape'
-          "
-        >
-          <h4 class="tw-mt-3 tw-text-sm tw-font-bold">
-            {{ textImageFieldTr(`imageLink`) }}
-          </h4>
-          <TextInput
-            v-model="options[option.index].imageLink"
-            class="tw-mt-2"
-            size="sm"
-            :maxlength="descriptionLength"
-            :placeholder="'https://example.com'"
-            :error="
-              options[option.index].imageLink.length >= descriptionLength ||
-              !checkUrl(option.index)
-            "
-            :icon="'globe'"
-            :attrs="{
-              'data-test-tag': 'image-link-text-input',
-            }"
-            @blur="onValueChange(options[option.index].imageLink, option.index)"
-          />
-          <p
-            v-if="!checkUrl(option.index)"
-            class="tw-text-error-500 tw-text-sm tw-mt-2"
-          >
-            {{ invalidUrlError }}
-          </p>
-        </div>
 
         <h4 class="tw-mt-3 tw-text-sm tw-font-bold">
           {{ textImageFieldTr(`title`) }}
@@ -188,7 +120,9 @@
           {{ textImageFieldTr(`paragraph`) }}
         </h4>
         <TextareaField
+          :id="`${id}-${option.index}-paragraph`"
           :value="options[option.index].paragraph"
+          :item="{ text: options[option.index].paragraph, textStyle: {} }"
           element-classes="tw-w-full"
           size="sm"
           :name="name"
@@ -214,6 +148,120 @@
             onPersonalisationOverrideChange($event, option.index)
           "
         />
+        <template v-if="!isShape(option.item)"
+          ><h4 class="tw-text-sm tw-font-bold">
+            {{ textImageFieldTr(`imageCaption`) }}
+          </h4>
+          <div class="tw-text-sm tw-text-secondary-500">
+            {{ textImageFieldTr(`imageCaptionSub`) }}
+          </div>
+          <div class="tw-mb-2">
+            <TextInput
+              v-model="options[option.index].imageTitle"
+              size="sm"
+              :maxlength="descriptionLength"
+              :placeholder="textImageFieldTr(`imageCaptionPlaceholder`)"
+              :attrs="{
+                'data-test-tag': `image-caption-text-input-${id}-${option.index}`,
+              }"
+              :error="
+                options[option.index].imageTitle.length >= descriptionLength
+              "
+            />
+            <p
+              v-if="
+                options[option.index].imageTitle.length >= descriptionLength
+              "
+              class="tw-text-error-500 tw-text-sm tw-mt-2"
+            >
+              {{ maxLengthError }}
+            </p>
+            <PersonalisationOverrideField
+              v-if="isAdmin && content.personalisationRole"
+              :id="id"
+              name="imageTitleOverride"
+              :content="content"
+              :object="content[name][option.index]"
+              personalisation-type="text-media-items"
+              @update:model-value="
+                onPersonalisationOverrideChange($event, option.index)
+              "
+            />
+          </div>
+          <ButtonConfigurationField
+            :id="id"
+            :index="option.index"
+            :is-admin="isAdmin"
+            :button-config="{
+              buttonText: options[option.index].buttonText ?? false,
+              buttonLinkType: options[option.index].buttonLinkType || 'url',
+              url: options[option.index].url || '',
+              pageSlug: options[option.index].pageSlug || '',
+            }"
+            :title-length="titleLength"
+            :description-length="descriptionLength"
+            @update:button-config="
+              (buttonConfig) => onButtonConfigUpdate(buttonConfig, option.index)
+            "
+          />
+        </template>
+
+        <div
+          v-if="
+            !isShape(option.item) &&
+            brandPageType === BRAND_PAGE_TYPES.brandSite
+          "
+        >
+          <div class="tw-flex tw-items-center tw-justify-between tw-mb-2">
+            <h4 class="tw-mt-3 tw-text-sm tw-font-bold">
+              {{ textImageFieldTr(`imageLink`) }}
+            </h4>
+            <Toggle
+              :id="`image-link-toggle-${id}-${option.index}`"
+              :model-value="options[option.index].imageLink !== false"
+              color="primary"
+              :attrs="{
+                'data-test-tag': `image-link-toggle-${id}-${option.index}`,
+              }"
+              @update:model-value="
+                (enabled) => onImageLinkToggleChange(enabled, option.index)
+              "
+            />
+          </div>
+          <div v-if="options[option.index].imageLink !== false">
+            <TextInput
+              v-model="options[option.index].imageLink"
+              class="tw-mt-2"
+              size="sm"
+              :maxlength="descriptionLength"
+              :placeholder="'https://example.com'"
+              :error="
+                (typeof options[option.index].imageLink === 'string' &&
+                  (options[option.index].imageLink as string).length >=
+                    descriptionLength) ||
+                !checkUrl(option.index)
+              "
+              :icon="'globe'"
+              :attrs="{
+                'data-test-tag': `image-link-text-input-${id}-${option.index}`,
+              }"
+              @blur="
+                onValueChange(
+                  typeof options[option.index].imageLink === 'string'
+                    ? (options[option.index].imageLink as string)
+                    : '',
+                  option.index,
+                )
+              "
+            />
+            <p
+              v-if="!checkUrl(option.index)"
+              class="tw-text-error-500 tw-text-sm tw-mt-2"
+            >
+              {{ invalidUrlError }}
+            </p>
+          </div>
+        </div>
       </template>
     </ItemsField>
     <Button
@@ -229,32 +277,320 @@
     />
   </div>
 </template>
-<script>
-import { Button, TextInput, Icon } from '@designcrowd/fe-shared-lib';
-import TextImageFieldMixin from './TextImageField.mixin';
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, type PropType } from 'vue';
+import {
+  Button,
+  TextInput,
+  Icon,
+  ButtonGroup,
+  Toggle,
+} from '@designcrowd/fe-shared-lib';
 import ImageField from '../image-field/ImageField.vue';
 import ItemsField from '../items-field/ItemsField.vue';
 import ColorReplacementsField from '../color-replacements-field/ColorReplacementsField.vue';
 import TextareaField from '../../../content-settings/components/textarea-field/TextareaField.vue';
+import ButtonConfigurationField from '../button-configuration-field/ButtonConfigurationField.vue';
 import { textImageFieldTr } from '../../../../composables/useTranslate';
 import PersonalisationOverrideField from '../personalisation-override-field/PersonalisationOverrideField.vue';
+import type {
+  ColorReplacement,
+  LogoTheme,
+  TextMediaItem,
+  TextShapeItem,
+  Content,
+  ImagesSectionContent,
+} from '../../../../brand-page';
+import {
+  MAX_DESCRIPTION_LENGTH,
+  MAX_LENGTH_ERROR_MESSAGE,
+  MAX_TITLE_LENGTH,
+  INVALID_URL_MESSAGE,
+  BRAND_PAGE_TYPES,
+  ALIGN_LEFT_ALIGNED,
+  ALIGN_RIGHT_ALIGNED,
+  CONTENT_TYPES,
+  MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH,
+} from '../../../../brand-page';
+import type { DebounceHandle } from 'lodash.debounce';
+import debounce from 'lodash.debounce';
+import type { UpdateItemValuePayload } from '../../models';
+import cloneDeep from 'lodash.clonedeep';
+import { isURL } from '../../../../utils/validator.util';
+
+const DEBOUNCE_IN_MS = 250;
+
+interface Props {
+  id: string;
+  name: string;
+  content: Content;
+  value: TextMediaItem[];
+  maxLength?: number;
+  logoTheme: LogoTheme;
+  settings: any;
+  isAdmin: boolean;
+  brandPageType?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxLength: undefined,
+  brandPageType: BRAND_PAGE_TYPES.brandSite,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [payload: UpdateItemValuePayload<TextMediaItem[]>];
+  'on-intent-image-replace': [
+    payload: {
+      id: string;
+      name: string;
+      index: number;
+      value: string;
+    },
+  ];
+}>();
+
+const changeDebounce = ref<DebounceHandle | undefined>();
+const options = ref<(TextMediaItem | TextShapeItem)[]>([]);
+const maxLengthError = ref(MAX_LENGTH_ERROR_MESSAGE());
+const invalidUrlError = ref(INVALID_URL_MESSAGE());
+const titleLength = ref(MAX_TITLE_LENGTH);
+const urlError = ref<Record<number, boolean>>({});
+const mediaType = ref<string | undefined>();
+const descriptionLength = ref(MAX_DESCRIPTION_LENGTH);
+const maxItemsLength = ref(0);
+const preservedButtonTexts = ref<Record<number, string>>({});
+const preservedImageLinks = ref<Record<number, string>>({});
+
+const items = computed(() => {
+  if (
+    props.maxLength &&
+    props.maxLength > 2 &&
+    props.content.type === CONTENT_TYPES['images-section']
+  ) {
+    const imagesSectionContent = props.content as ImagesSectionContent;
 
-export default {
-  components: {
-    Button,
-    ItemsField,
-    TextInput,
-    ImageField,
-    Icon,
-    ColorReplacementsField,
-    TextareaField,
-    PersonalisationOverrideField,
+    if (
+      [ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED].some(
+        (s) => imagesSectionContent.displayStyle === s,
+      )
+    ) {
+      setMaxLayoutLength(MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH);
+
+      return props.value.length > 3
+        ? props.value.slice(0, MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH)
+        : props.value;
+    }
+  }
+
+  if (props.maxLength) {
+    setMaxLayoutLength(props.maxLength);
+  }
+
+  return props.value;
+});
+
+const isShape = (item: TextMediaItem | TextShapeItem): boolean => {
+  return item.mediaType === 'shape';
+};
+
+const setMaxLayoutLength = (value: number) => {
+  maxItemsLength.value = value;
+};
+
+const onItemsDelete = (index: number) => {
+  options.value = options.value.filter((_o, i) => i !== index);
+
+  if (changeDebounce.value) {
+    changeDebounce.value();
+  }
+
+  const payload: UpdateItemValuePayload<TextMediaItem[]> = {
+    id: props.id,
+    name: props.name,
+    value: cloneDeep(options.value) as TextMediaItem[],
+  };
+
+  emit('update:modelValue', payload);
+};
+
+const onAddNewItem = () => {
+  addOption();
+};
+
+const addOption = (): void => {
+  options.value.push({
+    paragraph: '',
+    title: '',
+    imageUrl: '',
+    imageTitle: '',
+    height: -1,
+    width: -1,
+    mediaType: (mediaType.value as 'image' | 'shape') || 'image',
+    imageLink: false,
+    itemsId: -1,
+    buttonText: false,
+    pageSlug: '',
+    buttonLinkType: 'url',
+    url: '',
+    email: '',
+    tel: '',
+  });
+
+  if (changeDebounce.value) {
+    changeDebounce.value();
+  }
+};
+
+const emitChange = (): void => {
+  const payload: UpdateItemValuePayload<TextMediaItem[]> = {
+    id: props.id,
+    name: props.name,
+    value: options.value as TextMediaItem[],
+  };
+
+  emit('update:modelValue', payload);
+};
+
+const onItemsChange = (items: TextMediaItem[]) => {
+  options.value = items;
+
+  if (changeDebounce.value) {
+    changeDebounce.value();
+  }
+};
+
+const onReplaceImage = (index: number, imageUrl: string) => {
+  emit('on-intent-image-replace', {
+    id: props.id,
+    name: props.name,
+    index,
+    value: imageUrl,
+  });
+};
+
+const onRemoveImage = (index: number) => {
+  options.value[index].imageUrl = '';
+  (options.value[index] as TextShapeItem).colorReplacements =
+    [] as ColorReplacement[];
+  emitChange();
+};
+
+const onColorReplacementsChange = (
+  payload: UpdateItemValuePayload<ColorReplacement[]>,
+  index: number,
+) => {
+  (options.value[index] as TextShapeItem).colorReplacements = payload.value;
+  emitChange();
+};
+
+const onValueChange = (value: string, index: number) => {
+  if (!value.includes('https')) {
+    options.value[index].imageLink = `https://${value}`;
+  }
+
+  urlError.value[index] = isURL(value);
+};
+
+const checkUrl = (index: number) => {
+  return urlError.value[index] !== undefined ? urlError.value[index] : true;
+};
+
+const onTextAreaTextChange = (
+  payload: {
+    id: string;
+    name: string;
+    value: string;
   },
-  mixins: [TextImageFieldMixin],
-  setup() {
-    return {
-      textImageFieldTr,
-    };
+  index: number,
+) => {
+  options.value[index].paragraph = payload.value;
+};
+
+const onPersonalisationOverrideChange = (
+  payload: {
+    id: string;
+    name: string;
+    value: string;
   },
+  index: number,
+) => {
+  (options.value[index] as any)[payload.name] = payload.value;
+  emitChange();
 };
+
+const onButtonConfigUpdate = (buttonConfig: any, index: number): void => {
+  const currentOption = options.value[index];
+
+  if (
+    buttonConfig.buttonText === false &&
+    typeof currentOption.buttonText === 'string'
+  ) {
+    preservedButtonTexts.value[index] = currentOption.buttonText;
+  }
+
+  if (
+    buttonConfig.buttonText === '' &&
+    currentOption.buttonText === false &&
+    preservedButtonTexts.value[index]
+  ) {
+    buttonConfig.buttonText = preservedButtonTexts.value[index];
+  }
+
+  if (buttonConfig.buttonTextStyle) {
+    delete buttonConfig.buttonTextStyle;
+  }
+
+  Object.assign(currentOption, buttonConfig);
+  emitChange();
+};
+
+const onImageLinkToggleChange = (enabled: boolean, index: number): void => {
+  const currentOption = options.value[index];
+
+  if (enabled) {
+    if (preservedImageLinks.value[index]) {
+      options.value[index].imageLink = preservedImageLinks.value[index];
+    } else if (currentOption.imageLink === false) {
+      options.value[index].imageLink = '';
+    }
+  } else {
+    if (
+      typeof currentOption.imageLink === 'string' &&
+      currentOption.imageLink.trim() !== ''
+    ) {
+      preservedImageLinks.value[index] = currentOption.imageLink;
+    }
+    options.value[index].imageLink = false;
+  }
+  emitChange();
+};
+
+onMounted(() => {
+  options.value = cloneDeep(props.value);
+  mediaType.value = props.settings.replaceImageSettings.mediaType;
+  options.value = options.value.map((o) => ({
+    ...o,
+    mediaType: mediaType.value,
+    imageLink: o.imageLink !== undefined ? o.imageLink : false,
+    buttonText: o.buttonText !== undefined ? o.buttonText : false,
+    buttonLinkType: o.buttonLinkType || 'url',
+    url: o.url || '',
+    email: o.email || '',
+    tel: o.tel || '',
+  })) as (TextMediaItem | TextShapeItem)[];
+
+  if (!changeDebounce.value) {
+    changeDebounce.value = debounce(emitChange, DEBOUNCE_IN_MS);
+  }
+});
+
+watch(
+  options,
+  () => {
+    if (changeDebounce.value) {
+      changeDebounce.value();
+    }
+  },
+  { deep: true },
+);
 </script>

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

@@ -4,13 +4,28 @@
     "shapeColor" : "Formfarbe",
     "imageCaptionPlaceholder" : "Bildunterschrift hinzufügen",
     "imageLink" : "Bildlink",
-    "imageCaption" : "Bildunterschrift",
+    "imageCaption" : "Bild-Popup-Beschriftung",
+    "imageCaptionSub" : "Diese Bildunterschrift erscheint nur im Bild-Pop-up",
     "addTitlePlaceholder" : "Titel hinzufügen",
     "title" : "Titel",
     "addParagraphPlaceholder" : "Absatz hinzufügen",
     "paragraph" : "Absatz",
     "addItemLabel" : "Artikel hinzufügen",
     "image" : "Bild",
-    "shape" : "Form"
+    "shape" : "Form",
+    "none" : "Keine",
+    "popup" : "Pop-up",
+    "openLink" : "Link öffnen",
+    "imageBehaviour" : "Bildverhalten",
+    "button" : "Schaltfläche",
+    "buttonText" : "Schaltflächentext",
+    "getStarted" : "Los geht’s",
+    "buttonLink" : "Schaltflächen-Link",
+    "url" : "URL",
+    "email" : "E-Mail-Adresse",
+    "telephone" : "Telefonnummer",
+    "buttonTextStyleLabel" : "Schaltflächentextstil",
+    "selectPage" : "Eine Seite auswählen",
+    "page" : "Seite"
   }
-}
+}

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

@@ -4,13 +4,28 @@
     "shapeColor" : "Color de forma",
     "imageCaptionPlaceholder" : "Añade pie de foto",
     "imageLink" : "Enlace de imagen",
-    "imageCaption" : "Pie de imagen",
+    "imageCaption" : "Pie de foto en ventana emergente",
+    "imageCaptionSub" : "Este pie de foto solo aparece en la ventana emergente de la imagen",
     "addTitlePlaceholder" : "Añadir título",
     "title" : "Título",
     "addParagraphPlaceholder" : "Añadir párrafo",
     "paragraph" : "Párrafo",
     "addItemLabel" : "Añadir artículo",
     "image" : "Imagen",
-    "shape" : "Forma"
+    "shape" : "Forma",
+    "none" : "Ninguno",
+    "popup" : "Ventana emergente",
+    "openLink" : "Abrir enlace",
+    "imageBehaviour" : "Comportamiento de la imagen",
+    "button" : "Botón",
+    "buttonText" : "Texto del botón",
+    "getStarted" : "Comienza",
+    "buttonLink" : "Enlace de botón",
+    "url" : "URL",
+    "email" : "Dirección de correo electrónico",
+    "telephone" : "Número de teléfono",
+    "buttonTextStyleLabel" : "Estilo del texto del botón",
+    "selectPage" : "Selecciona una página",
+    "page" : "Página"
   }
-}
+}

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

@@ -4,13 +4,28 @@
     "shapeColor" : "Couleur de forme",
     "imageCaptionPlaceholder" : "Ajouter une légende d'image",
     "imageLink" : "Lien d'image",
-    "imageCaption" : "Légende d'image",
+    "imageCaption" : "Légende de l’image contextuelle",
+    "imageCaptionSub" : "Cette légende n'apparaît que dans la fenêtre contextuelle de l'image",
     "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" : "Fenêtre contextuelle",
+    "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 courriel",
+    "telephone" : "Numéro de téléphone",
+    "buttonTextStyleLabel" : "Style de texte des boutons",
+    "selectPage" : "Sélectionnez une page",
+    "page" : "Page"
   }
-}
+}