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

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

@@ -0,0 +1,221 @@
+<script setup>
+import { ref, onBeforeMount, watch } from "vue";
+import { useWindowSize } from "@vueuse/core";
+const { product } = defineProps({ product: Object });
+import RequiredPopUp from "./RequiredPopUp.vue";
+import ProductAddToCart from "../AddToCart.vue";
+import AddtoCartSample from "../AddtoCartSample.vue";
+import ProductDescription from "../Description.vue";
+import ProductReviews from "./Reviews.vue";
+import wishlistDropdown from "../../WishList/dropdown.vue";
+const {
+  useCustomeScriptDynamic,
+  activeStep,
+  NextStep,
+  sortedGroups,
+  scrollToPosition,
+  SingleStep,
+  AddToCart,
+  RequiredValidation
+} = useStepsDynamic(product, product.template);
+const windowWidth = ref(0);
+const closeModal = () => {
+  open.value = false;
+  RequiredValidation.value = [];
+};
+const getScreenWidth = () => {
+  const headers = useRequestHeaders(["user-agent"]);
+  const userAgent = headers["user-agent"] || "";
+  const isMobile = /Mobile|Android|iP(hone|od|ad)/.test(userAgent);
+  return isMobile ? 375 : 1025;
+};
+const sampleData = computed(() => {
+  const samples = [];
+  for (const attributeId in product.attributeIdz) {
+    const attribute = product.attributeIdz[attributeId];
+    if (attribute.values) {
+      for (const valueId in attribute.values) {
+        const value = attribute.values[valueId];
+        if (value.sampleproduct) {
+          samples.push(value.sampleproduct);
+        }
+      }
+    }
+  }
+  return samples;
+});
+const partialGroup = (groups) => {
+  const myObject = groups;
+  var sortedObject = [];
+  if (myObject) {
+    const sortedArray = Object.entries(myObject).sort(
+      (a, b) => a[1]["sortorder"] - b[1]["sortorder"]
+    );
+    sortedArray.forEach(([key, value]) => {
+      sortedObject.push(value);
+    });
+  }
+  return sortedObject;
+};
+const showBtn = ref(true);
+const visibleSteps = ref(1);
+const showNextGroup = () => {
+  visibleSteps.value = product.groups.length;
+  showBtn.value = false;
+};
+const showSimpleGroup = () => {
+  visibleSteps.value = 1;
+  showBtn.value = true;
+};
+</script>
+
+<template>
+  <div class="row border-bottom mb-3">
+    <div class="col-xl-9">
+      <h1 class="text-primary fw-semibold fs-2 mt-3 mt-lg-0">{{ product.name }}</h1>
+    </div>
+    <div class="col-xl-3 col-auto order-first order-xl-last" v-if="product.reviews && product.reviews.length > 0">
+      <div class="reviews-stars">
+        <ProductReviews v-if="product.reviews && product.reviews.length > 0" :reviews="product.reviews" />
+      </div>
+    </div>
+  </div>
+  <div class="product-wizard">
+    <template v-if="SingleStep && AddToCart">
+      <template v-for="(group, index) in partialGroup(product.groups)" :key="group.id">
+        <div class="single-step" :class="{ 'd-none': (index + 1) > visibleSteps }">
+          <component :is="SingleStep" :group="group" :product />
+        </div>
+      </template>
+    </template>
+    <div class="product-top-details d-flex justify-content-end align-items-end mt-4 pb-3 border-bottom">
+      <div class="align-self-center">
+        <div class="d-flex flex-column price">
+          <span class="pricecontent fw-bold text-primary fs-1">
+            $<span class="price_span">{{ useCustomeScriptDynamic().productPrice }}</span>
+          </span>
+          <span class="if-discounted text-danger text-decoration-line-through fs-6"
+            v-if="useCustomeScriptDynamic().productDiscountedPrice > 0">
+            $<span id="dis_price">{{ useCustomeScriptDynamic().productDiscountedPrice }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="steps-buttons d-flex justify-content-between pt-3 pb-4">
+
+    <div class="col" v-if="getScreenWidth() < 1024">
+      <div class="d-flex flex-column price lh-1">
+        <span class="fs-3">Price</span>
+        <span>
+          <span class="pricecontent fs-2 fw-bold text-secondary">
+            $<span class="price_span fs-2">{{ useCustomeScriptDynamic().productPrice }}</span>
+          </span>
+          <span class="if-discounted fs-2 text-danger text-decoration-line-through"
+            v-if="useCustomeScriptDynamic().productDiscountedPrice > 0">
+            $<span id="dis_price fs-2">{{
+              useCustomeScriptDynamic().productDiscountedPrice
+            }}</span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div class="col mb-4">
+    <ProductAddToCart from="detailpage" :product="product" service="" />
+  </div>
+  <div class="col">
+    <button type="button" class="btn btn-outline-primary fw-semibold w-100 rounded-pill py-2" v-if="showBtn && Object.keys(product.groups).length>1" @click="showNextGroup">
+      Advanced Customisation
+    </button>
+    <button type="button" v-if="!showBtn && Object.keys(product.groups).length>1" @click="showSimpleGroup" class="btn btn-outline-primary fw-semibold w-100 rounded-pill py-2" >
+      Back to simple Customisation
+    </button>
+  </div>
+  <div v-if="sampleData.length>0" class="col mt-4">
+    <AddtoCartSample :samples="sampleData" />
+  </div>
+  <div class="d-flex justify-content-center align-content-center">
+    <wishlistDropdown :product="product" />
+  </div>
+  <ProductDescription :product />
+  <div v-if="RequiredValidation.length > 0">
+    <RequiredPopUp @closeRequried="closeModal" :fields="RequiredValidation" />
+  </div>
+</template>
+
+<style scoped>
+.product-wizard {
+  scrollbar-width: none;
+}
+
+.step-content {
+  transition-duration: 0s;
+  opacity: 0;
+  max-height: 0;
+  position: relative;
+  z-index: -1;
+}
+.step-content.active {
+  position: unset;
+  transition-duration: 500ms;
+  opacity: 1;
+  max-height: fit-content;
+}
+
+.backbutton:hover {
+  color: #fff;
+}
+
+.icon {
+  font-size: 14px;
+}
+
+.wizard-steps {
+  position: relative;
+  z-index: 2;
+  top: -25px;
+}
+
+.error-popup-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  display: grid;
+  place-items: center;
+}
+
+.error-body {
+  background: #fff;
+  width: 30%;
+  min-width: 300px;
+  padding: 20px;
+  text-align: center;
+}
+
+.reviews-stars {
+  display: flex;
+  justify-content: end;
+}
+
+@media screen and (max-width: 1024px) {
+  .step-content {
+    transition-duration: 0s;
+    opacity: 1;
+    max-height: unset;
+    position: unset;
+    z-index: -1;
+  }
+  .step-content.active {
+    position: unset;
+    transition-duration: 0ms;
+    opacity: 1;
+    max-height: unset;
+  }
+}
+</style>

package/dist/runtime/components/Product/customProduct/Steps.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/index.d.vue.ts

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

@@ -0,0 +1,272 @@
+<script setup>
+const { product, productData } = defineProps({
+  product: { type: Object, required: true },
+  productData: { type: null, required: true }
+});
+import attributes from "./Attributes.vue";
+import { useCustomeScriptDynamic } from "../../../composables/Product/CustomProductDynamic/useCustomeScriptDynamic";
+const gallery = defineAsyncComponent(() => import("../Gallery.vue"));
+const CustomScript = useCustomeScriptDynamic();
+onMounted(() => {
+  CustomScript.attributeIdz = product.attributeIdz;
+  CustomScript.lookupprices = product.lookupprices;
+  CustomScript.servicePriceSetting = product.servicePriceSetting;
+  CustomScript.conditions = product.conditions;
+  CustomScript.TYPES = product.types;
+  CustomScript.PRICETYPE = product.pricetypes;
+  CustomScript.UNIT_RELATIVE = product.unit_relative;
+  CustomScript.DISCOUNTS = product.discounts;
+  CustomScript.measurementUnit = product.unit;
+  CustomScript.promotionSettings = product.promotionSettings;
+  CustomScript.linked_promotionSettings = product.inherit_promotions;
+  CustomScript.B2BTYPE = product.b2btype;
+  CustomScript.USEBASEPRICE = product.usebaseprice;
+  CustomScript.BASEPRICE = product.baseprice;
+  CustomScript.usefitting = product.usefitting;
+  CustomScript.sevice_price_type = product.servicePriceSetting.sevice_price_type;
+  CustomScript.serviceprice = 0;
+});
+onUnmounted(() => {
+  CustomScript.renderdValues = 0;
+});
+</script>
+
+<template>
+  <!-- <pre>{{ CustomScript.productPrice }}</pre> -->
+      <form class="customproductform">
+        <!-- <pre>
+        {{ productData.html }}
+        </pre> -->
+        <attributes :product="product" :productData />
+      </form>
+</template>
+
+<style scoped>
+:deep() .wizard-steps .single-step {
+  position: relative;
+  z-index: 1;
+}
+:deep() .wizard-steps .single-step span {
+  width: 50px;
+  height: 50px;
+  background: #e5e5e5;
+  border-radius: 50%;
+  color: #8e8e8e;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 22px;
+  z-index: 0;
+  border: 1px solid #ded9d9;
+  margin: 0 auto;
+  cursor: pointer;
+}
+:deep() .wizard-steps .single-step span:hover {
+  background: var(--iseek-primary);
+  border: 0;
+  color: #fff;
+}
+:deep() .wizard-steps .single-step span.active {
+  background: var(--iseek-primary);
+  border: 0;
+  color: #fff;
+}
+:deep() .wizard-steps .single-step line.active {
+  width: 100%;
+  height: 3px;
+  display: block;
+  background: var(--iseek-primary);
+  position: absolute;
+  right: calc(50% - 25px);
+  z-index: -1;
+  top: 50%;
+}
+:deep() .price {
+  font-size: 18px;
+  font-weight: 400;
+  font-family: "Poppins";
+}
+:deep() .price .pricecontent {
+  color: var(--iseek-primary);
+  font-size: 3rem;
+  line-height: 1;
+}
+:deep() .product-sub-title {
+  font-size: 3rem !important;
+  margin-bottom: 20px;
+  font-weight: bold;
+  position: relative;
+}
+:deep() .product-sub-title span {
+  background: #fff;
+  z-index: 1;
+  position: relative;
+  padding-right: 10px;
+}
+:deep() .product-sub-title:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 3px;
+  left: 0;
+  bottom: 0;
+  background: var(--iseek-secondary);
+}
+:deep() .product-card-item #card-item-image {
+  height: 300px;
+  position: relative;
+  background-size: cover;
+  background-position: center;
+}
+:deep() .product-card-item #card-item-image img {
+  position: absolute;
+}
+:deep() .product-card-item .card-item-detail .card-item-title {
+  font-size: 2rem !important;
+  font-weight: bold;
+}
+:deep() .col-form-label {
+  font-family: "Poppins", Georgia, "Times New Roman", Times, serif;
+  font-size: 15px;
+}
+:deep() .input-group-text {
+  font-size: 1em;
+}
+:deep() .multiselect__input,
+:deep() .multiselect__single {
+  display: flex !important;
+  align-items: center !important;
+}
+:deep() span.option__desc {
+  display: block !important;
+  overflow: hidden;
+}
+:deep() span.option__title {
+  white-space: pre;
+}
+:deep() .image-box-magnifier-hover-image {
+  box-shadow: 0px 0px 5px 5px #e2e2e2;
+  border-radius: 10px;
+  width: 450px;
+  height: 450px;
+  z-index: 1;
+}
+:deep() .image-box-magnifier-hover-image-simple {
+  box-shadow: 0px 0px 5px 5px #e2e2e2;
+  border-radius: 10px;
+  width: 450px;
+  height: 300px;
+  z-index: 1;
+  width: auto !important;
+  position: absolute;
+  bottom: 100%;
+  background: #fff;
+}
+:deep() .lightbox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 99999;
+  animation: all ease-in-out 0.3s 0.3s;
+}
+:deep() .lightbox .lightbox-content {
+  position: relative;
+  background-color: #fff;
+  padding: 10px;
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 9px;
+}
+:deep() .lightbox .lightbox-content .close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+  cursor: pointer;
+}
+:deep() .lightbox .lightbox-content .light-img {
+  height: 500px;
+  margin-bottom: 10px;
+}
+:deep() .lightbox .lightbox-content .nav {
+  position: absolute;
+  top: calc(50% - 5px);
+}
+:deep() .lightbox .lightbox-content .nav.btn-prev {
+  left: -30px;
+  right: auto;
+}
+:deep() .lightbox .lightbox-content .nav.btn-next {
+  right: -30px;
+  left: auto;
+}
+
+.product-summary-sticky {
+  position: fixed;
+  right: 0;
+  width: 5vw;
+  height: 100px;
+  background: var(--iseek-primary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px 0 0 20px;
+  top: calc(50% - 50px);
+}
+.product-summary-sticky #summray-opener {
+  text-align: center;
+  display: flex;
+  padding: 0 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.product-summary-sticky #summray-opener h4 {
+  font-size: 11px;
+  margin-top: 5px;
+  /* white-space:nowrap; */
+  text-align: center;
+  color: #fff;
+}
+
+.sticky_summary_details {
+  position: fixed;
+  padding: 20px 30px;
+  width: 35vw;
+  border-radius: 10px;
+  top: calc(50vh - 150px);
+  right: 0;
+  background: #eeeeee;
+  font-size: 13px;
+  line-height: 1;
+  z-index: 99;
+}
+.sticky_summary_details.mobile {
+  display: block;
+  position: unset;
+  width: 90vw;
+  margin: auto;
+}
+.sticky_summary_details.mobile .summary-column:nth-child(2n) {
+  border-left: 0px solid rgba(112, 112, 112, 0.22);
+}
+.sticky_summary_details.mobile .close_summary {
+  cursor: pointer;
+}
+.sticky_summary_details.desktop .summary-column:nth-child(2n) {
+  border-left: 1px solid rgba(112, 112, 112, 0.22);
+  padding-left: 15px;
+}
+.sticky_summary_details.desktop .summary-column:nth-child(1n) {
+  padding-right: 15px;
+}
+.sticky_summary_details.desktop .close_summary {
+  cursor: pointer;
+}
+</style>

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

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

@@ -0,0 +1,88 @@
+<script setup>
+definePageMeta({
+  middleware: "check-product"
+});
+const { product } = defineProps({
+  product: { type: Object, required: true }
+});
+const Dynamic = defineAsyncComponent(() => import("./Dynamic.vue"));
+const route = useRoute();
+const cartStore = useCartStore();
+let slug = route.params.slug;
+const query = route.query;
+const productData = ref(null);
+const customizeId = ref(query?.customize?.toString() || null);
+const isCopyMode = ref(query?.copy === "true" || query?.copy === true);
+const cartItemData = computed(() => {
+  if (!customizeId.value) return null;
+  const cartItems = cartStore.cart?.items || {};
+  return cartItems[customizeId.value] || null;
+});
+const payload = computed(() => {
+  if (!cartItemData.value) return {};
+  const cartOptions = cartItemData.value.options || {};
+  return {
+    attribute_id: cartOptions.ids || {},
+    fraction: cartOptions.fraction || {}
+  };
+});
+const payloadwithquery = {};
+Object.entries(route.query).forEach(([key, value]) => {
+  const match = key.match(/attributeid_(\d+)/);
+  if (match && value) {
+    const newKey = `attribute_id[${match[1]}]`;
+    payloadwithquery[newKey] = parseInt(
+      Array.isArray(value) ? value[0] : value,
+      10
+    );
+  }
+});
+console.log("payloadwithquery payloadwithquery payloadwithquery", payloadwithquery);
+const { data, error, pending } = await useFetch(`/api/product/${slug}`, {
+  method: "post",
+  query: payloadwithquery,
+  body: payload
+});
+if (error.value) {
+  console.error("Error fetching product:", error.value);
+} else {
+  productData.value = data.value;
+}
+const config = useRuntimeConfig();
+const getFullUrl = () => {
+  if (process.client) {
+    return window.location.href;
+  }
+  return `${config.public.siteUrl || ""}${route.fullPath}`;
+};
+</script>
+
+<template>
+  <div v-if="product.is_dynamic">
+    <Dynamic :data="product" :product="data"/>
+  </div>
+</template>
+
+<style scoped>
+.product-sub-title {
+  font-size: 3rem !important;
+  margin-bottom: 20px;
+  font-weight: bold;
+  position: relative;
+}
+.product-sub-title span {
+  background: #fff;
+  z-index: 1;
+  position: relative;
+  padding-right: 10px;
+}
+.product-sub-title:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 3px;
+  left: 0;
+  bottom: 0;
+  background: var(--bs-secondary);
+}
+</style>

package/dist/runtime/components/Product/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/sampleProduct/ProductVariation.d.vue.ts

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

package/dist/runtime/components/Product/sampleProduct/ProductVariation.vue

@@ -0,0 +1,61 @@
+<script setup>
+const { attribute } = defineProps(["attribute"]);
+const emit = defineEmits(["variationChange"]);
+const route = useRoute();
+const selectedValue = ref(route.params.slug);
+const changeVariation = () => {
+  emit("variationChange", selectedValue.value);
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-for="(single_attribute, index) in attribute"
+      :key="index"
+      class="row mt-4 align-items-center border-bottom pb-4"
+    >
+      <div class="col-md-4">
+        <p class="fw-medium mb-0 col-form-label fs-6">
+          {{ single_attribute.name }}
+        </p>
+      </div>
+      <div class="col-md-8">
+        <select
+          class="form-control form-select py-2"
+          v-model="selectedValue"
+          @change="changeVariation()"
+        >
+          <template v-for="value in single_attribute.values" :key="value">
+            <option :value="value.slug">{{ value.name }}</option>
+          </template>
+        </select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.values .value a {
+  height: 80px;
+  width: 100px;
+  text-align: center;
+  align-content: center;
+  border: 1px solid #c6c6c6;
+  display: block;
+  font-size: 18px;
+  font-weight: 500;
+}
+.values .value a:hover {
+  background: var(--iseek-primary);
+  color: #fff !important;
+  font-weight: 700 !important;
+}
+.values .value.active {
+  background: var(--iseek-primary);
+  font-weight: 700 !important;
+}
+.values .value.active a {
+  color: #fff !important;
+}
+</style>