fixed add to cart bugs

components/cart/dialog/PreFactor.vue

@@ -1,108 +1,113 @@
 <template>
-    <div class="pre-factor">
-        <div>
-            <h2>
-                <i class="isax isax-receipt-2"></i>
-                <span>{{ $t("submitPreFactor") }}</span>
-            </h2>
-            <p>{{ $t("submitPreFactorDesc") }}</p>
-        </div>
-        <PanelSalesFactor :data="data" />
-        <ul>
-            <li v-for="(btn, key) in btns" :key="key">
-                <Button v-bind="btn.props" @click="click(key)" />
-            </li>
-        </ul>
+  <div id="pre-factor">
+    <div>
+      <h2>
+        <i class="isax isax-receipt-2"></i>
+        <span>{{ $t("submitPreFactor") }}</span>
+      </h2>
+      <p>{{ $t("submitPreFactorDesc") }}</p>
     </div>
+    <PanelSalesFactor :data="factorData" />
+    <ul>
+      <li v-for="(btn, key) in btns" :key="key">
+        <Button v-bind="btn.props" @click="click(key)" />
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script setup>
-import init from '../../../initialize/pre-factor.js'
+import init from "../../../initialize/pre-factor.js";
+import html2pdf from "html2pdf.js";
 const { btns } = init();
-const dialog = inject('dialogRef');
-const data = dialog.value.data
-const router = useRouter()
+const dialog = inject("dialogRef");
+const factorData = dialog.value.data;
+const router = useRouter();
+const store = useCartStore();
 
-const click = (key) => {
-    if (key == 'send')
-        router.push({ path: '/panel/factors', query: { id: data._id } });
+const click = async (key) => {
+  if (key == "send") {
+    await store.createPayment(factorData._id);
+    //   navigateTo(data.value.url, { external: true });
+    // store.paymentUrl = ''
+  }
+  if (key == "save" || key == "print") {
+    // Select the element you want to print
+    const element = document.getElementById("pre-factor");
 
-    dialog.value.close()
-}
+    // Configure options for html2pdf
+    const options = {
+      margin: 1,
+      filename: "preFactor.pdf",
+      image: { type: "jpeg", quality: 0.98 },
+      html2canvas: { scale: 1 },
+      jsPDF: { unit: "in", format: "a3", orientation: "landscape" },
+    };
+
+    // Generate the PDF
+    html2pdf().set(options).from(element).save();
+  }
+
+  dialog.value.close();
+};
 </script>
 
 <style lang="scss">
-.pre-factor {
-    @apply flex flex-col gap-8 rounded-2xl w-[77.5rem] py-8 bg-white overflow-y-auto;
+#pre-factor {
+  @apply flex flex-col gap-8 rounded-2xl w-screen lg:w-[79vw] h-auto py-2 bg-white overflow-y-hidden;
 
-    &>div:nth-of-type(1) {
-        @apply flex flex-col items-center;
+  & > div:nth-of-type(1) {
+    @apply flex flex-col items-center;
 
-        h2 {
-            @apply flex items-center gap-4 text-[#333333];
+    h2 {
+      @apply flex items-center gap-4 text-[#333333];
 
-            i {
-                @apply text-2xl;
-            }
+      i {
+        @apply text-2xl;
+      }
 
-            span {
-                @apply text-xl font-bold font-vazir;
-            }
-        }
-
-        p {
-            @apply w-[30.2rem] mt-[1.1rem] text-center text-[#4C4C4C] text-lg font-vazir;
-        }
+      span {
+        @apply text-xl font-bold font-vazir;
+      }
     }
 
-    &>ul {
-        @apply w-full flex gap-4 px-8;
-
-        li {
-            button {
-                @apply w-full h-12 #{!important};
-
-                .p-button-label {
-                    @apply h-[1.6rem] text-lg font-medium font-iran-sans;
-                }
-
-                .p-button-icon {
-                    @apply text-2xl text-[#7F7F7F];
-                }
-
-                &.p-button-secondary {
-                    @apply border-[#7F7F7F] justify-center;
-
-                    .p-button-label {
-                        @apply grow-0 text-[#7F7F7F];
-                    }
-                }
-            }
-        }
-
-        li:nth-of-type(1) {
-            @apply w-[12.3rem];
-        }
-
-        li:nth-of-type(2) {
-            @apply w-[12.3rem] ml-auto;
-        }
-
-        li:nth-of-type(3) {
-            @apply w-[25.1rem];
-        }
-
-        li:nth-of-type(4) {
-            @apply w-[10.8rem];
-        }
+    p {
+      @apply w-[23rem] px-1 sm:w-[30.2rem] mt-[1.1rem] text-center text-[#4C4C4C] text-base sm:text-lg font-vazir;
     }
+  }
+
+  & > ul {
+    @apply w-full flex flex-wrap gap-4 px-8;
+
+    li {
+      button {
+        @apply w-[12.3rem] h-12 #{!important};
+
+        .p-button-label {
+          @apply h-[1.6rem] text-sm lg:text-lg font-medium font-iran-sans;
+        }
+
+        .p-button-icon {
+          @apply text-2xl text-[#7F7F7F];
+        }
+
+        &.p-button-secondary {
+          @apply border-[#7F7F7F] justify-center;
+
+          .p-button-label {
+            @apply grow-0 text-[#7F7F7F];
+          }
+        }
+      }
+    }
+  }
 }
 
 body:has(.pre-factor) {
-    .sales-factor {
-        h2 {
-            @apply hidden #{!important};
-        }
+  .sales-factor {
+    h2 {
+      @apply hidden #{!important};
     }
+  }
 }
 </style>

components/cart/total/Aside.vue

@@ -1,73 +1,85 @@
 <template>
-    <div class="cart-total-aside">
-        <ul>
-            <li v-for="(value, key) in items" :key="key">
-                <label>{{ $t(key) }}</label>
-                <span>
-                    {{ numberFormat(value) }}
-                    {{ key == 'productsCount' ? $t('product') : '' }}
-                </span>
-            </li>
-        </ul>
-        <Button :label="$t('submitAndViewPreFactor')" :loading="loading" @click="submitOrder()" />
-    </div>
+  <div class="cart-total-aside">
+    <ul>
+      <li v-for="(value, key) in items" :key="key">
+        <label>{{ $t(key) }}</label>
+        <span>
+          {{ numberFormat(value) }}
+          {{ key == "productsCount" ? $t("product") : "" }}
+        </span>
+      </li>
+    </ul>
+    <Button
+      :label="$t('submitAndViewPreFactor')"
+      :loading="loading"
+      @click="submitOrder()"
+    />
+  </div>
 </template>
 
 <script setup>
-import init from '../../../initialize/cart-total-invoice'
+import init from "../../../initialize/cart-total-invoice";
+const { dialog } = inject("service");
+const data = inject("data");
 
-const { dialog } = inject('service')
-const data = inject('data')
+const items = computed(() => init(data.value));
 
-const items = computed(() => init(data.value))
+const token = useCookie("token");
 
-const loading = ref(false)
+const router = useRouter();
+
+const loading = ref(false);
 
 const submitOrder = async () => {
-    loading.value = true
-    const { status, data: res } = await useFetch('/api/orders', {
-        headers: { Authorization: useCookie('token') }, method: 'post'
-    })
-    loading.value = false
+  if (token.value) {
+    loading.value = true;
+    const { status, data: res } = await useFetch("/api/orders", {
+      headers: { Authorization: useCookie("token") },
+      method: "post",
+    });
+    loading.value = false;
 
-    if (status.value == 'success') {
-        dialog.show(resolveComponent('CartDialogPreFactor'), res.value)
-        const cart = useCartStore()
-        cart.get()
+    if (status.value == "success") {
+      dialog.show(resolveComponent("CartDialogPreFactor"), res.value);
+      const cart = useCartStore();
+      cart.get();
     }
-}
+  } else router.push("/auth/login?redirect=/checkout/cart");
+};
 
 const numberFormat = (number) =>
-    new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
+  new Intl.NumberFormat("fa-IR", { maximumSignificantDigits: 3 }).format(
+    number
+  );
 </script>
 
 <style lang="scss">
 .cart-total-aside {
-    @apply w-full lg:max-w-[28.1rem] lg:h-[25rem] flex flex-col justify-between p-6 grow;
-    @apply lg:bg-neutral-50 lg:rounded-[0.6rem] lg:border border-neutral-200 font-vazir lg:mr-auto;
+  @apply w-full lg:max-w-[28.1rem] lg:h-[25rem] flex flex-col justify-between p-6 grow;
+  @apply lg:bg-neutral-50 lg:rounded-[0.6rem] lg:border border-neutral-200 font-vazir lg:mr-auto;
 
-    ul {
-        @apply flex flex-col gap-[1.1rem] lg:gap-6 lg:mt-2;
+  ul {
+    @apply flex flex-col gap-[1.1rem] lg:gap-6 lg:mt-2;
 
-        li {
-            @apply flex justify-between items-center;
+    li {
+      @apply flex justify-between items-center;
 
-            label {
-                @apply text-zinc-500 text-sm lg:text-xl font-medium;
-            }
+      label {
+        @apply text-zinc-500 text-sm lg:text-xl font-medium;
+      }
 
-            span {
-                @apply text-zinc-800 text-lg lg:text-2xl lg:font-medium;
-            }
-        }
+      span {
+        @apply text-zinc-800 text-lg lg:text-2xl lg:font-medium;
+      }
     }
+  }
 
-    button {
-        @apply max-lg:hidden;
+  button {
+    @apply max-lg:hidden;
 
-        span {
-            @apply text-xl font-bold;
-        }
+    span {
+      @apply text-xl font-bold;
     }
+  }
 }
 </style>

components/cart/total/Fixed.vue

@@ -11,7 +11,8 @@
 
 <script setup>
 import init from '../../initialize/cart-total-invoice'
-
+const { isMobile } = useDevice();
+const { breakpoint: device = isMobile ? "mobile" : "desktop" } = useViewport();
 const { dialog } = inject('service')
 
 const data = inject('data')
@@ -19,6 +20,10 @@ const data = inject('data')
 const items = computed(() => init(data.value))
 
 const loading = ref(false)
+const position = computed(() => {
+if(device == "desktop") return "center"
+if(device == "mobile") return "bottom"
+})
 
 const submitOrder = async () => {
     loading.value = true
@@ -28,8 +33,8 @@ const submitOrder = async () => {
     loading.value = false
 
     if (status.value == 'success') {
-        dialog.open(resolveComponent('DialogPreFactorSubmit'), {
-            props: { modal: true },
+        dialog.open(resolveComponent('CartDialogPreFactor'), {
+            props: { modal: true, position: 'bottom' },
             data
         })
     }