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

package/dist/runtime/components/Pages/dynamic.vue

@@ -0,0 +1,124 @@
+<script setup>
+import { ref, onMounted, nextTick, defineAsyncComponent } from "vue";
+import { createApp, h } from "vue";
+import { useRoute } from "vue-router";
+import { useHead } from "#app";
+const breadCrumb = defineAsyncComponent(() => import("~/components/other/BreadCrumb.vue"));
+const route = useRoute();
+const slug = route.params.slug || "";
+const { data } = defineProps(["data"]);
+const grapeContainer = ref(null);
+const WebForm = defineAsyncComponent(
+  () => import("@/components/DynamicComponents/WebForm.vue")
+);
+const SubscriptionForm = defineAsyncComponent(
+  () => import("@/components/DynamicComponents/SubscriptionForm.vue")
+);
+onMounted(async () => {
+  await nextTick();
+  const container = grapeContainer.value;
+  if (!container) return;
+  container.innerHTML = data.data?.content?.html || '<div class="container text-center fs-4">No content Found</div>';
+  const formDivs = container.querySelectorAll("div[form_id]");
+  formDivs.forEach((el) => {
+    const formId = el.getAttribute("form_id");
+    if (!formId) return;
+    const mountEl = document.createElement("div");
+    el.replaceWith(mountEl);
+    createApp({
+      render() {
+        return h(WebForm, {
+          form_id: formId
+        });
+      }
+    }).mount(mountEl);
+  });
+  const subscriptionForms = container.querySelectorAll("[subscription_form], .orix-subscription-form");
+  subscriptionForms.forEach((el) => {
+    const mountEl = document.createElement("div");
+    el.replaceWith(mountEl);
+    createApp({
+      render() {
+        return h(SubscriptionForm);
+      }
+    }).mount(mountEl);
+  });
+  const scripts = container.querySelectorAll("script");
+  console.log("scripts", scripts);
+  scripts.forEach((oldScript) => {
+    const newScript = document.createElement("script");
+    for (const attr of oldScript.attributes) {
+      newScript.setAttribute(attr.name, attr.value);
+    }
+    newScript.textContent = oldScript.textContent;
+    oldScript.parentNode?.replaceChild(newScript, oldScript);
+  });
+});
+onMounted(async () => {
+  await nextTick();
+  const sections = document.querySelectorAll("[id]");
+  let activeLink = null;
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+        const id = entry.target.id;
+        const link = document.querySelector(`a[href="#${id}"]`);
+        if (!link) return;
+        if (activeLink && activeLink !== link) {
+          activeLink.style.backgroundColor = "";
+          activeLink.style.color = "";
+        }
+        link.style.backgroundColor = "rgb(0, 82, 137)";
+        link.style.color = "#ffffff";
+        activeLink = link;
+      });
+    },
+    {
+      threshold: 0.4
+    }
+  );
+  sections.forEach((section) => observer.observe(section));
+});
+</script>
+
+<template>
+  <div class="container-fluid px-3 px-lg-5">
+    <breadCrumb :breadcrumbs="data?.data?.breadcrumb" :breadcrumb_title="data?.data?.breadcrumb_title || data?.data?.name" />
+  </div>
+  <div ref="grapeContainer"></div>
+</template>
+
+<style scoped>
+:deep() .gjs-cell {
+  flex-grow: unset !important;
+  flex-basis: unset !important;
+}
+:deep() .accordion-button:not(.collapsed) {
+  background: none !important;
+  background-color: none !important;
+  color: unset !important;
+  font-weight: 500 !important;
+}
+:deep() .accordion-button:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+:deep() .accordion-item {
+  margin: 20px 0;
+  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important;
+}
+:deep() .accordion-header {
+  border-bottom: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important;
+}
+:deep() {
+  /* Scroll offset for anchor links - prevents content from hiding behind fixed header */
+}
+:deep() [id] {
+  scroll-margin-top: 150px;
+}
+</style>
+
+<style>
+.dynamicContent .accordion .accordion-button.collapsed{background-color:unset!important}.dynamicContent .accordion .accordion-button:not(.collapsed){background-color:unset!important;box-shadow:unset!important;color:unset!important;font-weight:500!important}
+</style>

package/dist/runtime/components/Pages/dynamic.vue.d.ts

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

package/dist/runtime/components/Pages/index.d.vue.ts

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

package/dist/runtime/components/Pages/index.vue

@@ -0,0 +1,214 @@
+<script setup>
+import { ref, defineAsyncComponent, onMounted, watch } from "vue";
+import stickyTabsPages from "../stickyTabsPages.vue";
+import { useRoute } from "vue-router";
+import { useHead } from "#app";
+const route = useRoute();
+const slug = route.params.slug || "home";
+const { data: fetchData, error } = await useFetch(`/api/page/${slug}`, {});
+const { pageData } = defineProps(["pageData"]);
+const dynamicContent = ref("");
+const stickyTabsContent = ref("");
+onMounted(() => {
+  if (fetchData.value?.data?.content?.html) {
+    dynamicContent.value = fetchData.value.data.content.html;
+  } else if (pageData?.data?.content?.html) {
+    dynamicContent.value = pageData.data.content.html;
+  }
+});
+const extractStickyTabsFromHTML = (html) => {
+  if (!html || typeof html !== "string") return "";
+  try {
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = html;
+    let targetElement = null;
+    targetElement = tempDiv.querySelector("#ik6c");
+    if (!targetElement) {
+      targetElement = tempDiv.querySelector(".gjs-cell");
+    }
+    if (!targetElement) {
+      const allCells = tempDiv.querySelectorAll(".gjs-cell");
+      if (allCells.length > 0) {
+        targetElement = allCells[0];
+      }
+    }
+    if (!targetElement) {
+      const possibleElements = tempDiv.querySelectorAll("div");
+      for (const el of possibleElements) {
+        if (el.classList.contains("gjs-cell") || el.querySelector(".how-tab-link")) {
+          targetElement = el;
+          break;
+        }
+      }
+    }
+    if (targetElement) {
+      return targetElement.outerHTML;
+    }
+    return "";
+  } catch (error2) {
+    console.error("Error extracting sticky tabs:", error2);
+    return "";
+  }
+};
+watch(dynamicContent, (newHtml) => {
+  if (newHtml) {
+    stickyTabsContent.value = extractStickyTabsFromHTML(newHtml);
+  }
+}, { immediate: true });
+const extractOnServer = (html) => {
+  if (!html) return "";
+  const idMatch = html.match(/<div[^>]*id="ik6c"[^>]*>.*?<\/div>/s);
+  if (idMatch) return idMatch[0];
+  const classMatch = html.match(/<div[^>]*class="[^"]*gjs-cell[^"]*"[^>]*>.*?<\/div>/s);
+  if (classMatch) return classMatch[0];
+  const structureMatch = html.match(/<div[^>]*>.*?class="how-tab-link".*?<\/div>/s);
+  if (structureMatch) return structureMatch[0];
+  return "";
+};
+if (process.server) {
+  const htmlToExtract = fetchData.value?.data?.content?.html || pageData?.data?.content?.html || "";
+  if (htmlToExtract) {
+    stickyTabsContent.value = extractOnServer(htmlToExtract);
+  }
+}
+const isDynamic = pageData?.data?.is_dynamic;
+const templateName = pageData?.data?.template;
+const DynamicComponent = defineAsyncComponent(() => import("./dynamic.vue"));
+const TemplateComponent = defineAsyncComponent({
+  loader: () => import(`./Template-${templateName}/index.vue`).catch(() => import("./Template-default/index.vue"))
+  // fallback
+});
+function scopeCss(css, scope = ".dynamicContent") {
+  return css.replace(
+    /(^|})\s*([^@}{]+)\s*\{/g,
+    (match, brace, selector) => {
+      if (selector.trim().startsWith("@")) {
+        return `${brace} ${selector} {`;
+      }
+      const scopedSelector = selector.split(",").map((sel) => {
+        sel = sel.trim();
+        if (sel.startsWith(scope)) return sel;
+        sel = sel.replace(/^body\b/, "").replace(/^html\b/, "").replace(/^\*/, "").trim();
+        return sel ? `${scope} ${sel}` : scope;
+      }).join(", ");
+      return `${brace} ${scopedSelector} {`;
+    }
+  );
+}
+useHead(() => {
+  const css = fetchData.value?.data?.content?.css || pageData?.data?.content?.css || "";
+  if (!css) return {};
+  return {
+    style: [
+      {
+        children: scopeCss(css),
+        id: "scoped-css",
+        type: "text/css"
+      },
+      {
+        children: fetchData.value?.data?.content?.globalstyles?.globalCSS,
+        id: "global-css",
+        type: "text/css"
+      }
+    ]
+  };
+});
+const fullPath = ((fullUrl = "") => {
+  if (process.server) {
+    const headers = useRequestHeaders();
+    const protocol = headers["x-forwarded-proto"] || "http";
+    const host = headers.host || "localhost";
+    fullUrl = `${protocol}://${host}${route.fullPath}`;
+  } else {
+    fullUrl = `${window.location.origin}${route.fullPath}`;
+  }
+  return fullUrl;
+});
+useHead({
+  title: fetchData.value?.data?.meta_title || pageData?.data?.meta_title,
+  meta: [
+    {
+      name: "description",
+      content: fetchData.value?.data?.meta_description || pageData?.data?.meta_description
+    },
+    {
+      name: "og:title",
+      content: fetchData.value?.data?.meta_title || pageData?.data?.meta_title
+    },
+    {
+      name: "og:description",
+      content: fetchData.value?.data?.meta_description || pageData?.data?.meta_description
+    },
+    {
+      name: "og:url",
+      content: fullPath()
+    }
+  ]
+});
+</script>
+
+<template>
+  <div class="container-fluid px-0">
+    <!-- Add a wrapper div with dynamicContent class -->
+    <div v-if="isDynamic" class="dynamicContent">
+      <DynamicComponent 
+        :pageData="pageData || fetchData?.data" 
+        :data="fetchData"
+      />
+    </div>
+    
+    <TemplateComponent 
+      v-else 
+      :pageData="pageData || fetchData?.data" 
+      :data="fetchData" 
+    />
+    
+    <!-- <stickyTabsPages 
+      v-if="stickyTabsContent" 
+      :htmlContent="stickyTabsContent" 
+    /> -->
+  </div>
+</template>
+
+<style scoped>
+.gjs-cell {
+  flex-grow: unset !important;
+  flex-basis: unset !important;
+}
+
+#ik6c {
+  width: auto !important;
+}
+
+@media (max-width: 575.98px) {
+  #ik6c {
+    max-width: 100% !important;
+    column-gap: 0 !important;
+  }
+  .how-tab-link {
+    font-size: 11px !important;
+  }
+}
+</style>
+
+<style>
+.accordion-button:not(.collapsed) {
+  background: none !important;
+  color: unset !important;
+  font-weight: 500;
+}
+
+.accordion-button:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.accordion-item {
+  margin: 20px 0;
+  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important;
+}
+
+.accordion-header {
+  border-bottom: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important;
+}
+</style>

package/dist/runtime/components/Pages/index.vue.d.ts

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

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>