flowrix 1.0.1-beta.147 → 1.0.1-beta.149

package/dist/runtime/components/product/AddToCart.d.vue.ts

@@ -0,0 +1,15 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    product?: any;
+    from?: any;
+    service?: any;
+    quantity?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly product?: any;
+    readonly from?: any;
+    readonly service?: any;
+    readonly quantity?: any;
+};

package/dist/runtime/components/product/AddToCart.vue

@@ -0,0 +1,176 @@
+<script setup>
+const { from, product, service, quantity } = defineProps(["from", "product", "service", "quantity"]);
+import PopUp from "./PopUpCart.vue";
+import RequiredPopUp from "./RequiredPopUp.vue";
+const route = useRoute();
+const RequiredValidation = ref([]);
+const queryParameters = route.query ? route.query : null;
+let productId = queryParameters?.customize ? queryParameters.customize : null;
+const newProduct = queryParameters?.copy ? productId = "" : productId = productId;
+const showError = ref(false);
+const ErrorMessage = ref("");
+const open = ref(false);
+const isLoading = ref(false);
+const closeerrorModal = () => {
+  showError.value = false;
+  ErrorMessage.value = "";
+};
+const price_span = ref("");
+const getFormData = () => {
+  const customProductForm = document.querySelector(".customproductform");
+  const form = customProductForm;
+  if (form) {
+    const formData = new FormData(form);
+    const formObject = {};
+    const visibleFields = Array.from(formData.entries()).filter(([key]) => {
+      const element = form.querySelector(`[name="${key}"]`);
+      if (element.required == true && element.value == "") {
+        let Ename = element.getAttribute("data-label");
+        let Evalidation = element.getAttribute("data-validation");
+        let Relemnt = [{ name: Ename, validation: Evalidation }];
+        RequiredValidation.value = [...RequiredValidation.value, ...Relemnt];
+      }
+      const parentElement = element.closest(".single-attribute") ? element.closest(".single-attribute") : element;
+      return parentElement;
+    });
+    visibleFields.forEach(([key, value]) => {
+      formObject[key] = value;
+    });
+    return formObject;
+  }
+};
+const proQuantity = ref(1);
+const addToCart = async (product2, productId2) => {
+  isLoading.value = true;
+  RequiredValidation.value = [];
+  let DontCheckError = 0;
+  price_span.value = document.querySelector(".product-details .price_span") ? document.querySelector(".product-details .price_span").innerHTML : 0;
+  try {
+    var mainwidthelement = document.querySelector(".mainwidthInput");
+    if (mainwidthelement) {
+      var maintitle = mainwidthelement.getAttribute("data-title");
+      var mainwidth = parseInt(mainwidthelement.value);
+      var subwidths = document.querySelectorAll(".subWidthInput");
+      if (mainwidth && subwidths.length > 0) {
+        DontCheckError = subwidths.length;
+        var allfieldsum = 0;
+        var title = "";
+        subwidths.forEach((subwidth, index) => {
+          var grandparent = subwidth.parentElement.parentElement.parentElement.parentElement;
+          const grandparentStyle = window.getComputedStyle(grandparent);
+          if (grandparentStyle.display === "none") {
+            DontCheckError = DontCheckError - 1;
+          } else {
+            allfieldsum = parseInt(allfieldsum) + parseInt(subwidth.value);
+            title += index == 0 ? "" : " + ";
+            title += subwidth.getAttribute("data-title");
+          }
+        });
+        if (DontCheckError > 0) {
+          if (allfieldsum != mainwidth) {
+            showError.value = true;
+            ErrorMessage.value = `The total ${maintitle} must be equal to ${title}.`;
+            return false;
+          }
+        }
+      }
+    }
+    var mainheightelement = document.querySelector(".mainHeightInput");
+    if (mainheightelement) {
+      var maintitlehieght = mainheightelement.getAttribute("data-title");
+      var mainheight = parseInt(mainheightelement.value);
+      var subheight = document.querySelectorAll(".subHeightInput");
+      if (mainheight && subheight.length > 0) {
+        DontCheckError = subwidths.length;
+        var allfieldsum = 0;
+        var title = "";
+        subheight.forEach((subwidth, index) => {
+          var grandparent = subwidth.parentElement.parentElement.parentElement.parentElement;
+          const heightgrandparentStyle = window.getComputedStyle(grandparent);
+          if (heightgrandparentStyle.display === "none") {
+            DontCheckError = DontCheckError - 1;
+          } else {
+            allfieldsum = parseInt(allfieldsum) + parseInt(subwidth.value);
+            title += index == 0 ? "" : " + ";
+            title += subwidth.getAttribute("data-title");
+          }
+        });
+        if (DontCheckError > 0) {
+          if (allfieldsum != mainheight) {
+            showError.value = true;
+            ErrorMessage.value = `The total ${maintitlehieght} must be equal to ${title} ${maintitlehieght}.`;
+            return false;
+          }
+        }
+      }
+    }
+    const formData = getFormData();
+    const cartItems = useCartStore().cart.items;
+    let qty = quantity;
+    if (productId2 && cartItems != void 0 && Object.values(cartItems).length > 0) {
+      const cartItem = Object.values(cartItems).filter((item) => item.rowId == productId2)[0];
+      qty = cartItem.qty;
+      proQuantity.value = qty;
+    }
+    if (RequiredValidation.value.length > 0) {
+      return false;
+    }
+    await useCartStore().addToCart(product2, qty, formData, newProduct);
+    if (useCartStore().addedResponse == "success") {
+      open.value = true;
+    }
+  } catch (error) {
+    console.error("Error in addToCart:", error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+const closeModal = () => {
+  open.value = false;
+  RequiredValidation.value = [];
+};
+</script>
+
+<template>
+   <button
+  type="button"
+  class="btn btn-primary add-to-cart-btn position-relative"
+  id="ihy7hw"
+  data-gjs-type="add-to-cart-button"
+  @click="addToCart(product, productId)"
+  :disabled="isLoading"
+>
+  <div
+    id="iaol9y"
+    data-gjs-type="text"
+    :class="{ 'opacity-0': isLoading }"
+  >
+    <span v-if="productId">Update to Cart</span>
+    <span v-else>Add to Cart</span>
+  </div>
+
+  <LoadingSpinner
+    v-if="isLoading"
+    :show="isLoading"
+    size="sm"
+    spinner-variant="light"
+    text-variant="white"
+    text="Loading..."
+  />
+</button>
+    <div class="error-popup-modal" v-if="showError == true">
+      <div class="error-body">
+        <p class="text-danger text-wrap">{{ ErrorMessage }}</p>
+        <span @click="closeerrorModal" class="btn btn-primary py-0 px-3">Close</span>
+      </div>
+    </div>
+    <Teleport to="#teleports">
+      <div class="modals">
+        <PopUp v-if="open" @some-event="closeModal" :proQuantity="proQuantity" :productData="product"
+          :price="price_span" />
+      </div>
+      <div v-if="RequiredValidation.length > 0">
+        <RequiredPopUp @closeRequried="closeModal" :fields="RequiredValidation" />
+      </div>
+    </Teleport>
+</template>

package/dist/runtime/components/product/AddToCart.vue.d.ts

@@ -0,0 +1,15 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    product?: any;
+    from?: any;
+    service?: any;
+    quantity?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly product?: any;
+    readonly from?: any;
+    readonly service?: any;
+    readonly quantity?: any;
+};

package/dist/runtime/components/product/AddtoCartSample.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    samples: Array<any>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/product/AddtoCartSample.vue

@@ -0,0 +1,110 @@
+<script setup>
+const props = defineProps({
+  samples: { type: Array, required: true }
+});
+import PopUpCart from "./PopUpCart.vue";
+const samplesData = ref(props.samples || []);
+const flattenedValues = ref([]);
+watch(samplesData, (newVal) => {
+  if (newVal && newVal.length > 0) {
+    flattenedValues.value = newVal.flatMap(
+      (item) => item.attributeInfo?.values ? Object.values(item.attributeInfo.values) : []
+    );
+  } else {
+    flattenedValues.value = [];
+  }
+}, { immediate: true });
+const checkInCart = ((product2) => {
+  let cartItems = useCartStore().cart.items;
+  if (cartItems) {
+    for (const key in cartItems) {
+      if (cartItems[key].slug === product2.slug) {
+        return false;
+      }
+    }
+  }
+  return true;
+});
+const open = ref(false);
+const isAddingToCart = ref(false);
+const price_span = ref("");
+const product = ref(null);
+const addToCart = async (samples, qty) => {
+  if (!samples) return;
+  isAddingToCart.value = true;
+  try {
+    for (const sample of Object.values(samples)) {
+      if (sample) {
+        let productToAdd = { slug: sample };
+        if (checkInCart(productToAdd)) {
+          await useCartStore().addToCart(productToAdd, 1);
+          if (useCartStore().addedResponse === "success") {
+            product.value = productToAdd;
+            open.value = true;
+          }
+        }
+      }
+    }
+  } finally {
+    isAddingToCart.value = false;
+  }
+};
+const removeFromCart = async (productId, product2) => {
+  await useCartStore().removeFromCart(productId, product2);
+};
+const closeModal = () => {
+  open.value = false;
+};
+const orderSampleButtonDisabled = computed(() => {
+  const currentScriptSamples = props.samples;
+  if (!currentScriptSamples || Object.keys(currentScriptSamples).length === 0) {
+    return true;
+  }
+  const samplesArray = Object.values(currentScriptSamples);
+  if (samplesArray.length === 0) {
+    return true;
+  }
+  for (const sample of samplesArray) {
+    if (sample) {
+      const productToCheck = { slug: sample };
+      if (checkInCart(productToCheck)) {
+        return false;
+      }
+    }
+  }
+  return true;
+});
+</script>
+
+<template>
+    <div class="text-center">
+        <button type="button" v-if="orderSampleButtonDisabled == false" @click="addToCart(samples, 1)"
+            class="btn btn-primary order-sample-btn text-center fw-semibold d-block w-100 rounded-pill py-2 position-relative"
+            id="i5n8mj" :disabled="isAddingToCart">
+            <div id="i0aidl" :class="{ 'opacity-0': isAddingToCart }">
+                <span v-if="!isAddingToCart">Order Free Sample</span>
+                <span v-else>Processing...</span>
+            </div>
+
+            <span v-if="isAddingToCart"
+                class="spinner-border spinner-border-sm position-absolute top-50 start-50 translate-middle"
+                role="status" aria-hidden="true"></span>
+        </button>
+        <button type="button" v-else :disabled="orderSampleButtonDisabled == true"
+            class="btn btn-outline-primary fw-semibold d-block w-100 rounded-pill py-2">
+            <i class="text-secondary">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+                    <path fill="currentColor" fill-rule="evenodd"
+                        d="M7 7c0-2.762 2.238-5 5-5s5 2.238 5 5v3h.4c.88 0 1.6.72 1.6 1.6v7c0 1.32-1.08 2.4-2.4 2.4H7.4C6.08 21 5 19.92 5 18.6v-7c0-.88.72-1.6 1.6-1.6H7zm8 0v3H9V7c0-1.658 1.342-3 3-3s3 1.342 3 3m-3 5.25a1.75 1.75 0 0 0-.75 3.332V18a.75.75 0 0 0 1.5 0v-2.418A1.75 1.75 0 0 0 12 12.25"
+                        clip-rule="evenodd" />
+                </svg>
+            </i>
+            SAMPLE ALREADY IN YOUR BASKET
+        </button>
+    </div>
+    <Teleport to="#teleports">
+        <div v-if="open" class="modals">
+            <PopUpCart @some-event="closeModal" :productData="flattenedValues[0]" :price="price_span" />
+        </div>
+    </Teleport>
+</template>

package/dist/runtime/components/product/AddtoCartSample.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    samples: Array<any>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/product/Badges.d.vue.ts

@@ -0,0 +1,13 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    productData: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    productData: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/product/Badges.vue

@@ -0,0 +1,84 @@
+<script setup>
+const props = defineProps({
+  productData: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div class="badges">
+    <template v-for="(badge, index) in productData.badges">
+      <div class="single-badge" :class="badge.position" v-if="badge.image">
+        <img :src="badge.image" width="100%" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.badges {
+  position: absolute;
+  z-index: 9;
+  top: 0px;
+  left: 0px;
+  width: calc(100% - 15px);
+  height: calc(100% - 10px);
+  user-select: none;
+  pointer-events: none;
+}
+.badges .single-badge {
+  width: 100px;
+}
+.badges .single-badge.top-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.badges .single-badge.top-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.badges .single-badge.top-center {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.badges .single-badge.middle-left {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+.badges .single-badge.middle-right {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+.badges .single-badge.middle-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.badges .single-badge.bottom-left {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+.badges .single-badge.bottom-right {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.badges .single-badge.bottom-center {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+</style>

package/dist/runtime/components/product/Badges.vue.d.ts

@@ -0,0 +1,13 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    productData: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    productData: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/product/Description.d.vue.ts

@@ -0,0 +1,9 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    product?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly product?: any;
+};

package/dist/runtime/components/product/Description.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+defineProps(["product"]);
+const isMobile = ref(false);
+const checkMobile = () => {
+  isMobile.value = window.innerWidth < 768;
+};
+onMounted(() => {
+  checkMobile();
+  window.addEventListener("resize", checkMobile);
+});
+onUnmounted(() => {
+  window.removeEventListener("resize", checkMobile);
+});
+</script>
+
+<template>
+    <div class="accordion mt-5" id="accordionDescription">
+        <div class="accordion-item" v-if="product && product.description">
+            <h2 class="accordion-header">
+                <button 
+                    class="accordion-button" 
+                    :class="{ 'collapsed': !isMobile }"
+                    type="button" 
+                    data-bs-toggle="collapse"
+                    data-bs-target="#flush-collapseOne" 
+                    :aria-expanded="isMobile"
+                    aria-controls="flush-collapseOne">
+                    Product Details
+                </button>
+            </h2>
+            <div 
+                id="flush-collapseOne" 
+                class="accordion-collapse collapse"
+                :class="{ 'show': isMobile }"
+                data-bs-parent="#accordionDescription">
+                <div class="accordion-body" v-html="product.description"></div>
+            </div>
+        </div>
+        <div class="accordion-item" v-if="product && product.specs && product.specs.length > 0">
+            <h2 class="accordion-header">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
+                    Manufacturing & Delivery 
+                </button>
+            </h2>
+            <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionDescription">
+                <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
+                    <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this
+                    being filled with some actual content.
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item" v-if="product && product.instructions && product.instructions.length > 0">
+            <h2 class="accordion-header">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
+                    Measuring Guide
+                </button>
+            </h2>
+            <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionDescription">
+                <div class="accordion-body">
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item p-0" v-for="items in product.instructions" :key="items.id">
+                            <a :href="items.file" target="_blank">{{ items.title }}</a>
+                            <div v-html="items.description"></div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.accordion-item {
+  margin-bottom: 20px;
+  border-radius: 10px;
+}
+.accordion-item:not(:first-of-type) {
+  border-top: 1px solid #dee2e6;
+}
+.accordion-item .accordion-button {
+  border-radius: 10px !important;
+  font-weight: 600;
+}
+.accordion-item .accordion-button:focus {
+  box-shadow: unset;
+}
+.accordion-item .accordion-button:not(.collapsed) {
+  background: none;
+  box-shadow: unset;
+  border-bottom: 1px solid #ddd;
+  border-radius: 0 !important;
+}
+</style>

package/dist/runtime/components/product/Description.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    product?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly product?: any;
+};

package/dist/runtime/components/product/Dynamic.d.vue.ts

@@ -0,0 +1,9 @@
+declare const __VLS_export: import("vue").DefineComponent<{
+    product?: any;
+    data?: any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    product?: any;
+    data?: any;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;