@tiddh/brave-vue 1.93.268 → 1.93.270

package/dist/src/components/Avatar/elements/CustomizationView.vue

@@ -1,846 +1,850 @@
-<template>
-  <div>
-    <link
-      rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
-      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
-      crossorigin="anonymous"
-    />
-    <div class="mobile-tooltip" @click="removeTooltip">
-      <div class="tooltip">
-        Lorem ipsum dolor sit amet, eum ne sale vidit epicuri, usu populo
-        incorrupte ex. His falli intellegebat no.
-        <i class="fas fa-times"></i>
-      </div>
-    </div>
-    <CustomizationPreview
-      :customizations="customizations"
-      :selected-character="selectedCharacter"
-      :character-height="characterHeight ? characterHeight : null"
-      :gradient-colors="gradient_colors"
-      :character-slug="custom_properties.slug"
-      :characterHeight="1"
-      :dir="dir"
-    />
-    <CustomizationPanel
-      :builder-api="builder_api"
-      :selected-character="selectedCharacter"
-      :character-name="custom_properties.user_data.properties.nome.value"
-      :subscription-id="'1'"
-      :stack-id="'1'"
-      :character-slug="custom_properties.slug"
-      :character-id="characterId"
-      :character-type-id="characterTypeId"
-      :character-is-male="custom_properties.is_male"
-      :categories-assets="categoriesAssets"
-      :disabled-categories="disabledCategories"
-      :customizations="customizations"
-      :builder-product-id="
-        builderProductId ? builderProductId : this.custom_properties.product_id
-      "
-      :userDataProperties="custom_properties.user_data.properties"
-      :builderLayoutId="builderLayoutId"
-      :language="language"
-      :typeLanguage="typeLanguage"
-      :dir="dir"
-      :builder_apk="builder_apk"
-      @update:customization="handleCustomization"
-      @startedMethod="startedMethod"
-      @completedMethod="completedMethod"
-    />
-  </div>
-</template>
-
-<script>
-const axios = require("axios");
-import sort from "array-sort";
-import CustomizationPanel from "./CustomizationPanel.vue";
-import CustomizationPreview from "./CustomizationPreview.vue";
-
-export default {
-  name: "CustomizationView",
-  components: {
-    CustomizationPanel,
-    CustomizationPreview,
-  },
-  props: {
-    custom_properties: {
-      type: Object,
-      required: true,
-    },
-    builder_api: {
-      type: String,
-      default: "https://builder.dentrodahistoria.com.br/api",
-    },
-    is_subscription: {
-      type: Boolean,
-      default: false,
-    },
-    gradient_colors: {
-      type: Object,
-      required: false,
-    },
-    builderLayoutId: {
-      type: [Number, String],
-      required: false,
-    },
-    language: {
-      type: String,
-      required: false,
-    },
-    typeLanguage: {
-      type: String,
-      required: false,
-      default: "pt",
-    },
-    dir: {
-      type: String,
-      default: "ltr",
-      required: false,
-    },
-    builder_apk: {
-      type: String,
-      required: false,
-      //default: "https://builder.dentrodahistoria.com.br/api",
-    },
-  },
-  data() {
-    return {
-      categoriesAssets: {},
-      customizations: [], // Velho e bom customizations
-      requiredCategories: [], // Acumularás as customizações necessárias
-      disabledCategories: [], // Acumulara as customizações que não podem ser customizadas
-      isIniting: false,
-      isLoading: false,
-      selectedCharacter: {},
-      characterId: "",
-      characterTypeId: "",
-      characterName: "",
-      loadedCustomizations: [],
-      characterIsMale: this.custom_properties.is_male,
-      builderProductId: false,
-      characterHeight: null,
-      userDataProperties: this.custom_properties.user_data.properties,
-    };
-  },
-  computed: {
-    apkParameter() {
-      return this.builder_apk ? `apk=${this.builder_apk}` : "";
-    },
-  },
-  mounted() {
-    this.isIniting = true;
-    this.loadCustomizationTreeList()
-      .then(() => {
-        this.isIniting = false;
-        this.isLoading = true;
-      })
-      // .then(this.fakeData)
-      .then(this.parseCollection)
-      .then(this.loadCustomizationCharacter)
-      .then(this.initCustomizationCharacter)
-      .then(this.initDisabledCategories)
-      .then(() => {
-        this.isLoading = false;
-      });
-  },
-  methods: {
-    startedMethod() {
-      this.$emit("startedMethod");
-    },
-    completedMethod(payload) {
-      if (payload.success) {
-        this.$emit("completedMethod", {
-          updatedCustomizations: payload.updatedCustomizations,
-          updatedUuid: payload.updatedUuid,
-          characterName: this.characterName,
-          characterIsMale: this.custom_properties.is_male, //this.characterIsMale,
-          categories: payload.categories,
-          success: payload.success,
-        });
-      } else {
-        this.$emit("completedMethod", {
-          success: payload.success,
-        });
-      }
-    },
-    async loadCustomizationTreeList() {
-      let res;
-
-      //aaaa;
-
-      if (this.treelist) {
-        if (
-          this.treelist.character_categories_assets &&
-          this.treelist.character_categories_assets.length > 0
-        ) {
-          this.categoriesAssets = this.treelist.character_categories_assets[0];
-          return;
-        }
-      }
-
-      if (this.custom_properties.uuid) {
-        let url = `${this.builder_api}/customs_characters/${this.custom_properties.uuid}`;
-        if (this.builder_apk) {
-          url += `?apk=${encodeURIComponent(this.builder_apk)}`;
-        }
-        const { data } = await axios.get(url);
-
-        res = await axios.get(
-          `${this.builder_api}/characters/${
-            data.custom.character_id
-          }/categories/assets/treelist?character_type_id=${
-            data.custom.user_data.type
-          }&subscription=${this.is_subscription}${
-            this.language ? `&language=${this.language}` : ""
-          }&product_id=${this.custom_properties.product_id}${
-            this.builder_apk ? `&${this.apkParameter}` : ""
-          }`
-        );
-        this.selectedCharacter.slug =
-          res.data.character_categories_assets[0].type.code;
-        this.characterId = data.custom.character_id;
-        this.characterName = data.custom.user_data.properties.nome.value;
-        this.characterIsMale = this.custom_properties.is_male; //res.data.character_categories_assets[0].type.code === 'menino' ? true : false
-        this.builderProductId = this.custom_properties.product_id;
-        this.characterTypeId = data.custom.user_data.type;
-        this.loadedCustomizations = data.assets;
-
-        if (
-          data.custom.user_data.properties.dedicatoria &&
-          data.custom.user_data.properties.dedicatoria.value &&
-          data.custom.user_data.properties.dedicatoria.value.length > 0
-        ) {
-          this.userDataProperties.dedicatoria = {
-            code: "dedicatoria",
-            property_id:
-              data.custom.user_data.properties.dedicatoria.property_id,
-            value: data.custom.user_data.properties.dedicatoria.value,
-          };
-        }
-        if (
-          data.custom.user_data.properties.numero &&
-          data.custom.user_data.properties.numero.value &&
-          data.custom.user_data.properties.numero.value.length > 0
-        ) {
-          this.userDataProperties.numero = {
-            code: "numero",
-            property_id: data.custom.user_data.properties.numero.property_id,
-            value: data.custom.user_data.properties.numero.value,
-          };
-        }
-        if (
-          data.custom.user_data.properties.mes &&
-          data.custom.user_data.properties.mes.value &&
-          data.custom.user_data.properties.mes.value.length > 0
-        ) {
-          this.userDataProperties.mes = {
-            code: "mes",
-            property_id: data.custom.user_data.properties.mes.property_id,
-            value: data.custom.user_data.properties.mes.value,
-          };
-        }
-      } else {
-        res = await axios.get(
-          `${this.builder_api}/characters/${
-            this.custom_properties.character_id
-          }/categories/assets/treelist?character_type_id=${
-            this.custom_properties.type_id ? this.custom_properties.type_id : ""
-          }&subscription=${this.is_subscription}${
-            this.language
-              ? `&language=${encodeURIComponent(this.language)}`
-              : ""
-          }&product_id=${this.custom_properties.product_id}${
-            this.builder_apk ? `&${this.apkParameter}` : ""
-          }`
-        );
-        this.characterTypeId = this.custom_properties.type_id;
-        this.characterId = this.custom_properties.character_id;
-      }
-
-      this.selectedCharacter =
-        res.data.character_categories_assets[0].character;
-
-      this.categoriesAssets =
-        res.data.character_categories_assets &&
-        res.data.character_categories_assets.length
-          ? res.data.character_categories_assets[0]
-          : null;
-    },
-    /*
-     * Essa função também preenche as informações de customização,
-     * além do array de categorias obrigatórias e no caso do usuário possuir
-     * customizationId ela também preenche as categorias desabilitadas
-     */
-    initCustomizationCharacter() {
-      this.categoriesAssets.categories.forEach((c) => {
-        // Populando a tabela com as customizações necessárias
-        if (c.required) {
-          this.requiredCategories.push({
-            id: c.id,
-            name: c.name,
-          });
-        }
-        c.assets.subcategories = sort(c.assets.subcategories, "sort_order");
-      });
-
-      this.categoriesAssets.categories = sort(
-        this.categoriesAssets.categories,
-        "sort_order"
-      );
-
-      this.categoriesAssets.groups.forEach((g) => {
-        g.assets.subcategories = sort(g.assets.subcategories, "sort_order");
-      });
-
-      this.categoriesAssets.groups = sort(
-        this.categoriesAssets.groups,
-        "sort_order"
-      );
-    },
-    /*
-     * Essa função inicializa as categorias desabilitadas
-     */
-    initDisabledCategories() {
-      this.customizations.forEach((custom) => {
-        let comparisonValue;
-        let customCategory = this.categoriesAssets.categories.find(
-          (c) => c.id === custom.categoryId
-        );
-
-        if (!customCategory) {
-          // A diferença entre os objetos de group e categoria
-          // não são relevantes para essa função
-          customCategory = this.categoriesAssets.groups.find((g) => {
-            g.groupedCategories.includes(custom.categoryId);
-          });
-        }
-
-        if (customCategory) {
-          // Caso a categoria dependa de outra descemos o nível da arvore
-          // de assets para pegar apenas as subcategorias e cores dependêntes
-          if (customCategory.depends_category) {
-            const relatedCustomization = this.getCustomization(
-              customCategory.depends_category
-            );
-            customCategory = customCategory.assets.categories.find((c) => {
-              comparisonValue = relatedCustomization.optionId;
-              return c.parent_id === comparisonValue;
-            });
-          }
-
-          // Buscando a subbategoria com as informações a respeito das
-          // categorias para desabilitar
-          comparisonValue = custom.optionId;
-
-          const customSubcategory = customCategory.assets.subcategories.find(
-            (subcategory) => {
-              if (
-                subcategory.assets.colors &&
-                subcategory.assets.colors.length
-              ) {
-                let found = false;
-                subcategory.assets.colors.forEach((color) => {
-                  if (color.id === comparisonValue) {
-                    found = true;
-                  }
-                });
-                return found;
-              }
-              return subcategory.id === comparisonValue;
-            }
-          );
-
-          if (customSubcategory)
-            this.updateDisabledCategories(custom, customSubcategory.disable);
-        }
-      });
-    },
-    /*
-     * Carregando nas customizações as informaçoes de categorias e subcategorias
-     * definidas como default no builder
-     */
-    initDefaultCustomizationCharacter() {
-      let customization;
-      const categoriesWithDependency = [];
-
-      /*
-       * Definindo as customizações default das categorias sem
-       * dependencia
-       */
-      this.categoriesAssets.categories.forEach((c) => {
-        if (c.depends_category) {
-          categoriesWithDependency.push(c);
-          return;
-        }
-        customization = this.getCategoryDefaultCustomization(c);
-
-        if (c.code.includes("mooner")) {
-          console.log(c);
-
-          // c.assets.subcategories[0].parent_id;
-          // null
-          // c.assets.subcategories[0].id;
-          // c.assets.subcategories[0].name;
-          // c.assets.subcategories[0].assets.asset;
-          // null,
-          // null,
-          this.updateCustomizations(
-            c.assets.subcategories[0].parent_id,
-            null,
-            c.assets.subcategories[0].id,
-            c.assets.subcategories[0].name,
-            c.assets.subcategories[0].assets.asset,
-            null,
-            null
-          );
-        }
-        if (customization)
-          this.updateCustomizations(
-            customization.categoryId,
-            customization.relatedCategoryId,
-            customization.optionId,
-            customization.optionName,
-            customization.optionAsset,
-            customization.optionZIndex,
-            customization.categoryZIndex
-          );
-      });
-
-      categoriesWithDependency.forEach((c) => {
-        customization = this.getRelatedCategoryDefaultCustomization(c);
-        if (customization)
-          this.updateCustomizations(
-            customization.categoryId,
-            customization.relatedCategoryId,
-            customization.optionId,
-            customization.optionName,
-            customization.optionAsset,
-            customization.optionZIndex,
-            customization.categoryZIndex
-          );
-      });
-    },
-    /*
-     * Essa função carrega as informações de personalização do personagem
-     * Caso a subscription já possui um customizationId ele vai no serviço
-     * buscar tal informação, caso contrário ele seta as informações
-     * default das categorias na personalização
-     */
-    async loadCustomizationCharacter() {
-      this.initDefaultCustomizationCharacter();
-
-      if (this.custom_properties.uuid) {
-        this.customizations.forEach((custom) => {
-          this.loadedCustomizations.forEach((el) => {
-            if (
-              custom.relatedCategoryId &&
-              custom.categoryId === el.assets.category_id
-            ) {
-              let relatedCustomizationCategory = this.loadedCustomizations.find(
-                (cr) => {
-                  return cr.id === custom.relatedCategoryId;
-                }
-              );
-
-              this.categoriesAssets.categories.forEach((category) => {
-                if (category.id === el.id) {
-                  category.assets.categories.forEach((c) => {
-                    if (
-                      c.parent_id === relatedCustomizationCategory.assets.id
-                    ) {
-                      c.assets.subcategories.forEach((s) => {
-                        s.assets.colors.forEach((color) => {
-                          if (el.assets.id === color.id) {
-                            this.updateCustomizations(
-                              custom.categoryId,
-                              custom.relatedCategoryId,
-                              el.assets.id,
-                              color.hexa,
-                              color.assets.asset,
-                              el.z_index,
-                              el.z_index
-                            );
-                          }
-                        });
-                      });
-                    }
-                  });
-                }
-              });
-            } else if (custom.categoryId === el.assets.category_id) {
-              this.updateCustomizations(
-                custom.categoryId,
-                custom.relatedCategoryId,
-                el.assets.id,
-                custom.name,
-                el.assets.asset,
-                el.z_index,
-                el.z_index
-              );
-            }
-          });
-        });
-
-        this.loadedCustomizations.forEach((el) => {
-          let customCategory = this.customizations.find(
-            (c) => c.categoryId === el.id
-          );
-          if (!customCategory) {
-            this.updateCustomizations(
-              el.assets.category_id,
-              null,
-              el.assets.id,
-              el.name,
-              el.assets.asset,
-              el.z_index,
-              el.z_index
-            );
-          }
-        });
-      }
-    },
-    loadRelatedSubcategory(customization) {},
-
-    updateCustomizations(
-      categoryId,
-      relatedCategoryId,
-      optionId,
-      optionName,
-      optionAsset,
-      optionZIndex,
-      categoryZIndex,
-      removeGroup = false,
-      firstGroup = false,
-      removableCategory = false
-    ) {
-      let customization = this.customizations.find(
-        (c) => c.categoryId === categoryId
-      );
-      if (!removeGroup) {
-        if (customization) {
-          customization.categoryId = categoryId;
-          customization.relatedCategoryId = relatedCategoryId;
-          customization.optionId = optionId;
-          customization.optionName = optionName;
-          customization.optionAsset = optionAsset;
-          customization.optionZIndex = optionZIndex;
-          customization.categoryZIndex = categoryZIndex;
-        } else {
-          customization = {
-            categoryId: categoryId,
-            relatedCategoryId: relatedCategoryId,
-            optionId: optionId,
-            optionName: optionName,
-            optionAsset: optionAsset,
-            optionZIndex: optionZIndex,
-            categoryZIndex: categoryZIndex,
-            firstGroup: firstGroup ? true : null,
-          };
-          this.customizations.push(customization);
-        }
-        return customization;
-      } else {
-        customization = this.customizations.find(
-          (c) => c.categoryId === categoryId
-        );
-        this.customizations.forEach((obj, index) => {
-          if (obj.categoryId === customization.categoryId) {
-            this.customizations.splice(index, 1);
-          }
-        });
-      }
-    },
-    updateDisabledCategories(customization, categoriesToDisable) {
-      if (categoriesToDisable) {
-        categoriesToDisable.forEach((idToDisable) => {
-          this.customizations.forEach((el, index) => {
-            if (idToDisable === el.categoryId) {
-              this.customizations.splice(index, 1);
-            }
-          });
-        });
-      }
-
-      if (!categoriesToDisable || categoriesToDisable.length === 0) {
-        this.disabledCategories.forEach((dc) => {
-          const i = dc.relatedCustomizations.indexOf(customization);
-          if (i > -1) dc.relatedCustomizations.splice(i, 1);
-        });
-
-        this.disabledCategories = this.disabledCategories.filter(
-          (dc) => dc.relatedCustomizations.length !== 0
-        );
-      } else {
-        categoriesToDisable.forEach((categoryToDisableId) => {
-          let dc = this.disabledCategories.find((dc) => {
-            return dc.categoryId === categoryToDisableId;
-          });
-
-          if (dc) {
-            if (!dc.relatedCustomizations.includes(customization))
-              dc.relatedCustomizations.push(customization);
-          } else {
-            dc = {
-              categoryId: categoryToDisableId,
-              relatedCustomizations: [customization],
-            };
-            this.disabledCategories.push(dc);
-          }
-        });
-      }
-    },
-    getCategoryDefaultCustomization(category) {
-      const categoryId = category.id;
-      const categoryZIndex = category.z_index;
-      let optionId, optionName, optionAsset, optionZIndex, relatedCategoryId;
-
-      category.assets.subcategories.forEach((s) => {
-        if (s.is_default) {
-          optionId = s.id;
-          optionName = s.name;
-
-          if (s.z_index != null && s.z_index >= 0) optionZIndex = s.z_index;
-
-          if (s.assets.colors.length > 0) {
-            const defaultColor = s.assets.colors.find((c) => c.is_default);
-            if (defaultColor) {
-              optionId = defaultColor.id;
-              optionName = defaultColor.hexa;
-              optionAsset = defaultColor.assets.asset;
-            } else {
-              optionId = s.assets.colors[0].id;
-              optionName = s.assets.colors[0].hexa;
-              optionAsset = s.assets.colors[0].assets.asset;
-            }
-          } else {
-            optionAsset = s.assets.asset;
-          }
-        }
-      });
-
-      return optionAsset
-        ? {
-            categoryId,
-            relatedCategoryId,
-            optionId,
-            optionName,
-            optionAsset,
-            categoryZIndex,
-            optionZIndex,
-          }
-        : null;
-    },
-    getRelatedCategoryDefaultCustomization(category) {
-      const categoryId = category.id;
-      const relatedCategoryId = category.depends_category;
-      const categoryZIndex = category.z_index;
-      let optionId,
-        optionName,
-        optionAsset,
-        optionZIndex,
-        selectedRelatedSubCategory;
-
-      const customization = this.getCustomization(category.depends_category);
-      if (customization) selectedRelatedSubCategory = customization.optionId;
-      else selectedRelatedSubCategory = "";
-
-      category.assets.categories.forEach((rc) => {
-        if (rc.parent_id === selectedRelatedSubCategory) {
-          rc.assets.subcategories.forEach((s) => {
-            if (s.is_default) {
-              optionId = s.id;
-              optionName = s.name;
-              if (s.z_index != null && s.z_index >= 0) {
-                optionZIndex = s.z_index;
-              }
-
-              if (s.assets.colors.length > 0) {
-                const defaultColor = s.assets.colors.find((c) => c.is_default);
-                if (defaultColor) {
-                  optionId = defaultColor.id;
-                  optionName = defaultColor.hexa;
-                  optionAsset = defaultColor.assets.asset;
-                } else {
-                  optionId = s.assets.colors[0].id;
-                  optionName = s.assets.colors[0].hexa;
-                  optionAsset = s.assets.colors[0].assets.asset;
-                }
-              } else {
-                optionAsset = s.assets.asset;
-              }
-            }
-          });
-          return false;
-        }
-      });
-      return optionAsset
-        ? {
-            categoryId,
-            relatedCategoryId,
-            optionId,
-            optionName,
-            optionAsset,
-            categoryZIndex,
-            optionZIndex,
-          }
-        : null;
-    },
-    getCustomization(categoryId) {
-      return this.customizations.find((c) => c.categoryId === categoryId);
-    },
-    handleCustomization({
-      customization,
-      categoriesToDisable,
-      removeGroup = false,
-      firstGroup = false,
-      removableCategory = false,
-    }) {
-      // Verifica se há outra customização que deve ser atualizada
-      // em função dessa atualização e atualiza essa customização
-      // antes
-
-      this.handleUpdateRelatedCategories(customization);
-
-      const c = this.updateCustomizations(
-        customization.categoryId,
-        customization.relatedCategoryId,
-        customization.optionId,
-        customization.optionName,
-        customization.optionAsset,
-        customization.optionZIndex,
-        customization.categoryZIndex,
-        removeGroup,
-        firstGroup,
-        removableCategory
-      );
-      // Desabilitando categorias associadas a customização
-      this.updateDisabledCategories(c, categoriesToDisable);
-    },
-    /**
-     * Essa funçaão recebe a customização da categoria pai
-     * e que por influência altera outras categorias. EX:
-     * Essa função poderia receber as customizações de cor de pele
-     * e automaticamente altera todos as outras categorias que
-     * dependem da mesma
-     */
-    handleUpdateRelatedCategories(customization) {
-      this.categoriesAssets.categories.forEach((c) => {
-        if (c.depends_category === customization.categoryId) {
-          // Pegando a customização da categoria relacionada
-          // e recuperando a subcategoryId para atualizar depois
-          // as informações de customização da categoria relacionada
-          const relatedCustomization = this.getCustomization(c.id);
-          let relatedCustomizationSubcategory = null;
-          let relatedCustomizationCategory = null;
-
-          if (!relatedCustomization) return;
-          c.assets.categories.forEach((cr) => {
-            cr.assets.subcategories.forEach((s) => {
-              s.assets.colors.forEach((c) => {
-                if (c.id === relatedCustomization.optionId) {
-                  relatedCustomizationSubcategory = s;
-                }
-              });
-            });
-          });
-
-          // Procurando a nova subcategoria
-          // já com a referência correta da categoria
-          relatedCustomizationCategory = c.assets.categories.find((cr) => {
-            return cr.parent_id === customization.optionId;
-          });
-
-          if (relatedCustomizationCategory) {
-            relatedCustomizationCategory.assets.subcategories.forEach((s) => {
-              if (s.id === relatedCustomizationSubcategory.id) {
-                s.assets.colors.forEach((c) => {
-                  if (c.hexa === relatedCustomization.optionName) {
-                    relatedCustomization.optionId = c.id;
-                    relatedCustomization.optionName = c.hexa;
-                    relatedCustomization.optionAsset = c.assets.asset;
-                    relatedCustomization.optionZIndex = s.z_index;
-                  }
-                });
-              }
-            });
-          }
-        }
-      });
-    },
-    fakeData() {
-      const categoryId = this.categoriesAssets.categories[0]
-        ? this.categoriesAssets.categories[0].id
-        : 0;
-      const categoryId2 = this.categoriesAssets.categories[1]
-        ? this.categoriesAssets.categories[1].id
-        : 0;
-      this.categoriesAssets.collections = [];
-      this.categoriesAssets.collections.push({
-        id: 10000,
-        name: "Vestuario",
-        icon: "https://dka04237waacy.cloudfront.net/uploads/turma-da-monica/tp-corpo-branco-3.png",
-        categories: [categoryId, categoryId2],
-      });
-    },
-    parseCollection() {
-      if (
-        this.categoriesAssets.collections &&
-        this.categoriesAssets.collections[0]
-      ) {
-        this.categoriesAssets.collections[0].categories.forEach((el, index) => {
-          this.categoriesAssets.collections[0].categories[index] = parseInt(el);
-        });
-      }
-    },
-    removeTooltip() {
-      const tooltip = document.getElementsByClassName("mobile-tooltip")[0];
-      tooltip.parentNode.removeChild(tooltip);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
-
-.mobile-tooltip {
-  display: none;
-  @media (max-width: 992px) {
-    // display: flex;
-    display: none;
-    position: absolute;
-    z-index: 90000000;
-    height: calc(100vh - 59px);
-    width: 100%;
-    transition: all 0.3s;
-    bottom: 0;
-    .tooltip {
-      border-radius: 5px;
-      color: white;
-      font-size: 14px;
-      padding: 10px 36px 10px 16px;
-      width: 350px;
-      margin-left: 15px;
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.31);
-      line-height: 1.5;
-      position: relative;
-      margin-top: auto;
-      bottom: calc(var(--cp) + 25px);
-      &:after {
-        top: 100%;
-        left: 5%;
-        border: solid transparent;
-        content: " ";
-        position: absolute;
-        border-width: 10px;
-      }
-      i {
-        position: absolute;
-        right: 10px;
-        top: 10px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
+      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
+      crossorigin="anonymous"
+    />
+    <div class="mobile-tooltip" @click="removeTooltip">
+      <div class="tooltip">
+        Lorem ipsum dolor sit amet, eum ne sale vidit epicuri, usu populo
+        incorrupte ex. His falli intellegebat no.
+        <i class="fas fa-times"></i>
+      </div>
+    </div>
+    <CustomizationPreview
+      :customizations="customizations"
+      :selected-character="selectedCharacter"
+      :character-height="characterHeight ? characterHeight : null"
+      :gradient-colors="gradient_colors"
+      :character-slug="custom_properties.slug"
+      :characterHeight="1"
+      :dir="dir"
+    />
+    <CustomizationPanel
+      :builder-api="builder_api"
+      :selected-character="selectedCharacter"
+      :character-name="custom_properties.user_data.properties.nome.value"
+      :subscription-id="'1'"
+      :stack-id="'1'"
+      :character-slug="custom_properties.slug"
+      :character-id="characterId"
+      :character-type-id="characterTypeId"
+      :character-is-male="custom_properties.is_male"
+      :categories-assets="categoriesAssets"
+      :disabled-categories="disabledCategories"
+      :customizations="customizations"
+      :builder-product-id="
+        builderProductId ? builderProductId : this.custom_properties.product_id
+      "
+      :userDataProperties="custom_properties.user_data.properties"
+      :builderLayoutId="builderLayoutId"
+      :language="language"
+      :typeLanguage="typeLanguage"
+      :dir="dir"
+      :builder_apk="builder_apk"
+      @update:customization="handleCustomization"
+      @startedMethod="startedMethod"
+      @completedMethod="completedMethod"
+    />
+  </div>
+</template>
+
+<script>
+const axios = require("axios");
+import sort from "array-sort";
+import { resolveBuilderLanguage, DEFAULT_LOCALE } from "../../locale/config";
+import CustomizationPanel from "./CustomizationPanel.vue";
+import CustomizationPreview from "./CustomizationPreview.vue";
+
+export default {
+  name: "CustomizationView",
+  components: {
+    CustomizationPanel,
+    CustomizationPreview,
+  },
+  props: {
+    custom_properties: {
+      type: Object,
+      required: true,
+    },
+    builder_api: {
+      type: String,
+      default: "https://builder.dentrodahistoria.com.br/api",
+    },
+    is_subscription: {
+      type: Boolean,
+      default: false,
+    },
+    gradient_colors: {
+      type: Object,
+      required: false,
+    },
+    builderLayoutId: {
+      type: [Number, String],
+      required: false,
+    },
+    language: {
+      type: String,
+      required: false,
+    },
+    typeLanguage: {
+      type: String,
+      required: false,
+      default: DEFAULT_LOCALE,
+    },
+    dir: {
+      type: String,
+      default: "ltr",
+      required: false,
+    },
+    builder_apk: {
+      type: String,
+      required: false,
+      //default: "https://builder.dentrodahistoria.com.br/api",
+    },
+  },
+  data() {
+    return {
+      categoriesAssets: {},
+      customizations: [], // Velho e bom customizations
+      requiredCategories: [], // Acumularás as customizações necessárias
+      disabledCategories: [], // Acumulara as customizações que não podem ser customizadas
+      isIniting: false,
+      isLoading: false,
+      selectedCharacter: {},
+      characterId: "",
+      characterTypeId: "",
+      characterName: "",
+      loadedCustomizations: [],
+      characterIsMale: this.custom_properties.is_male,
+      builderProductId: false,
+      characterHeight: null,
+      userDataProperties: this.custom_properties.user_data.properties,
+    };
+  },
+  computed: {
+    apkParameter() {
+      return this.builder_apk ? `apk=${this.builder_apk}` : "";
+    },
+    builderLanguage() {
+      return resolveBuilderLanguage(this.typeLanguage, this.language);
+    },
+  },
+  mounted() {
+    this.isIniting = true;
+    this.loadCustomizationTreeList()
+      .then(() => {
+        this.isIniting = false;
+        this.isLoading = true;
+      })
+      // .then(this.fakeData)
+      .then(this.parseCollection)
+      .then(this.loadCustomizationCharacter)
+      .then(this.initCustomizationCharacter)
+      .then(this.initDisabledCategories)
+      .then(() => {
+        this.isLoading = false;
+      });
+  },
+  methods: {
+    startedMethod() {
+      this.$emit("startedMethod");
+    },
+    completedMethod(payload) {
+      if (payload.success) {
+        this.$emit("completedMethod", {
+          updatedCustomizations: payload.updatedCustomizations,
+          updatedUuid: payload.updatedUuid,
+          characterName: this.characterName,
+          characterIsMale: this.custom_properties.is_male, //this.characterIsMale,
+          categories: payload.categories,
+          success: payload.success,
+        });
+      } else {
+        this.$emit("completedMethod", {
+          success: payload.success,
+        });
+      }
+    },
+    async loadCustomizationTreeList() {
+      let res;
+
+      //aaaa;
+
+      if (this.treelist) {
+        if (
+          this.treelist.character_categories_assets &&
+          this.treelist.character_categories_assets.length > 0
+        ) {
+          this.categoriesAssets = this.treelist.character_categories_assets[0];
+          return;
+        }
+      }
+
+      if (this.custom_properties.uuid) {
+        let url = `${this.builder_api}/customs_characters/${this.custom_properties.uuid}`;
+        if (this.builder_apk) {
+          url += `?apk=${encodeURIComponent(this.builder_apk)}`;
+        }
+        const { data } = await axios.get(url);
+
+        res = await axios.get(
+          `${this.builder_api}/characters/${
+            data.custom.character_id
+          }/categories/assets/treelist?character_type_id=${
+            data.custom.user_data.type
+          }&subscription=${this.is_subscription}${
+            this.builderLanguage ? `&language=${this.builderLanguage}` : ""
+          }&product_id=${this.custom_properties.product_id}${
+            this.builder_apk ? `&${this.apkParameter}` : ""
+          }`
+        );
+        this.selectedCharacter.slug =
+          res.data.character_categories_assets[0].type.code;
+        this.characterId = data.custom.character_id;
+        this.characterName = data.custom.user_data.properties.nome.value;
+        this.characterIsMale = this.custom_properties.is_male; //res.data.character_categories_assets[0].type.code === 'menino' ? true : false
+        this.builderProductId = this.custom_properties.product_id;
+        this.characterTypeId = data.custom.user_data.type;
+        this.loadedCustomizations = data.assets;
+
+        if (
+          data.custom.user_data.properties.dedicatoria &&
+          data.custom.user_data.properties.dedicatoria.value &&
+          data.custom.user_data.properties.dedicatoria.value.length > 0
+        ) {
+          this.userDataProperties.dedicatoria = {
+            code: "dedicatoria",
+            property_id:
+              data.custom.user_data.properties.dedicatoria.property_id,
+            value: data.custom.user_data.properties.dedicatoria.value,
+          };
+        }
+        if (
+          data.custom.user_data.properties.numero &&
+          data.custom.user_data.properties.numero.value &&
+          data.custom.user_data.properties.numero.value.length > 0
+        ) {
+          this.userDataProperties.numero = {
+            code: "numero",
+            property_id: data.custom.user_data.properties.numero.property_id,
+            value: data.custom.user_data.properties.numero.value,
+          };
+        }
+        if (
+          data.custom.user_data.properties.mes &&
+          data.custom.user_data.properties.mes.value &&
+          data.custom.user_data.properties.mes.value.length > 0
+        ) {
+          this.userDataProperties.mes = {
+            code: "mes",
+            property_id: data.custom.user_data.properties.mes.property_id,
+            value: data.custom.user_data.properties.mes.value,
+          };
+        }
+      } else {
+        res = await axios.get(
+          `${this.builder_api}/characters/${
+            this.custom_properties.character_id
+          }/categories/assets/treelist?character_type_id=${
+            this.custom_properties.type_id ? this.custom_properties.type_id : ""
+          }&subscription=${this.is_subscription}${
+            this.builderLanguage
+              ? `&language=${encodeURIComponent(this.builderLanguage)}`
+              : ""
+          }&product_id=${this.custom_properties.product_id}${
+            this.builder_apk ? `&${this.apkParameter}` : ""
+          }`
+        );
+        this.characterTypeId = this.custom_properties.type_id;
+        this.characterId = this.custom_properties.character_id;
+      }
+
+      this.selectedCharacter =
+        res.data.character_categories_assets[0].character;
+
+      this.categoriesAssets =
+        res.data.character_categories_assets &&
+        res.data.character_categories_assets.length
+          ? res.data.character_categories_assets[0]
+          : null;
+    },
+    /*
+     * Essa função também preenche as informações de customização,
+     * além do array de categorias obrigatórias e no caso do usuário possuir
+     * customizationId ela também preenche as categorias desabilitadas
+     */
+    initCustomizationCharacter() {
+      this.categoriesAssets.categories.forEach((c) => {
+        // Populando a tabela com as customizações necessárias
+        if (c.required) {
+          this.requiredCategories.push({
+            id: c.id,
+            name: c.name,
+          });
+        }
+        c.assets.subcategories = sort(c.assets.subcategories, "sort_order");
+      });
+
+      this.categoriesAssets.categories = sort(
+        this.categoriesAssets.categories,
+        "sort_order"
+      );
+
+      this.categoriesAssets.groups.forEach((g) => {
+        g.assets.subcategories = sort(g.assets.subcategories, "sort_order");
+      });
+
+      this.categoriesAssets.groups = sort(
+        this.categoriesAssets.groups,
+        "sort_order"
+      );
+    },
+    /*
+     * Essa função inicializa as categorias desabilitadas
+     */
+    initDisabledCategories() {
+      this.customizations.forEach((custom) => {
+        let comparisonValue;
+        let customCategory = this.categoriesAssets.categories.find(
+          (c) => c.id === custom.categoryId
+        );
+
+        if (!customCategory) {
+          // A diferença entre os objetos de group e categoria
+          // não são relevantes para essa função
+          customCategory = this.categoriesAssets.groups.find((g) => {
+            g.groupedCategories.includes(custom.categoryId);
+          });
+        }
+
+        if (customCategory) {
+          // Caso a categoria dependa de outra descemos o nível da arvore
+          // de assets para pegar apenas as subcategorias e cores dependêntes
+          if (customCategory.depends_category) {
+            const relatedCustomization = this.getCustomization(
+              customCategory.depends_category
+            );
+            customCategory = customCategory.assets.categories.find((c) => {
+              comparisonValue = relatedCustomization.optionId;
+              return c.parent_id === comparisonValue;
+            });
+          }
+
+          // Buscando a subbategoria com as informações a respeito das
+          // categorias para desabilitar
+          comparisonValue = custom.optionId;
+
+          const customSubcategory = customCategory.assets.subcategories.find(
+            (subcategory) => {
+              if (
+                subcategory.assets.colors &&
+                subcategory.assets.colors.length
+              ) {
+                let found = false;
+                subcategory.assets.colors.forEach((color) => {
+                  if (color.id === comparisonValue) {
+                    found = true;
+                  }
+                });
+                return found;
+              }
+              return subcategory.id === comparisonValue;
+            }
+          );
+
+          if (customSubcategory)
+            this.updateDisabledCategories(custom, customSubcategory.disable);
+        }
+      });
+    },
+    /*
+     * Carregando nas customizações as informaçoes de categorias e subcategorias
+     * definidas como default no builder
+     */
+    initDefaultCustomizationCharacter() {
+      let customization;
+      const categoriesWithDependency = [];
+
+      /*
+       * Definindo as customizações default das categorias sem
+       * dependencia
+       */
+      this.categoriesAssets.categories.forEach((c) => {
+        if (c.depends_category) {
+          categoriesWithDependency.push(c);
+          return;
+        }
+        customization = this.getCategoryDefaultCustomization(c);
+
+        if (c.code.includes("mooner")) {
+          console.log(c);
+
+          // c.assets.subcategories[0].parent_id;
+          // null
+          // c.assets.subcategories[0].id;
+          // c.assets.subcategories[0].name;
+          // c.assets.subcategories[0].assets.asset;
+          // null,
+          // null,
+          this.updateCustomizations(
+            c.assets.subcategories[0].parent_id,
+            null,
+            c.assets.subcategories[0].id,
+            c.assets.subcategories[0].name,
+            c.assets.subcategories[0].assets.asset,
+            null,
+            null
+          );
+        }
+        if (customization)
+          this.updateCustomizations(
+            customization.categoryId,
+            customization.relatedCategoryId,
+            customization.optionId,
+            customization.optionName,
+            customization.optionAsset,
+            customization.optionZIndex,
+            customization.categoryZIndex
+          );
+      });
+
+      categoriesWithDependency.forEach((c) => {
+        customization = this.getRelatedCategoryDefaultCustomization(c);
+        if (customization)
+          this.updateCustomizations(
+            customization.categoryId,
+            customization.relatedCategoryId,
+            customization.optionId,
+            customization.optionName,
+            customization.optionAsset,
+            customization.optionZIndex,
+            customization.categoryZIndex
+          );
+      });
+    },
+    /*
+     * Essa função carrega as informações de personalização do personagem
+     * Caso a subscription já possui um customizationId ele vai no serviço
+     * buscar tal informação, caso contrário ele seta as informações
+     * default das categorias na personalização
+     */
+    async loadCustomizationCharacter() {
+      this.initDefaultCustomizationCharacter();
+
+      if (this.custom_properties.uuid) {
+        this.customizations.forEach((custom) => {
+          this.loadedCustomizations.forEach((el) => {
+            if (
+              custom.relatedCategoryId &&
+              custom.categoryId === el.assets.category_id
+            ) {
+              let relatedCustomizationCategory = this.loadedCustomizations.find(
+                (cr) => {
+                  return cr.id === custom.relatedCategoryId;
+                }
+              );
+
+              this.categoriesAssets.categories.forEach((category) => {
+                if (category.id === el.id) {
+                  category.assets.categories.forEach((c) => {
+                    if (
+                      c.parent_id === relatedCustomizationCategory.assets.id
+                    ) {
+                      c.assets.subcategories.forEach((s) => {
+                        s.assets.colors.forEach((color) => {
+                          if (el.assets.id === color.id) {
+                            this.updateCustomizations(
+                              custom.categoryId,
+                              custom.relatedCategoryId,
+                              el.assets.id,
+                              color.hexa,
+                              color.assets.asset,
+                              el.z_index,
+                              el.z_index
+                            );
+                          }
+                        });
+                      });
+                    }
+                  });
+                }
+              });
+            } else if (custom.categoryId === el.assets.category_id) {
+              this.updateCustomizations(
+                custom.categoryId,
+                custom.relatedCategoryId,
+                el.assets.id,
+                custom.name,
+                el.assets.asset,
+                el.z_index,
+                el.z_index
+              );
+            }
+          });
+        });
+
+        this.loadedCustomizations.forEach((el) => {
+          let customCategory = this.customizations.find(
+            (c) => c.categoryId === el.id
+          );
+          if (!customCategory) {
+            this.updateCustomizations(
+              el.assets.category_id,
+              null,
+              el.assets.id,
+              el.name,
+              el.assets.asset,
+              el.z_index,
+              el.z_index
+            );
+          }
+        });
+      }
+    },
+    loadRelatedSubcategory(customization) {},
+
+    updateCustomizations(
+      categoryId,
+      relatedCategoryId,
+      optionId,
+      optionName,
+      optionAsset,
+      optionZIndex,
+      categoryZIndex,
+      removeGroup = false,
+      firstGroup = false,
+      removableCategory = false
+    ) {
+      let customization = this.customizations.find(
+        (c) => c.categoryId === categoryId
+      );
+      if (!removeGroup) {
+        if (customization) {
+          customization.categoryId = categoryId;
+          customization.relatedCategoryId = relatedCategoryId;
+          customization.optionId = optionId;
+          customization.optionName = optionName;
+          customization.optionAsset = optionAsset;
+          customization.optionZIndex = optionZIndex;
+          customization.categoryZIndex = categoryZIndex;
+        } else {
+          customization = {
+            categoryId: categoryId,
+            relatedCategoryId: relatedCategoryId,
+            optionId: optionId,
+            optionName: optionName,
+            optionAsset: optionAsset,
+            optionZIndex: optionZIndex,
+            categoryZIndex: categoryZIndex,
+            firstGroup: firstGroup ? true : null,
+          };
+          this.customizations.push(customization);
+        }
+        return customization;
+      } else {
+        customization = this.customizations.find(
+          (c) => c.categoryId === categoryId
+        );
+        this.customizations.forEach((obj, index) => {
+          if (obj.categoryId === customization.categoryId) {
+            this.customizations.splice(index, 1);
+          }
+        });
+      }
+    },
+    updateDisabledCategories(customization, categoriesToDisable) {
+      if (categoriesToDisable) {
+        categoriesToDisable.forEach((idToDisable) => {
+          this.customizations.forEach((el, index) => {
+            if (idToDisable === el.categoryId) {
+              this.customizations.splice(index, 1);
+            }
+          });
+        });
+      }
+
+      if (!categoriesToDisable || categoriesToDisable.length === 0) {
+        this.disabledCategories.forEach((dc) => {
+          const i = dc.relatedCustomizations.indexOf(customization);
+          if (i > -1) dc.relatedCustomizations.splice(i, 1);
+        });
+
+        this.disabledCategories = this.disabledCategories.filter(
+          (dc) => dc.relatedCustomizations.length !== 0
+        );
+      } else {
+        categoriesToDisable.forEach((categoryToDisableId) => {
+          let dc = this.disabledCategories.find((dc) => {
+            return dc.categoryId === categoryToDisableId;
+          });
+
+          if (dc) {
+            if (!dc.relatedCustomizations.includes(customization))
+              dc.relatedCustomizations.push(customization);
+          } else {
+            dc = {
+              categoryId: categoryToDisableId,
+              relatedCustomizations: [customization],
+            };
+            this.disabledCategories.push(dc);
+          }
+        });
+      }
+    },
+    getCategoryDefaultCustomization(category) {
+      const categoryId = category.id;
+      const categoryZIndex = category.z_index;
+      let optionId, optionName, optionAsset, optionZIndex, relatedCategoryId;
+
+      category.assets.subcategories.forEach((s) => {
+        if (s.is_default) {
+          optionId = s.id;
+          optionName = s.name;
+
+          if (s.z_index != null && s.z_index >= 0) optionZIndex = s.z_index;
+
+          if (s.assets.colors.length > 0) {
+            const defaultColor = s.assets.colors.find((c) => c.is_default);
+            if (defaultColor) {
+              optionId = defaultColor.id;
+              optionName = defaultColor.hexa;
+              optionAsset = defaultColor.assets.asset;
+            } else {
+              optionId = s.assets.colors[0].id;
+              optionName = s.assets.colors[0].hexa;
+              optionAsset = s.assets.colors[0].assets.asset;
+            }
+          } else {
+            optionAsset = s.assets.asset;
+          }
+        }
+      });
+
+      return optionAsset
+        ? {
+            categoryId,
+            relatedCategoryId,
+            optionId,
+            optionName,
+            optionAsset,
+            categoryZIndex,
+            optionZIndex,
+          }
+        : null;
+    },
+    getRelatedCategoryDefaultCustomization(category) {
+      const categoryId = category.id;
+      const relatedCategoryId = category.depends_category;
+      const categoryZIndex = category.z_index;
+      let optionId,
+        optionName,
+        optionAsset,
+        optionZIndex,
+        selectedRelatedSubCategory;
+
+      const customization = this.getCustomization(category.depends_category);
+      if (customization) selectedRelatedSubCategory = customization.optionId;
+      else selectedRelatedSubCategory = "";
+
+      category.assets.categories.forEach((rc) => {
+        if (rc.parent_id === selectedRelatedSubCategory) {
+          rc.assets.subcategories.forEach((s) => {
+            if (s.is_default) {
+              optionId = s.id;
+              optionName = s.name;
+              if (s.z_index != null && s.z_index >= 0) {
+                optionZIndex = s.z_index;
+              }
+
+              if (s.assets.colors.length > 0) {
+                const defaultColor = s.assets.colors.find((c) => c.is_default);
+                if (defaultColor) {
+                  optionId = defaultColor.id;
+                  optionName = defaultColor.hexa;
+                  optionAsset = defaultColor.assets.asset;
+                } else {
+                  optionId = s.assets.colors[0].id;
+                  optionName = s.assets.colors[0].hexa;
+                  optionAsset = s.assets.colors[0].assets.asset;
+                }
+              } else {
+                optionAsset = s.assets.asset;
+              }
+            }
+          });
+          return false;
+        }
+      });
+      return optionAsset
+        ? {
+            categoryId,
+            relatedCategoryId,
+            optionId,
+            optionName,
+            optionAsset,
+            categoryZIndex,
+            optionZIndex,
+          }
+        : null;
+    },
+    getCustomization(categoryId) {
+      return this.customizations.find((c) => c.categoryId === categoryId);
+    },
+    handleCustomization({
+      customization,
+      categoriesToDisable,
+      removeGroup = false,
+      firstGroup = false,
+      removableCategory = false,
+    }) {
+      // Verifica se há outra customização que deve ser atualizada
+      // em função dessa atualização e atualiza essa customização
+      // antes
+
+      this.handleUpdateRelatedCategories(customization);
+
+      const c = this.updateCustomizations(
+        customization.categoryId,
+        customization.relatedCategoryId,
+        customization.optionId,
+        customization.optionName,
+        customization.optionAsset,
+        customization.optionZIndex,
+        customization.categoryZIndex,
+        removeGroup,
+        firstGroup,
+        removableCategory
+      );
+      // Desabilitando categorias associadas a customização
+      this.updateDisabledCategories(c, categoriesToDisable);
+    },
+    /**
+     * Essa funçaão recebe a customização da categoria pai
+     * e que por influência altera outras categorias. EX:
+     * Essa função poderia receber as customizações de cor de pele
+     * e automaticamente altera todos as outras categorias que
+     * dependem da mesma
+     */
+    handleUpdateRelatedCategories(customization) {
+      this.categoriesAssets.categories.forEach((c) => {
+        if (c.depends_category === customization.categoryId) {
+          // Pegando a customização da categoria relacionada
+          // e recuperando a subcategoryId para atualizar depois
+          // as informações de customização da categoria relacionada
+          const relatedCustomization = this.getCustomization(c.id);
+          let relatedCustomizationSubcategory = null;
+          let relatedCustomizationCategory = null;
+
+          if (!relatedCustomization) return;
+          c.assets.categories.forEach((cr) => {
+            cr.assets.subcategories.forEach((s) => {
+              s.assets.colors.forEach((c) => {
+                if (c.id === relatedCustomization.optionId) {
+                  relatedCustomizationSubcategory = s;
+                }
+              });
+            });
+          });
+
+          // Procurando a nova subcategoria
+          // já com a referência correta da categoria
+          relatedCustomizationCategory = c.assets.categories.find((cr) => {
+            return cr.parent_id === customization.optionId;
+          });
+
+          if (relatedCustomizationCategory) {
+            relatedCustomizationCategory.assets.subcategories.forEach((s) => {
+              if (s.id === relatedCustomizationSubcategory.id) {
+                s.assets.colors.forEach((c) => {
+                  if (c.hexa === relatedCustomization.optionName) {
+                    relatedCustomization.optionId = c.id;
+                    relatedCustomization.optionName = c.hexa;
+                    relatedCustomization.optionAsset = c.assets.asset;
+                    relatedCustomization.optionZIndex = s.z_index;
+                  }
+                });
+              }
+            });
+          }
+        }
+      });
+    },
+    fakeData() {
+      const categoryId = this.categoriesAssets.categories[0]
+        ? this.categoriesAssets.categories[0].id
+        : 0;
+      const categoryId2 = this.categoriesAssets.categories[1]
+        ? this.categoriesAssets.categories[1].id
+        : 0;
+      this.categoriesAssets.collections = [];
+      this.categoriesAssets.collections.push({
+        id: 10000,
+        name: "Vestuario",
+        icon: "https://dka04237waacy.cloudfront.net/uploads/turma-da-monica/tp-corpo-branco-3.png",
+        categories: [categoryId, categoryId2],
+      });
+    },
+    parseCollection() {
+      if (
+        this.categoriesAssets.collections &&
+        this.categoriesAssets.collections[0]
+      ) {
+        this.categoriesAssets.collections[0].categories.forEach((el, index) => {
+          this.categoriesAssets.collections[0].categories[index] = parseInt(el);
+        });
+      }
+    },
+    removeTooltip() {
+      const tooltip = document.getElementsByClassName("mobile-tooltip")[0];
+      tooltip.parentNode.removeChild(tooltip);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
+
+.mobile-tooltip {
+  display: none;
+  @media (max-width: 992px) {
+    // display: flex;
+    display: none;
+    position: absolute;
+    z-index: 90000000;
+    height: calc(100vh - 59px);
+    width: 100%;
+    transition: all 0.3s;
+    bottom: 0;
+    .tooltip {
+      border-radius: 5px;
+      color: white;
+      font-size: 14px;
+      padding: 10px 36px 10px 16px;
+      width: 350px;
+      margin-left: 15px;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.31);
+      line-height: 1.5;
+      position: relative;
+      margin-top: auto;
+      bottom: calc(var(--cp) + 25px);
+      &:after {
+        top: 100%;
+        left: 5%;
+        border: solid transparent;
+        content: " ";
+        position: absolute;
+        border-width: 10px;
+      }
+      i {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+      }
+    }
+  }
+}
+</style>