flowrix 1.0.1-beta.16 → 1.0.1-beta.160

package/dist/runtime/components/Product/PopUpCart.vue

@@ -0,0 +1,155 @@
+<script setup>
+const { productData, price } = defineProps(["productData", "price"]);
+const companyProfile = useCompanyProfile().profile.data;
+</script>
+
+<template>
+<div>
+    <div class="modals modal">
+        <div class="modal-dialog modal-dialog-centered opacity-100">
+            <div class="modal-content rounded-0">
+                <div class="modal-body pb-0 position-relative px-4">
+                    <div class="card mb-lg-3 border-0 bg-transparent position-relative">
+                        <button type="button" class="btn-close d-none d-md-block" @click="$emit('some-event')"></button>
+                        <div class="row gy-0 align-items-center">
+                            <div class="col-12 col-md-3 col-xl-2 d-flex align-items-center">
+                                <img :src="productData.image" height="300px" class="img-fluid image w-100"
+                                    :alt="productData.name">
+                            </div>
+                            <div class="col-12 col-sm-8 col-md-9 col-xl-10 d-flex align-items-center">
+                                <div class="card-body w-100">
+                                    <p class="fw-normal mb-0 fs-6">Added to your shopping cart</p>
+                                    <p class="fw-bold mb-2" v-if="Number(price)>0">{{ productData.name }} - <span class="text-primary">{{ companyProfile.currencySymbol  }} {{
+                                        price }}</span></p>
+                                    <p class="fw-bold mb-2 fs-4 mt-2" v-else>{{ productData.name }} - <span class="text-primary"> {{ companyProfile.currencySymbol }}{{
+                                        useCustomeScriptDynamic().productPrice || productData?.price }}</span></p>
+                                    <p class="text-secondary fw-bold mb-0 fs-6 mt-2">You can continue shopping or move to your
+                                        shopping cart
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer d-flex flex-row flex-wrap flex-md-nowrap mt-0 px-4">
+                    <button type="button" class="btn rounded-pill btn-secondary w-100 fw-semibold text-white" @click="$emit('someEvent')"> Continue Shopping</button>
+                    <NuxtLink :to="{ path:'/checkout/cart'}" class="btn rounded-pill btn-outline-secondary w-100 text-dark shadow-none fw-semibold border">View your shopping
+                        cart <i class="bi bi-chevron-right"></i> </NuxtLink>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<style scoped>
+.modal {
+  z-index: 9999909999;
+  background-color: rgba(51, 51, 51, 0.55);
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+}
+.modal .modal-dialog {
+  max-width: 700px;
+  width: 75%;
+}
+.modal .modal-dialog .image {
+  width: 100%;
+  height: 88px;
+  object-fit: cover;
+}
+
+.btn-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 10;
+  opacity: 0.6;
+  transition: opacity 0.2s ease;
+}
+.btn-close:hover {
+  opacity: 1;
+}
+
+@media only screen and (max-width: 768px) {
+  .modal-dialog {
+    width: 92% !important;
+    max-width: 400px !important;
+    margin: auto !important;
+    padding: 1rem !important;
+  }
+  .modal-content {
+    border-radius: 16px !important;
+    animation: fadeInScale 0.25s ease-out !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
+  }
+  .modal-body {
+    padding: 1rem 1.25rem 0.5rem !important;
+  }
+  /* Alternative position: Inside modal but top-right */
+  /* .btn-close {
+      position: absolute !important;
+      top: 0.75rem !important;
+      right: 0.75rem !important;
+      width: 36px !important;
+      height: 36px !important;
+      padding: 0.5rem !important;
+      opacity: 0.8 !important;
+      background-size: 1rem !important;
+      background-color: rgba(255, 255, 255, 0.95) !important;
+      border-radius: 50% !important;
+      backdrop-filter: blur(4px) !important;
+      z-index: 1000 !important;
+  } */
+  .modal-footer {
+    flex-direction: column !important;
+    gap: 0.625rem !important;
+    padding: 0.75rem 1.25rem 1.25rem !important;
+    border-top: 1px solid #f1f3f5 !important;
+  }
+  .card-body {
+    padding-right: 2rem !important;
+  }
+  .card-body p.fs-5 {
+    font-size: 0.8375rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+  .card-body p.fs-4 {
+    font-size: 1.4625rem !important;
+    margin-bottom: 0.375rem !important;
+  }
+  .card-body p.fs-6 {
+    font-size: 0.8125rem !important;
+    line-height: 1.4 !important;
+    font-weight: 500 !important;
+  }
+  .card-body .fw-bold.mb-2 {
+    font-size: 0.875rem !important;
+    line-height: 1.3 !important;
+    max-height: 2.6em !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    display: block !important;
+  }
+  .image {
+    height: 195px !important;
+    border-radius: 6px !important;
+    object-fit: cover !important;
+  }
+  .row.g-0 {
+    gap: 0.75rem !important;
+  }
+}
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>

package/dist/runtime/components/Product/PopUpCart.vue.d.ts

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

package/dist/runtime/components/Product/ProductInfo.d.vue.ts

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

package/dist/runtime/components/Product/ProductInfo.vue

@@ -0,0 +1,105 @@
+<script setup>
+import ProductAddToCart from "./AddToCart.vue";
+const { product } = defineProps(["product"]);
+function scrollToTop() {
+  window.scrollTo({ top: 0, behavior: "smooth" });
+}
+</script>
+
+<template>
+    <div v-if="product.type == 'custom'"
+        class="fixed-product-info align-items-center justify-content-between py-2 px-5 d-none d-xl-flex">
+        <div class="d-flex align-items-center">
+            <img :src="product?.image" alt="Product Image" class="product-image me-3 rounded-4" />
+            <h2 class="mb-0 fs-4 me-4 fw-semibold">{{ product?.name }}</h2>
+        </div>
+        <div class="d-flex align-items-center gap-3">
+            <div class="price lh-1 d-flex justify-content-start gap-3 align-items-center">
+                <span class="pricecontent fs-2 fw-bold text-primary">
+                    $<span class="price_span">{{ useCustomeScriptDynamic().productPrice }}</span>
+                </span>
+                <span class="if-discounted text-danger text-decoration-line-through"
+                    v-if="useCustomeScriptDynamic().productDiscountedPrice > 0">
+                    $<span id="dis_price">{{ useCustomeScriptDynamic().productDiscountedPrice }}</span>
+                </span>
+            </div>
+            <ProductAddToCart from="detailpage" :product="product" service="" />
+            <button class="btn" @click="scrollToTop" title="Go to top">
+                <!-- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
+                    class="bi bi-arrow-up" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd"
+                        d="M8 12a.5.5 0 0 0 .5-.5V4.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 4.707V11.5A.5.5 0 0 0 8 12z" />
+                </svg> -->
+            </button>
+        </div>
+    </div>
+    <div v-if="product.type == 'simple'"
+        class="fixed-product-info align-items-center justify-content-between py-2 px-5 d-none d-xl-flex">
+        <div class="d-flex align-items-center">
+            <img :src="product?.image" alt="Product Image" class="product-image me-3" />
+            <h2 class="mb-0 me-4 fs-4">{{ product?.name }}</h2>
+        </div>
+        <div class="d-flex align-items-center gap-3">
+            <div class="price lh-1 d-flex justify-content-start gap-3 align-items-center">
+                <span class="if-discounted text-danger text-decoration-line-through"
+                    v-if="product.rpfloat > product.pricefloat">
+                    <span id="dis_price">{{ product.rp }}</span>
+                </span>
+                <span class="pricecontent fs-1 fw-bold text-primary">
+                    <span class="price_span">{{ product.price }}</span>
+                </span>
+            </div>
+            <ProductAddToCart from="detailpage" :product="product" service="" />
+            <button class="btn" @click="scrollToTop" title="Go to top">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
+                    class="bi bi-arrow-up" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd"
+                        d="M8 12a.5.5 0 0 0 .5-.5V4.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 4.707V11.5A.5.5 0 0 0 8 12z" />
+                </svg>
+            </button>
+        </div>
+    </div>
+    <div v-if="product?.type === 'bundle'"
+        class="fixed-product-info align-items-center justify-content-between py-2 px-5 d-none d-xl-flex">
+        <div class="d-flex align-items-center">
+            <img :src="product?.image" alt="Product Image" class="product-image me-3" />
+            <h2 class="mb-0 me-4 fs-4">{{ product?.name }}</h2>
+        </div>
+        <div class="d-flex align-items-center gap-3">
+            <div class="price lh-1 d-flex justify-content-start gap-3 align-items-center">
+                <span class="if-discounted text-danger text-decoration-line-through"
+                    v-if="product.rpfloat > product.pricefloat">
+                    <span id="dis_price">{{ product.rp }}</span>
+                </span>
+                <span class="pricecontent fs-1 fw-bold text-primary">
+                    <span class="price_span">{{ product.price }}</span>
+                </span>
+            </div>
+            <ProductAddToCart from="detailpage" :product="product" service="" />
+            <button class="btn" @click="scrollToTop" title="Go to top">
+                <div class="d-flex flex-column align-items-center p-0 m-0" style="gap:0; line-height:0;">
+                    <i class="p-0 m-0" style="display:block; line-height:0; height:20px; overflow:hidden;">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="34" viewBox="0 0 24 24">
+                            <path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"
+                                stroke-width="2" d="m17 14l-5-5m0 0l-5 5" />
+                        </svg>
+                    </i>
+                    <i class="p-0 m-0" style="display:block; line-height:0; height:24px; overflow:hidden;">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                            style="display:block; vertical-align:middle;">
+                            <g fill="none" stroke="#000" stroke-linejoin="round" stroke-width="1.5">
+                                <path d="M6 9a6 6 0 0 1 12 0v6a6 6 0 0 1-12 0z" />
+                                <path stroke-linecap="round" d="M12 7v4" />
+                            </g>
+                        </svg>
+                    </i>
+                </div>
+
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.fixed-product-info{background:#fff;border-top:1px solid #eee;bottom:0;box-shadow:0 -2px 8px rgba(0,0,0,.05);left:0;position:fixed;width:100%;z-index:2}.product-image{border-radius:8px;height:50px;-o-object-fit:contain;object-fit:contain;width:64px}
+</style>

package/dist/runtime/components/Product/ProductInfo.vue.d.ts

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

package/dist/runtime/components/Product/RequiredPopUp.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>;
+    fields?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly fields?: any;
+};

package/dist/runtime/components/Product/RequiredPopUp.vue

@@ -0,0 +1,57 @@
+<script setup>
+const { fields } = defineProps(["fields"]);
+</script>
+
+<template>
+    <div>
+        <div class="modals modal">
+            <div class="modal-dialog modal-lg modal-dialog-centered opacity-100">
+                <div class="modal-content">
+                    <div class="modal-header py-2 bg-secondary">
+                        <h4 class="modal-title fs-5 text-start text-white fw-semibold">Please provide the missing information before adding to the cart.</h4>
+                        <button type="button" class="btn-close text-white" data-bs-dismiss="modal" @click="$emit('closeRequried')"
+                            aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <p class="text-danger text-start fs-6" v-for="(field, key) in fields">{{ key + 1 }}) <b>{{
+                            field.name
+                                }}</b> {{ field.validation }}</p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary btn-sm text-white"
+                            @click="$emit('closeRequried')" data-bs-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.btn-close {
+  filter: brightness(0) invert(1);
+  opacity: 1;
+}
+
+.modal {
+  z-index: 9999909999;
+  background-color: rgba(51, 51, 51, 0.55);
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+}
+.modal .modal-dialog {
+  width: 50%;
+}
+.modal .modal-dialog .image {
+  width: 100%;
+  height: 88px;
+  object-fit: cover;
+}
+
+@media only screen and (max-width: 768px) {
+  .modal-dialog {
+    width: 100% !important;
+  }
+}
+</style>

package/dist/runtime/components/Product/RequiredPopUp.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>;
+    fields?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly fields?: any;
+};

package/dist/runtime/components/Product/bundleProduct/Bundle.d.vue.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    product: {
+        bundle: Array<{
+            image: string;
+            name: string;
+            quantity: number;
+            price: string;
+        }>;
+    };
+};
+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/bundleProduct/Bundle.vue

@@ -0,0 +1,35 @@
+<script setup>
+const props = defineProps({
+  product: { type: Object, required: true }
+});
+</script>
+
+<template>
+  <div>
+    <p class="fw-bold mt-5">What's in the bundle</p>
+    <div class="table-responsive">
+      <table class="table table-light">
+        <thead>
+          <tr>
+            <th width="10%" scope="col"></th>
+            <th width="30%" scope="col">Part Name</th>
+            <th width="10%" scope="col">Qty</th>
+            <th width="10%" scope="col">Unit Price</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in product.bundle" :key="index">
+            <td scope="row">
+              <img :src="item.image" class="img-fluid bundle_image" :alt="item.name" />
+            </td>
+            <td class="align-middle">
+              <p class="fw-bold text-primary mb-0">{{ item.name }}</p>
+            </td>
+            <td class="align-middle">{{ item.qty }}</td>
+            <td class="align-middle text-end fw-medium">{{ item.price }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Product/bundleProduct/Bundle.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    product: {
+        bundle: Array<{
+            image: string;
+            name: string;
+            quantity: number;
+            price: string;
+        }>;
+    };
+};
+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/bundleProduct/index.d.vue.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    product: {
+        template: string;
+    };
+};
+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/bundleProduct/index.vue

@@ -0,0 +1,32 @@
+<script setup>
+import gallery from "../Gallery.vue";
+import ProductAddToCart from "../AddToCart.vue";
+const { product } = defineProps({
+  product: { type: Object, required: true }
+});
+const quantity = ref(1);
+const incrementQuantity = () => {
+  quantity.value++;
+};
+const decrementQuantity = () => {
+  if (quantity.value > 1) {
+    quantity.value--;
+  }
+};
+</script>
+
+<template>
+        <SimpleProductDetails :title="product.name" :price="product.price" :reviews="product?.reviews" />
+        <BundleProductBundle :bundleData="product?.bundle" />
+        <div class="mt-4" v-if="product?.description != null">
+          <SimpleProductDescription :description="product?.description" :type="product?.type" />
+        </div>
+        <div class="d-flex flex-row justify-content-between align-items-center mt-4">
+          <CartCounter :quantity="quantity" @increment="incrementQuantity" @decrement="decrementQuantity" />
+          <h2 class="fw-semibold text-primary">{{ product?.price }}</h2>
+        </div>
+
+        <div class="add-to-cart-btn-container mt-4">
+          <ProductAddToCart from="detailpage" :quantity :product="product" service="" />
+        </div>
+</template>

package/dist/runtime/components/Product/bundleProduct/index.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    product: {
+        template: string;
+    };
+};
+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/customProduct/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/customProduct/AddtoCartSample.vue

@@ -0,0 +1,101 @@
+<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 && sample.sampleproduct) {
+        let productToAdd = { slug: sample.sampleproduct };
+        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 = useCustomeScriptDynamic().sampleproduct;
+  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 && sample.sampleproduct) {
+      const productToCheck = { slug: sample.sampleproduct };
+      if (checkInCart(productToCheck)) {
+        return false;
+      }
+    }
+  }
+  return true;
+});
+</script>
+
+<template>
+    <div v-if="useCustomeScriptDynamic().sampleproduct && Object.values(useCustomeScriptDynamic().sampleproduct).length > 0"
+        class="text-center bg-white-gray mb-4 border border-top-0 py-4">
+        <button v-if="orderSampleButtonDisabled === false" @click="addToCart(useCustomeScriptDynamic().sampleproduct, 1)"
+            class="btn d-inline-flex justify-content-center align-items-center btn-success fs-6 text-white fw-medium px-5 rounded-5"
+            :disabled="isAddingToCart">
+            <span v-if="!isAddingToCart">Order a Sample</span>
+            <span v-else class="d-flex align-items-center">
+                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                Processing...
+            </span>
+        </button>
+        <button v-else :disabled="orderSampleButtonDisabled"
+            class="btn d-inline-flex justify-content-center align-items-center btn-primary fs-6 text-white fw-medium px-5 rounded-5">
+            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/customProduct/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/customProduct/Attributes.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?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly product?: Record<string, any> | undefined;
+};

package/dist/runtime/components/Product/customProduct/Attributes.vue

@@ -0,0 +1,12 @@
+<script setup>
+import useAttributesDynamic from "../../../composables/Product/CustomProductDynamic/useAttributesDynamic";
+const { product } = defineProps({ "product": Object });
+const { CustomScript, Steps, ConfirmPopup, ConfirmPopupShow } = useAttributesDynamic(product, "", product.template);
+</script>
+
+<template>
+    <div class="product-Attributes">
+        <component :is="Steps" :product="product" />
+        <ConfirmPopup :message="CustomScript.msgStr" v-show="ConfirmPopupShow == true" />
+    </div>
+</template>

package/dist/runtime/components/Product/customProduct/Attributes.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?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly product?: Record<string, any> | undefined;
+};

package/dist/runtime/components/Product/customProduct/AttributesComponents/AttributeType/drop-down.d.vue.ts

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