lau-ecom-design-system 1.0.19 → 1.0.20

package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue

@@ -1,168 +1,178 @@
-<script lang="ts" setup>
-import { onBeforeMount, ref } from "vue";
-import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
-import LauEcomTextButton from "../LauEcomTextButton/LauEcomTextButton.vue";
-import { getCookie, acceptAllCookies } from "../../utils/Cookies";
-import LauEcomBannerCookiesConfig from "./LauEcomBannerCookiesConfig.vue";
-import { CategoryCookie } from "./types";
-import { COOKIE_CONSENT, CookieItemKey } from "../../utils";
-
-interface Props {
-  isVisible?: boolean;
-  categoryCookies?: CategoryCookie[] | null;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isVisible: true,
-  categoryCookies: () => {
-    return [
-      {
-        title: "Esenciales",
-        description:
-          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-        isChecked: false,
-        isDisabled: false,
-      },
-      {
-        title: "Preferencias",
-        description:
-          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-        isChecked: false,
-        isDisabled: false,
-      },
-      {
-        id: CookieItemKey.statistics,
-        title: "Estadisticas",
-        description:
-          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-        isChecked: true,
-        isDisabled: false,
-      },
-      {
-        id: CookieItemKey.marketing,
-        title: "Marketing",
-        description:
-          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-        isChecked: true,
-        isDisabled: false,
-      },
-    ];
-  },
-});
-
-const isConfigOpen = ref(false);
-const isBannerVisible = ref(props.isVisible);
-
-const emit = defineEmits([
-  "onConfigCookies",
-  "onAccept",
-  "onAcceptAll",
-  "onReject",
-  "onAcceptSelected",
-  "onAcceptAll",
-  "onClose",
-]);
-
-onBeforeMount(() => {
-  const cookieConsent = getCookie(COOKIE_CONSENT);
-  if (cookieConsent) isBannerVisible.value = false;
-});
-
-const handleConfigCookies = () => {
-  isConfigOpen.value = !isConfigOpen.value;
-  emit("onConfigCookies");
-};
-
-const handleAccept = () => {
-  acceptAllCookies();
-  emit("onAccept");
-  isBannerVisible.value = false;
-};
-
-const handleConfigClose = () => {
-  emit("onClose");
-  isConfigOpen.value = false;
-};
-
-const closeCookiesBanner = () => {
-  isConfigOpen.value = false;
-  isBannerVisible.value = false;
-};
-
-const handleReject = () => {
-  emit("onReject");
-  closeCookiesBanner();
-};
-
-const handleAcceptSelected = () => {
-  emit("onAcceptSelected");
-  closeCookiesBanner();
-};
-
-const handleAcceptAll = () => {
-  emit("onAcceptAll");
-  closeCookiesBanner();
-};
-</script>
-
-<template>
-  <div v-if="isBannerVisible">
-    <div v-if="!isConfigOpen" class="lau-ecom-cookies lau-ecom-cookies--upc">
-      <p class="lau-ecom-text lau-ecom-text--upc core-font-body-reg-04-16px">
-        Este sitio web utiliza cookies gracias a esto podemos personalizar los
-        ingresos a la web en futuras visitas y brindarte una mejor experiencia
-        dentro de nuestro sitio.
-        <a class="core-font-link-02-16px dsEcom-text-link-60">Conoce más</a>
-      </p>
-      <div class="lau-ecom-buttons">
-        <LauEcomTextButton @on-click="handleConfigCookies">
-          Configurar cookies
-        </LauEcomTextButton>
-        <LauEcomButton @on-click="handleAccept"> Aceptar </LauEcomButton>
-      </div>
-    </div>
-    <LauEcomBannerCookiesConfig
-      v-else
-      :category-cookies="categoryCookies"
-      @on-accept-all="handleAcceptAll"
-      @on-reject="handleReject"
-      @on-accept-selected="handleAcceptSelected"
-      @on-close="handleConfigClose"
-    />
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-cookies {
-  @apply dsEcom-w-full
-    dsEcom-py-[32px]
-    dsEcom-px-[64px]
-    dsEcom-flex
-    dsEcom-justify-between
-    dsEcom-items-center
-    dsEcom-gap-20
-    dsEcom-shadow-upc-shadow-prominent
-    mobiles:dsEcom-flex-col
-    mobiles:dsEcom-px-[24px];
-}
-
-.lau-ecom-cookies--upc {
-  @apply dsEcom-text-neutral-20;
-}
-
-.lau-ecom-text {
-  @apply dsEcom-block
-    dsEcom-w-[883px]
-    mobiles:dsEcom-w-full;
-}
-
-.lau-ecom-text--upc {
-  @apply dsEcom-text-neutral-90;
-}
-
-.lau-ecom-buttons {
-  @apply dsEcom-flex
-    dsEcom-gap-8
-    mobiles:dsEcom-self-end;
-}
-</style>
+<script lang="ts" setup>
+import { onBeforeMount, onMounted, ref } from "vue";
+import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
+import LauEcomTextButton from "../LauEcomTextButton/LauEcomTextButton.vue";
+import { getCookie, acceptAllCookies } from "../../utils/Cookies";
+import LauEcomBannerCookiesConfig from "./LauEcomBannerCookiesConfig.vue";
+import { CategoryCookie } from "./types";
+import { COOKIE_CONSENT, CookieItemKey } from "../../utils";
+
+interface Props {
+  isVisible?: boolean;
+  categoryCookies?: CategoryCookie[] | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isVisible: true,
+  categoryCookies: () => {
+    return [
+      {
+        title: "Esenciales",
+        description:
+          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: false,
+        isDisabled: false,
+        onToggle: (value: boolean) => {
+          console.log("firstSwitch: " + value);
+        },
+      },
+      {
+        title: "Preferencias",
+        description:
+          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: false,
+        isDisabled: false,
+        onToggle: () => {},
+      },
+      {
+        id: CookieItemKey.statistics,
+        title: "Estadisticas",
+        description:
+          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: true,
+        isDisabled: false,
+        onToggle: () => {},
+      },
+      {
+        id: CookieItemKey.marketing,
+        title: "Marketing",
+        description:
+          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: true,
+        isDisabled: false,
+        onToggle: () => {},
+      },
+    ];
+  },
+});
+
+const isConfigOpen = ref(false);
+const isBannerVisible = ref(props.isVisible);
+
+const emit = defineEmits([
+  "onConfigCookies",
+  "onDisplayBanner",
+  "onAccept",
+  "onAcceptAll",
+  "onReject",
+  "onAcceptSelected",
+  "onClose",
+]);
+
+onBeforeMount(() => {
+  const cookieConsent = getCookie(COOKIE_CONSENT);
+  if (cookieConsent) isBannerVisible.value = false;
+});
+
+onMounted(() => {
+  emit("onDisplayBanner");
+});
+
+const handleConfigCookies = () => {
+  isConfigOpen.value = !isConfigOpen.value;
+  emit("onConfigCookies");
+};
+
+const handleAccept = () => {
+  acceptAllCookies();
+  emit("onAccept");
+  isBannerVisible.value = false;
+};
+
+const handleConfigClose = () => {
+  emit("onClose");
+  isConfigOpen.value = false;
+};
+
+const closeCookiesBanner = () => {
+  isConfigOpen.value = false;
+  isBannerVisible.value = false;
+};
+
+const handleReject = () => {
+  emit("onReject");
+  closeCookiesBanner();
+};
+
+const handleAcceptSelected = () => {
+  emit("onAcceptSelected");
+  closeCookiesBanner();
+};
+
+const handleAcceptAll = () => {
+  emit("onAcceptAll");
+  closeCookiesBanner();
+};
+</script>
+
+<template>
+  <div v-if="isBannerVisible">
+    <div v-if="!isConfigOpen" class="lau-ecom-cookies lau-ecom-cookies--upc">
+      <p class="lau-ecom-text lau-ecom-text--upc core-font-body-reg-04-16px">
+        Este sitio web utiliza cookies gracias a esto podemos personalizar los
+        ingresos a la web en futuras visitas y brindarte una mejor experiencia
+        dentro de nuestro sitio.
+        <a class="core-font-link-02-16px dsEcom-text-link-60">Conoce más</a>
+      </p>
+      <div class="lau-ecom-buttons">
+        <LauEcomTextButton @on-click="handleConfigCookies">
+          Configurar cookies
+        </LauEcomTextButton>
+        <LauEcomButton @on-click="handleAccept"> Aceptar </LauEcomButton>
+      </div>
+    </div>
+    <LauEcomBannerCookiesConfig
+      v-else
+      :category-cookies="categoryCookies"
+      @on-accept-all="handleAcceptAll"
+      @on-reject="handleReject"
+      @on-accept-selected="handleAcceptSelected"
+      @on-close="handleConfigClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-cookies {
+  @apply dsEcom-w-full
+    dsEcom-py-[32px]
+    dsEcom-px-[64px]
+    dsEcom-flex
+    dsEcom-justify-between
+    dsEcom-items-center
+    dsEcom-gap-20
+    dsEcom-shadow-upc-shadow-prominent
+    mobiles:dsEcom-flex-col
+    mobiles:dsEcom-px-[24px];
+}
+
+.lau-ecom-cookies--upc {
+  @apply dsEcom-text-neutral-20;
+}
+
+.lau-ecom-text {
+  @apply dsEcom-block
+    dsEcom-w-[883px]
+    mobiles:dsEcom-w-full;
+}
+
+.lau-ecom-text--upc {
+  @apply dsEcom-text-neutral-90;
+}
+
+.lau-ecom-buttons {
+  @apply dsEcom-flex
+    dsEcom-gap-8
+    mobiles:dsEcom-self-end;
+}
+</style>

package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue

@@ -1,159 +1,160 @@
-<script lang="ts" setup>
-import { ref } from "vue";
-import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
-import { LauEcomButtonType } from "../LauEcomButton/types";
-import { LauEcomCoreIconNavClose } from "../LauEcomIcon";
-import LauEcomBannerCookiesConfigAccordion from "./LauEcomBannerCookiesConfigAccordion.vue";
-import { CategoryCookie } from "./types";
-import {
-  acceptAllCookies,
-  acceptCookiesSelected,
-  CookieItemKey,
-  CookieOption,
-  rejectCookies,
-} from "../../utils";
-
-interface Props {
-  categoryCookies?: CategoryCookie[] | null;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  categoryCookies: null,
-});
-
-const items = ref(props.categoryCookies);
-
-const emit = defineEmits([
-  "onClose",
-  "onReject",
-  "onAcceptSelected",
-  "onAcceptAll",
-]);
-
-const handleCloseConfig = () => {
-  emit("onClose");
-};
-
-const handleReject = () => {
-  rejectCookies();
-  emit("onReject");
-};
-
-const handleAcceptSelected = () => {
-  let analyticsStorageOption;
-  let adStorageOption;
-
-  const analyticsStorageIndex = items.value?.findIndex(
-    (item) => item.id === CookieItemKey.statistics,
-  );
-  if (analyticsStorageIndex) {
-    analyticsStorageOption = items.value![analyticsStorageIndex].isChecked
-      ? CookieOption.granted
-      : CookieOption.denied;
-  }
-
-  const adStorageIndex = items.value?.findIndex(
-    (item) => item.id === CookieItemKey.marketing,
-  );
-  if (adStorageIndex) {
-    adStorageOption = items.value![adStorageIndex].isChecked
-      ? CookieOption.granted
-      : CookieOption.denied;
-  }
-
-  acceptCookiesSelected(analyticsStorageOption!, adStorageOption!);
-  emit("onAcceptSelected");
-};
-
-const handleAcceptAll = () => {
-  acceptAllCookies();
-  emit("onAcceptAll");
-};
-</script>
-
-<template>
-  <div
-    class="lau-ecom-banner-cookies-config lau-ecom-banner-cookies-config--upc"
-  >
-    <div class="lau-ecom-config-head lau-ecom-config-head--upc">
-      <p class="upc-font-subtitle-03-20px">Configuracion de cookies</p>
-      <button @click="handleCloseConfig">
-        <span><LauEcomCoreIconNavClose /></span>
-      </button>
-    </div>
-    <div>
-      <LauEcomBannerCookiesConfigAccordion
-        v-for="(item, index) in items"
-        :key="`cookie-config-${index + 1}`"
-        v-model="item.isChecked"
-        :category-cookie="item"
-      />
-    </div>
-    <div class="lau-ecom-banner-cookies-buttons">
-      <LauEcomButton
-        class="!dsEcom-w-full mobiles:dsEcom-order-last"
-        :type="LauEcomButtonType.Secondary"
-        @on-click="handleReject"
-      >
-        Rechazar
-      </LauEcomButton>
-      <LauEcomButton
-        class="!dsEcom-w-full"
-        :type="LauEcomButtonType.Secondary"
-        @on-click="handleAcceptSelected"
-      >
-        Aceptar seleccionadas
-      </LauEcomButton>
-      <LauEcomButton
-        class="!dsEcom-w-full mobiles:dsEcom-order-first"
-        @on-click="handleAcceptAll"
-      >
-        Aceptar todas
-      </LauEcomButton>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-banner-cookies-config {
-  @apply dsEcom-flex
-    dsEcom-flex-col
-    dsEcom-gap-10
-    dsEcom-absolute
-    dsEcom-top-1/2
-    dsEcom-left-1/2
-    dsEcom-transform
-    -dsEcom-translate-x-1/2
-    -dsEcom-translate-y-1/2
-    dsEcom-pt-6
-    dsEcom-pb-8
-    dsEcom-px-6
-    dsEcom-w-[584px]
-    dsEcom-h-auto
-    dsEcom-shadow-upc-shadow-prominent
-    mobiles:dsEcom-gap-8
-    mobiles:dsEcom-w-[360px];
-}
-
-.lau-ecom-banner-cookies-config--upc {
-  @apply dsEcom-text-neutral-100;
-}
-
-.lau-ecom-config-head {
-  @apply dsEcom-flex 
-    dsEcom-justify-between 
-    dsEcom-items-center;
-}
-
-.lau-ecom-config-head--upc {
-  @apply dsEcom-text-secondary-60;
-}
-
-.lau-ecom-banner-cookies-buttons {
-  @apply dsEcom-flex
-    dsEcom-justify-between
-    dsEcom-items-center
-    dsEcom-gap-4
-    mobiles:dsEcom-flex-col;
-}
-</style>
+<script lang="ts" setup>
+import { ref } from "vue";
+import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
+import { LauEcomButtonType } from "../LauEcomButton/types";
+import { LauEcomCoreIconNavClose } from "../LauEcomIcon";
+import LauEcomBannerCookiesConfigAccordion from "./LauEcomBannerCookiesConfigAccordion.vue";
+import { CategoryCookie } from "./types";
+import {
+  acceptAllCookies,
+  acceptCookiesSelected,
+  CookieItemKey,
+  CookieOption,
+  rejectCookies,
+} from "../../utils";
+
+interface Props {
+  categoryCookies?: CategoryCookie[] | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  categoryCookies: null,
+});
+
+const items = ref(props.categoryCookies);
+
+const emit = defineEmits([
+  "onClose",
+  "onReject",
+  "onAcceptSelected",
+  "onAcceptAll",
+]);
+
+const handleCloseConfig = () => {
+  emit("onClose");
+};
+
+const handleReject = () => {
+  rejectCookies();
+  emit("onReject");
+};
+
+const handleAcceptSelected = () => {
+  let analyticsStorageOption;
+  let adStorageOption;
+
+  const analyticsStorageIndex = items.value?.findIndex(
+    (item) => item.id === CookieItemKey.statistics,
+  );
+  if (analyticsStorageIndex) {
+    analyticsStorageOption = items.value![analyticsStorageIndex].isChecked
+      ? CookieOption.granted
+      : CookieOption.denied;
+  }
+
+  const adStorageIndex = items.value?.findIndex(
+    (item) => item.id === CookieItemKey.marketing,
+  );
+  if (adStorageIndex) {
+    adStorageOption = items.value![adStorageIndex].isChecked
+      ? CookieOption.granted
+      : CookieOption.denied;
+  }
+
+  acceptCookiesSelected(analyticsStorageOption!, adStorageOption!);
+  emit("onAcceptSelected");
+};
+
+const handleAcceptAll = () => {
+  acceptAllCookies();
+  emit("onAcceptAll");
+};
+</script>
+
+<template>
+  <div
+    class="lau-ecom-banner-cookies-config lau-ecom-banner-cookies-config--upc"
+  >
+    <div class="lau-ecom-config-head lau-ecom-config-head--upc">
+      <p class="upc-font-subtitle-03-20px">Configuracion de cookies</p>
+      <button @click="handleCloseConfig">
+        <span><LauEcomCoreIconNavClose /></span>
+      </button>
+    </div>
+    <div>
+      <LauEcomBannerCookiesConfigAccordion
+        v-for="(item, index) in items"
+        :key="`cookie-config-${index + 1}`"
+        v-model="item.isChecked"
+        :category-cookie="item"
+        @on-toggle="item.onToggle"
+      />
+    </div>
+    <div class="lau-ecom-banner-cookies-buttons">
+      <LauEcomButton
+        class="!dsEcom-w-full mobiles:dsEcom-order-last"
+        :type="LauEcomButtonType.Secondary"
+        @on-click="handleReject"
+      >
+        Rechazar
+      </LauEcomButton>
+      <LauEcomButton
+        class="!dsEcom-w-full"
+        :type="LauEcomButtonType.Secondary"
+        @on-click="handleAcceptSelected"
+      >
+        Aceptar seleccionadas
+      </LauEcomButton>
+      <LauEcomButton
+        class="!dsEcom-w-full mobiles:dsEcom-order-first"
+        @on-click="handleAcceptAll"
+      >
+        Aceptar todas
+      </LauEcomButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-banner-cookies-config {
+  @apply dsEcom-flex
+    dsEcom-flex-col
+    dsEcom-gap-10
+    dsEcom-absolute
+    dsEcom-top-1/2
+    dsEcom-left-1/2
+    dsEcom-transform
+    -dsEcom-translate-x-1/2
+    -dsEcom-translate-y-1/2
+    dsEcom-pt-6
+    dsEcom-pb-8
+    dsEcom-px-6
+    dsEcom-w-[584px]
+    dsEcom-h-auto
+    dsEcom-shadow-upc-shadow-prominent
+    mobiles:dsEcom-gap-8
+    mobiles:dsEcom-w-[360px];
+}
+
+.lau-ecom-banner-cookies-config--upc {
+  @apply dsEcom-text-neutral-100;
+}
+
+.lau-ecom-config-head {
+  @apply dsEcom-flex 
+    dsEcom-justify-between 
+    dsEcom-items-center;
+}
+
+.lau-ecom-config-head--upc {
+  @apply dsEcom-text-secondary-60;
+}
+
+.lau-ecom-banner-cookies-buttons {
+  @apply dsEcom-flex
+    dsEcom-justify-between
+    dsEcom-items-center
+    dsEcom-gap-4
+    mobiles:dsEcom-flex-col;
+}
+</style>