init git

components/product/dialog/LineChart.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="product-chart">
+        <div>
+            <h2>{{ $t('productPriceChangesChart') }}</h2>
+            <Button v-bind="btns.close.props" @click="dialog.close()" />
+        </div>
+        <div>
+            <p>{{ $t('priceFilterFrom') }}</p>
+            <AppCalendar v-model="date.from" class="isax isax-note5" />
+            <p>{{ $t('until') }}</p>
+            <AppCalendar v-model="date.to" class="isax isax-note5" />
+        </div>
+        <Chart :data="chartData" :options="chartOptions" type="line" />
+    </div>
+</template>
+
+<script setup>
+import Chart from 'primevue/chart';
+
+const { meta } = useRoute()
+const { btns, chart } = meta.init
+
+const dialog = inject('dialogRef')
+const { pastPrices } = dialog.value.data
+
+const date = reactive({})
+const chartData = ref()
+const chartOptions = ref()
+
+onBeforeMount(() => {
+    try {
+        date.from = new Date(pastPrices[0].date).toLocaleDateString('fa')
+        date.to = new Date(pastPrices[pastPrices.length - 1].date).toLocaleDateString('fa')
+    } catch (error) { }
+})
+
+onMounted(() => {
+    chartData.value = chart.setChartData(pastPrices, date)
+    chartOptions.value = chart.setChartOptions()
+})
+
+watch(
+    date,
+    () => chartData.value = chart.setChartData(pastPrices, date),
+    { deep: true }
+)
+</script>
+
+<style lang="scss">
+.product-chart {
+    @apply w-full lg:w-[64rem] lg:h-[43.1rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col lg:pb-[4.9rem];
+
+    &>div:nth-of-type(1) {
+        @apply flex justify-between items-center gap-3 p-6 lg:p-8 pb-6 lg:border-b-2 border-[#E5E5E5];
+
+        h2 {
+            @apply text-zinc-800 text-sm lg:text-xl font-bold font-vazir;
+        }
+
+        button {
+            @apply -mx-4 -my-3;
+
+            .p-button-icon {
+                @apply text-[1.4em] lg:text-3xl text-[#191919];
+            }
+        }
+    }
+
+    &>div:nth-of-type(2) {
+        @apply flex flex-wrap items-center gap-[1.1rem] p-6 lg:gap-6 lg:px-8 lg:py-10;
+
+        &>p {
+            @apply text-[#333333] first:w-full lg:first:w-max text-sm lg:text-lg font-medium font-vazir;
+        }
+
+        .p-calendar {
+            @apply flex items-center gap-3 p-3 font-['iconsax'] #{!important};
+            @apply w-32 h-11 lg:w-[10.4rem] lg:h-12 rounded-lg border-2 border-[#E5E5E5];
+
+            &::before {
+                @apply text-xl lg:text-2xl order-1;
+            }
+
+            &::after {
+                @apply content-['_'] w-[0.1rem] h-4 bg-[#E5E5E5] order-2;
+            }
+
+            input {
+                @apply border-none text-left bg-transparent shadow-none w-[6rem] order-3 p-0;
+                @apply text-zinc-800 text-xs lg:text-lg font-normal font-vazir;
+            }
+        }
+    }
+
+    .p-chart {
+        @apply w-[22.9rem] h-[21.2rem] lg:w-[59.3rem] lg:h-[24.3rem];
+    }
+}
+
+body:has(.product-chart) {
+    .p-datepicker {
+        @apply lg:-translate-x-28;
+    }
+}
+</style>

components/product/dialog/Menu.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="product-menu">
+        <ul>
+            <li v-for="({ icon, label, click }, i) in meta.init.menu" :key="i" >
+                <div @click="click" v-ripple>
+                    <i :class="icon" />
+                    <span>{{ label }}</span>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+const { meta } = useRoute()
+</script>
+
+<style lang="scss">
+.product-menu {
+    @apply w-full flex flex-col px-6 py-[1.1rem] rounded-t-[0.6rem] bg-white rtl;
+
+    ul {
+        @apply w-full flex flex-col gap-4;
+
+        li {
+            @apply border-[#E5E5E5] border-b last:border-none;
+
+            div {
+                @apply flex items-center gap-4 pb-4 text-[#333333] relative overflow-hidden;
+
+                i {
+                    @apply text-xl;
+                }
+
+                h2 {
+                    @apply text-xs font-medium font-vazir;
+                }
+            }
+        }
+    }
+}
+</style>

components/product/dialog/Reminder.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="product-reminder">
+        <div>
+            <div>
+                <h2>{{ $t('notices') }}</h2>
+                <Button v-bind="btns.close.props" @click="dialog.close()" />
+            </div>
+            <p>{{ $t('howToInformAboutAmazingPrice') }}</p>
+        </div>
+        <ul>
+            <li v-for="key in checkboxes.reminder" :key="key">
+                <Checkbox v-model="form[key]" binary :input-id="key" />
+                <label :for="key"> {{ $t(key + 'Notice') }} </label>
+            </li>
+        </ul>
+        <Button :label="$t('submit')" :loading="loading" @click="submit()" />
+    </div>
+</template>
+
+<script setup>
+const { meta } = useRoute()
+const { btns, checkboxes } = meta.init
+const { toast, t } = inject('service')
+const dialog = inject('dialogRef')
+const { reminder, _id: id } = dialog.value.data
+
+const form = reactive(reminder[0] || {})
+const store = useProductsStore()
+const loading = ref(false)
+
+const submit = async () => {
+    loading.value = true
+    const { status, data } = await store.addReminder(id, form)
+    loading.value = false
+
+    if (status.value == 'success') {
+        dialog.value.data.reminder = data.value.reminder
+        toast.add({
+            life: 3000, severity: 'success', summary: t('success'), detail: t('submitedSuccessfully')
+        })
+        dialog.value.close()
+    }
+}
+
+</script>
+
+<style lang="scss">
+.product-reminder {
+    @apply w-full lg:w-[40.3rem] lg:h-[25.2rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col gap-8 lg:gap-10 p-6 lg:p-10 lg:pt-8 relative;
+
+    &::after {
+        @apply max-lg:content-['_'] absolute inset-x-0 bottom-[4.5rem] h-3 shadow-[0px_-2px_5px_#0000000a];
+    }
+
+    &>div:nth-of-type(1) {
+        @apply flex flex-col gap-1.5 lg:gap-2;
+
+        &>div {
+            @apply flex justify-between items-center;
+
+            h2 {
+                @apply text-zinc-800 text-sm lg:text-xl font-bold font-vazir;
+            }
+
+            button {
+                @apply -mx-4 -my-3;
+
+                .p-button-icon {
+                    @apply text-[1.4em] lg:text-3xl text-[#191919];
+                }
+            }
+        }
+
+        p {
+            @apply text-[#7F7F7F] text-[0.7em] lg:text-lg font-normal font-vazir;
+        }
+    }
+
+    ul {
+        @apply flex flex-col gap-[1.1rem] lg:gap-6 max-lg:mt-1;
+
+        li {
+            @apply flex items-center gap-4 cursor-pointer w-max select-none;
+
+            .p-checkbox,
+            .p-checkbox-box {
+                @apply w-4 lg:w-6 h-4 lg:h-6;
+            }
+
+            label {
+                @apply text-[#4C4C4C] text-xs lg:text-xl font-medium font-vazir cursor-pointer;
+            }
+        }
+    }
+
+    &>button {
+        @apply h-[2.9rem] lg:h-14 #{!important};
+
+        .p-button-label {
+            @apply font-bold font-iran-sans leading-tight text-sm lg:text-base;
+        }
+    }
+}
+</style>

components/product/dialog/Report.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="product-report">
+        <div>
+            <div>
+                <h2>{{ $t("reportIncorrectSpecs") }}</h2>
+                <Button v-bind="btns.close.props" @click="dialog.close()" />
+            </div>
+            <p>{{ title }}</p>
+        </div>
+        <ul>
+            <li v-for="key in checkboxes.report" :key="key">
+                <Checkbox v-model="form.items[key]" binary :input-id="key" />
+                <label :for="key">{{ $t(key + "Product") }}</label>
+            </li>
+            <li>
+                <label>{{ $t("description") }}</label>
+                <Textarea v-model="form.content" :placeholder="$t('writeDesc')" />
+            </li>
+        </ul>
+        <Button :label="$t('send')" :loading="loading" @click="send()" />
+    </div>
+</template>
+
+<script setup>
+const { meta } = useRoute()
+const { btns, checkboxes } = meta.init
+const { toast, t } = inject('service')
+const dialog = inject('dialogRef')
+const { title, id, report } = dialog.value.data
+
+const form = reactive(report ?? { items: {}, content: '' });
+const store = useProductsStore();
+const loading = ref(false)
+
+const send = async () => {
+    if (Object.keys(form.items).length > 0 && form.content.length > 0) {
+        loading.value = true
+        const { status, data } = await store.addReport(id, form);
+        loading.value = false
+
+        if (status.value == 'success') {
+            toast.add({
+                life: 3000, severity: 'success', summary: t('success'), detail: t('submitedSuccessfully')
+            })
+            dialog.value.close()
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.product-report {
+    @apply w-full lg:w-[40.1rem] lg:h-[48.6rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col relative;
+
+    &::after {
+        @apply max-lg:content-['_'] absolute inset-x-0 bottom-[4.5rem] h-3 shadow-[0px_-2px_5px_#0000000a];
+    }
+
+    &>div:nth-of-type(1) {
+        @apply flex flex-col gap-1.5 lg:gap-2 border-b lg:border-b-2 border-[#E5E5E5] p-6 lg:px-10 lg:pt-8 pb-6;
+
+        &>div {
+            @apply flex justify-between items-center;
+
+            h2 {
+                @apply text-zinc-800 text-sm lg:text-xl font-bold font-vazir;
+            }
+
+            button {
+                @apply -mx-4 -my-3;
+
+                .p-button-icon {
+                    @apply text-[1.4em] lg:text-3xl text-[#191919];
+                }
+            }
+        }
+
+        p {
+            @apply text-[#7F7F7F] text-[0.7em] lg:text-lg font-normal font-vazir;
+        }
+    }
+
+    ul {
+        @apply flex flex-col gap-[1.1rem] px-6 pt-9 lg:gap-5 lg:pt-6 lg:px-10;
+
+        li {
+            @apply flex items-center gap-4 cursor-pointer w-max select-none;
+
+            .p-checkbox,
+            .p-checkbox-box {
+                @apply w-4 h-4 lg:w-6 lg:h-6;
+            }
+
+            label {
+                @apply text-[#4C4C4C] text-xs lg:text-xl font-medium font-vazir cursor-pointer;
+            }
+        }
+
+        li:last-child {
+            @apply w-full lg:w-[35.1rem] flex flex-col items-start gap-4 mt-3 lg:mt-4;
+
+            label {
+                @apply text-[#7F7F7F] text-xs lg:text-xl font-medium font-vazir max-lg:mr-2.5;
+            }
+
+            textarea {
+                @apply w-full h-[9.6rem] lg:w-[35.1rem] lg:h-[9.6rem] p-4 rounded-[0.6rem] border border-[#E5E5E5];
+
+                &::placeholder {
+                    @apply text-[#999999] text-[0.7em] lg:text-lg font-normal font-vazir;
+                }
+            }
+        }
+    }
+
+    &>button {
+        @apply h-[2.9rem] m-6 mt-8 lg:h-14 lg:m-10 lg:mt-9 #{!important};
+
+        .p-button-label {
+            @apply font-bold font-iran-sans text-sm lg:text-base;
+        }
+    }
+}
+</style>

components/product/dialog/Share.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="product-share">
+        <div>
+            <div>
+                <h2>{{ $t('share') }}</h2>
+                <Button v-bind="btns.close.props" @click="dialog.close()" />
+            </div>
+            <p>{{ $t('shareProductWhitFriends') }}</p>
+        </div>
+        <div>
+            <template v-for="(btn, key) in btns.shares" :key="key">
+                <Button v-bind="btn.props" @click="events[key]()" />
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const { meta } = useRoute()
+const { btns } = meta.init
+const { toast, t } = inject('service')
+const dialog = inject('dialogRef')
+
+const events = reactive({
+    copyLink: () => {
+        navigator.clipboard.writeText(location.href).then(function () {
+            toast.add({ life: 3000, summary: t('success'), detail: t('copied'), severity: 'success' })
+        })
+        dialog.value.close()
+    },
+    telegram: () => {
+        window.open('tg://msg_url?url=' + location.href, '_blank')
+        dialog.value.close()
+    },
+    whatsapp: () => {
+        window.open('whatsapp://send?text=' + location.href, '_blank')
+        dialog.value.close()
+    }
+})
+</script>
+
+<style lang="scss">
+.product-share {
+    @apply w-full lg:w-[40.1rem] lg:h-[19.9rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col justify-between;
+
+    &>div:nth-of-type(1) {
+        @apply flex flex-col gap-1.5 lg:gap-2 p-6 lg:px-10 lg:pb-2 lg:pt-8;
+
+        &>div {
+            @apply flex justify-between items-center;
+
+            h2 {
+                @apply text-zinc-800 text-sm lg:text-xl font-bold font-vazir;
+            }
+
+            button {
+                @apply -mx-4 -my-3;
+
+                .p-button-icon {
+                    @apply text-[1.4em] lg:text-3xl text-[#B2B2B2];
+                }
+            }
+        }
+
+        p {
+            @apply text-[#7F7F7F] text-[0.7em] lg:text-lg font-normal font-vazir;
+        }
+    }
+
+    &>div:nth-of-type(2) {
+        @apply flex flex-wrap gap-x-3 gap-y-[1.1rem] lg:gap-y-6 px-6 pb-5 pt-3 lg:p-10;
+
+        button {
+            @apply grow justify-center h-12 lg:h-14;
+
+            .p-button-icon {
+                @apply text-xl lg:text-[1.4em] ml-3;
+            }
+
+            .p-button-label {
+                @apply text-xs lg:text-xl font-medium font-iran-sans grow-0;
+            }
+        }
+
+        button:nth-of-type(1) {
+            @apply w-full border-2 border-[#B2B2B2] text-[#333333];
+
+            .p-button-icon {
+                @apply text-xl lg:text-2xl;
+            }
+        }
+
+        button:nth-of-type(2) {
+            @apply bg-[#43E97B] hover:bg-[#467ca7] border-[#43E97B];
+        }
+
+        button:nth-of-type(3) {
+            @apply bg-[#34AD39] hover:bg-[#30a034] border-[#34AD39];
+        }
+    }
+}
+</style>