@weni/unnnic-system 3.2.3 → 3.2.5-alpha.0

package/src/components/TemplatePreview/TemplatePreview.vue

@@ -0,0 +1,249 @@
+<template>
+  <section class="unnnic-template-preview">
+    <section
+      :class="[
+        'unnnic-template-preview__content',
+        { 'unnnic-template-preview__content--has-media': hasHeaderMedia },
+      ]"
+    >
+      <header
+        v-if="hasHeader"
+        :class="`unnnic-template-preview__header__${
+          template?.header.type === 'TEXT' ? 'text' : 'media'
+        }`"
+      >
+        <img
+          class="unnnic-template-preview__header__media__preview"
+          v-if="
+            template?.header.type === 'MEDIA' &&
+            template?.header.mediaType === 'IMAGE'
+          "
+          :src="template.header.src || imagePreview"
+        />
+        <template
+          v-else-if="
+            template?.header.type === 'MEDIA' &&
+            template?.header.mediaType === 'VIDEO'
+          "
+        >
+          <video
+            v-if="template.header.src"
+            class="unnnic-template-preview__header__media__preview"
+            :src="template.header.src"
+            controls
+          />
+          <img
+            v-else
+            class="unnnic-template-preview__header__media__preview"
+            :src="videoPreview"
+          />
+        </template>
+        <template
+          v-else-if="
+            template?.header.type === 'MEDIA' &&
+            template?.header.mediaType === 'DOCUMENT'
+          "
+        >
+          <img
+            class="unnnic-template-preview__header__media__preview"
+            :src="documentPreview"
+          />
+        </template>
+        <h1
+          class="unnnic-template-preview__header__text__preview"
+          v-else-if="template?.header.type === 'TEXT'"
+        >
+          {{ template.header.text }}
+        </h1>
+      </header>
+      <section
+        v-if="hasBody"
+        :class="[
+          'unnnic-template-preview__body',
+          { 'unnnic-template-preview__body--has-media': hasHeaderMedia },
+        ]"
+      >
+        <section v-html="parsedBody"></section>
+      </section>
+      <footer
+        v-if="hasFooter"
+        :class="[
+          'unnnic-template-preview__footer',
+          { 'unnnic-template-preview__footer--has-media': hasHeaderMedia },
+        ]"
+      >
+        {{ template?.footer }}
+      </footer>
+    </section>
+    <footer v-if="hasButtons" class="unnnic-template-preview__buttons">
+      <section
+        v-for="(button, index) in template?.buttons"
+        :key="`button-${index}`"
+        class="unnnic-template-preview__buttons__button"
+      >
+        <UnnnicIcon
+          class="unnnic-template-preview__buttons__button__icon"
+          :icon="getButtonIcon(button.type)"
+          scheme="aux-blue-500"
+          size="ant"
+        />
+        <p class="unnnic-template-preview__buttons__button__text">
+          {{ button.text }}
+        </p>
+      </section>
+    </footer>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+import type { Template } from "./types";
+
+import imagePreview from "../../assets/img/previews/image-preview.png";
+import documentPreview from "../../assets/img/previews/doc-preview.png";
+import videoPreview from "../../assets/img/previews/video-preview.png";
+
+import UnnnicIcon from "../Icon.vue";
+
+interface Props {
+  template?: Template | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  template: null,
+});
+
+const hasHeader = computed(
+  () => props.template?.header && props.template.header.type
+);
+const hasHeaderMedia = computed(
+  () => !!props.template?.header && props.template.header.type === "MEDIA"
+);
+const hasBody = computed(
+  () => !!props.template?.body && props.template.body.length > 0
+);
+const hasFooter = computed(
+  () => !!props.template?.footer && props.template.footer.length > 0
+);
+const hasButtons = computed(
+  () => !!props.template?.buttons && props.template.buttons.length > 0
+);
+const parsedBody = computed(() => {
+  if (!hasBody.value) return "";
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const result = props
+    .template!.body!.replaceAll("\n", "<br/>")
+    .replaceAll(/(?:\*)([^*<\n]+)(?:\*)/g, "<strong>$1</strong>")
+    .replaceAll(/(?:_)([^_<\n]+)(?:_)/g, "<i>$1</i>")
+    .replaceAll(/(?:~)([^~<\n]+)(?:~)/g, "<s>$1</s>")
+    .replaceAll(/(?:```)([^```<\n]+)(?:```)/g, "<tt>$1</tt>")
+    .replaceAll(/{{.*?}}/g, (match) => `<strong>${match}</strong>`);
+
+  return result;
+});
+
+const getButtonIcon = (buttonType) => {
+  const buttonMapper = {
+    PHONE_NUMBER: "phone",
+    URL: "open_in_new",
+    COPY_CODE: "content_copy",
+    FLOW: "",
+    QUICK_REPLY: "reply",
+  };
+
+  return buttonMapper[buttonType] || "";
+};
+</script>
+
+<style lang="scss" scoped>
+@use "@/assets/scss/unnnic" as *;
+
+.unnnic-template-preview {
+  display: flex;
+  flex-direction: column;
+  box-shadow: $unnnic-shadow-level-near;
+  background-color: $unnnic-color-background-white;
+  width: 368px;
+  border-radius: $unnnic-border-radius-md;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-space-3;
+    padding: $unnnic-space-4 $unnnic-space-3;
+
+    &--has-media {
+      padding: $unnnic-space-1;
+    }
+  }
+
+  &__header {
+    &__text {
+      &__preview {
+        font-family: $unnnic-font-family-secondary;
+        font-weight: $unnnic-font-weight-bold;
+        font-size: $unnnic-font-size-body-gt;
+        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+        color: $unnnic-color-neutral-dark;
+
+        margin: $unnnic-space-0;
+      }
+    }
+
+    &__media {
+      &__preview {
+        width: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  &__body {
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    font-size: $unnnic-font-size-body-gt;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+    color: $unnnic-color-neutral-cloudy;
+
+    &--has-media {
+      padding: $unnnic-space-0 $unnnic-space-2;
+    }
+  }
+
+  &__footer {
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    font-size: $unnnic-font-size-body-md;
+    line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
+    color: $unnnic-color-neutral-clean;
+
+    &--has-media {
+      padding: $unnnic-space-0 $unnnic-space-3 $unnnic-space-2;
+    }
+  }
+
+  &__buttons {
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-bold;
+    font-size: $unnnic-font-size-body-gt;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+
+    &__button {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: $unnnic-space-2;
+      padding: $unnnic-space-3;
+      border-top: 1px solid $unnnic-color-neutral-light;
+
+      &__text {
+        color: $unnnic-color-aux-blue-500;
+        margin: $unnnic-space-0;
+      }
+    }
+  }
+}
+</style>

package/src/components/TemplatePreview/TemplatePreviewModal.vue

@@ -0,0 +1,51 @@
+<template>
+  <UnnnicModalDialog
+    :model-value="modelValue"
+    @update:modelValue="$event === false && $emit('close')"
+    :title="defaultTranslations.title[props.locale]"
+    :show-close-icon="true"
+    class="unnnic-template-preview-modal"
+  >
+    <UnnnicTemplatePreview :template="template" />
+  </UnnnicModalDialog>
+</template>
+
+<script lang="ts" setup>
+import UnnnicTemplatePreview from "./TemplatePreview.vue";
+import UnnnicModalDialog from "../ModalDialog/ModalDialog.vue";
+
+import type { Template } from "./types";
+
+const defaultTranslations = {
+  title: {
+    "pt-br": "Visualizar modelo",
+    en: "Template preview",
+    es: "Vista previa de plantilla",
+  },
+};
+
+interface Props {
+  locale?: string;
+  template: Template;
+  modelValue: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: "en",
+});
+
+defineEmits<{
+  close: void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use "@/assets/scss/unnnic" as *;
+
+:deep(.unnnic-modal-dialog__container__content) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $unnnic-color-neutral-lightest;
+}
+</style>

package/src/components/TemplatePreview/types.d.ts

@@ -0,0 +1,16 @@
+export interface Template {
+  header: {
+    type: "TEXT" | "MEDIA";
+    mediaType?: "IMAGE" | "VIDEO" | "DOCUMENT";
+    text?: string | null;
+    src?: string | null;
+  };
+  body?: string;
+  footer?: string;
+  buttons?: Array<{
+    type: "QUICK_REPLY" | "PHONE_NUMBER";
+    text: string;
+    countryCode?: string;
+    phoneNumber?: string;
+  }>;
+}

package/src/components/index.ts

@@ -88,7 +88,9 @@ import ModalDialog from "./ModalDialog/ModalDialog.vue";
 import Tour from "./Tour/Tour.vue";
 import Navigator from "./Navigator/index.vue";
 import SelectTime from "./SelectTime/index.vue";
-import DataTable from "./DataTable/index.vue";
+import TemplatePreview from "./TemplatePreview/TemplatePreview.vue";
+import TemplatePreviewModal from "./TemplatePreview/TemplatePreviewModal.vue";
+import DataTable from './DataTable/index.vue';
 
 type VueComponent = Component;
 
@@ -187,6 +189,8 @@ export const components: ComponentsMap = {
   unnnicTour: Tour,
   unnnicNavigator: Navigator,
   unnnicSelectTime: SelectTime,
+  unnnicTemplatePreview: TemplatePreview,
+  unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
 };
 
@@ -280,8 +284,10 @@ export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
-export const unnnicDataTable = DataTable as VueComponent;
 export const unnnicSelectTime = SelectTime as VueComponent;
+export const unnnicTemplatePreview = TemplatePreview as VueComponent;
+export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
+export const unnnicDataTable = DataTable as VueComponent;
 
 export const UnnnicFontSize = fontSize;
 export const UnnnicFormElement = formElement;
@@ -373,5 +379,8 @@ export const UnnnicDrawer = Drawer;
 export const UnnnicTableNext = TableNext;
 export const UnnnicTour = Tour;
 export const UnnnicNavigator = Navigator;
-export const UnnnicDataTable = DataTable as VueComponent;
 export const UnnnicSelectTime = SelectTime as VueComponent;
+export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
+export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
+export const UnnnicDataTable = DataTable as VueComponent;
+

package/src/stories/Button.stories.js

@@ -8,7 +8,7 @@ export default {
       description: {
         component: `Allows users to perform an action or navigate to another page. 
           It has styles for various needs and are ideal for directing the user's attention. 
-          It is divided into 6 types: Primary, Secondary, Tertiary, Alternative, Warning, Attention.
+          It is divided into 5 types: Primary, Secondary, Tertiary, Warning, Attention.
           Each of these types has its states.
           <br/>
           <br/>
@@ -40,7 +40,6 @@ export default {
         'primary',
         'secondary',
         'tertiary',
-        'alternative',
         'warning',
         'attention',
       ],
@@ -114,14 +113,6 @@ export const OnlyIcon = {
   },
 };
 
-export const Alternative = {
-  args: {
-    type: 'alternative',
-    iconLeft: 'add',
-    text: 'Text',
-  },
-};
-
 export const Warning = {
   parameters: {
     docs: {

package/src/stories/TemplatePreview.stories.js

@@ -0,0 +1,94 @@
+import UnnnicTemplatePreview from "../components/TemplatePreview/TemplatePreview.vue";
+
+export default {
+  title: "example/TemplatePreview",
+  tags: ["autodocs"],
+  component: UnnnicTemplatePreview,
+};
+
+const Template = (args) => ({
+  components: { UnnnicTemplatePreview },
+  setup() {
+    return { args };
+  },
+  template: `
+      <unnnic-template-preview v-bind="args" />
+    `,
+});
+
+const bodyText =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.";
+
+export const Default = Template.bind({});
+Default.args = {
+  template: {
+    header: {
+      type: "TEXT",
+      text: "Hello, world!",
+    },
+    footer: "Weni by VTEX",
+    buttons: [
+      {
+        text: "Button 1",
+        type: "PHONE_NUMBER",
+      },
+      {
+        text: "Button 2",
+        type: "URL",
+      },
+      {
+        text: "Button 3",
+        type: "QUICK_REPLY",
+      },
+    ],
+    body: bodyText,
+  },
+};
+
+export const Image = Template.bind({});
+Image.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "IMAGE",
+    },
+    footer: "Weni by VTEX",
+    body: bodyText,
+  },
+};
+
+export const Video = Template.bind({});
+Video.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "VIDEO",
+    },
+    buttons: [
+      {
+        text: "Button 1",
+        type: "PHONE_NUMBER",
+      },
+      {
+        text: "Button 2",
+        type: "URL",
+      },
+      {
+        text: "Button 3",
+        type: "QUICK_REPLY",
+      },
+    ],
+  },
+};
+
+export const Document = Template.bind({});
+Document.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "DOCUMENT",
+    },
+    footer: "Weni by VTEX",
+    body: bodyText,
+  },
+};

package/src/stories/TemplatePreviewModal.stories.js

@@ -0,0 +1,110 @@
+import UnnnicTemplatePreviewModal from "../components/TemplatePreview/TemplatePreviewModal.vue";
+
+import { action } from "@storybook/addon-actions";
+
+export default {
+  title: "example/TemplatePreviewModal",
+  tags: ["autodocs"],
+  component: UnnnicTemplatePreviewModal,
+  argTypes: {
+    locale: {
+      control: { type: "select" },
+      options: ["pt-br", "en", "es"],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { UnnnicTemplatePreviewModal },
+  setup() {
+    const close = () => {
+      action("close")();
+      args.modelValue = false;
+    };
+    return { args, close };
+  },
+  template: `
+    <div>
+      <button @click="args.modelValue = true">Open Modal</button>
+      <unnnic-template-preview-modal v-bind="args" @close="close" />
+    </div>
+    `,
+});
+
+const bodyText =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.";
+
+export const Default = Template.bind({});
+Default.args = {
+  modelValue: false,
+  template: {
+    header: {
+      type: "TEXT",
+      text: "Hello, world!",
+    },
+    footer: "Weni by VTEX",
+    buttons: [
+      {
+        text: "Button 1",
+        type: "PHONE_NUMBER",
+      },
+      {
+        text: "Button 2",
+        type: "URL",
+      },
+      {
+        text: "Button 3",
+        type: "QUICK_REPLY",
+      },
+    ],
+    body: bodyText,
+  },
+};
+
+export const Image = Template.bind({});
+Image.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "IMAGE",
+    },
+    footer: "Weni by VTEX",
+    body: bodyText,
+  },
+};
+
+export const Video = Template.bind({});
+Video.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "VIDEO",
+    },
+    buttons: [
+      {
+        text: "Button 1",
+        type: "PHONE_NUMBER",
+      },
+      {
+        text: "Button 2",
+        type: "URL",
+      },
+      {
+        text: "Button 3",
+        type: "QUICK_REPLY",
+      },
+    ],
+  },
+};
+
+export const Document = Template.bind({});
+Document.args = {
+  template: {
+    header: {
+      type: "MEDIA",
+      mediaType: "DOCUMENT",
+    },
+    footer: "Weni by VTEX",
+    body: bodyText,
+  },
+};