initial commit

2026-06-23 13:28:38 +07:00
commit 966ed115b2
590 changed files with 111412 additions and 0 deletions
@@ -0,0 +1,231 @@
+<script setup>
+const props = defineProps({
+  billingAddress: {
+    type: Object,
+    required: false,
+    default: () => ({
+      companyName: '',
+      billingEmail: '',
+      taxID: '',
+      vatNumber: '',
+      address: '',
+      contact: '',
+      country: null,
+      state: '',
+      zipCode: null,
+    }),
+  },
+  isDialogVisible: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const emit = defineEmits([
+  'update:isDialogVisible',
+  'submit',
+])
+
+const billingAddress = ref(structuredClone(toRaw(props.billingAddress)))
+
+const resetForm = () => {
+  emit('update:isDialogVisible', false)
+  billingAddress.value = structuredClone(toRaw(props.billingAddress))
+}
+
+const onFormSubmit = () => {
+  emit('update:isDialogVisible', false)
+  emit('submit', billingAddress.value)
+}
+
+const selectedAddress = ref('Home')
+
+const addressTypes = [
+  {
+    icon: {
+      icon: 'custom-home',
+      size: '40',
+    },
+    title: 'Home',
+    desc: 'Delivery Time (7am - 9pm)',
+    value: 'Home',
+  },
+  {
+    icon: {
+      icon: 'custom-office',
+      size: '40',
+    },
+    title: 'Office',
+    desc: 'Delivery Time (10am - 6pm)',
+    value: 'Office',
+  },
+]
+</script>
+
+<template>
+  <VDialog
+    :width="$vuetify.display.smAndDown ? 'auto' : 610 "
+    :model-value="props.isDialogVisible"
+    @update:model-value="val => $emit('update:isDialogVisible', val)"
+  >
+    <!-- 👉 Dialog close btn -->
+    <DialogCloseBtn @click="$emit('update:isDialogVisible', false)" />
+
+    <VCard
+      v-if="props.billingAddress"
+      class="pa-sm-8 pa-5"
+    >
+      <!-- 👉 Title -->
+      <VCardItem>
+        <VCardTitle class="text-h4 text-center">
+          {{ props.billingAddress.address ? 'Edit' : 'Add New' }} Address
+        </VCardTitle>
+      </VCardItem>
+
+      <VCardText>
+        <!-- 👉 Subtitle -->
+        <VCardSubtitle class="text-center mb-6">
+          <span class="text-base">
+
+            Add new address for express delivery
+          </span>
+        </VCardSubtitle>
+
+        <div class="d-flex">
+          <CustomRadiosWithIcon
+            v-model:selected-radio="selectedAddress"
+            :radio-content="addressTypes"
+            :grid-column="{ sm: '6', cols: '12' }"
+          />
+        </div>
+
+        <!-- 👉 Form -->
+        <VForm
+          class="mt-4"
+          @submit.prevent="onFormSubmit"
+        >
+          <VRow>
+            <!-- 👉 Company Name -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="billingAddress.companyName"
+                label="Company Name"
+              />
+            </VCol>
+
+            <!-- 👉 Email -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="billingAddress.billingEmail"
+                label="Email"
+              />
+            </VCol>
+
+            <!-- 👉 Tax ID -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="billingAddress.taxID"
+                label="Tax ID"
+              />
+            </VCol>
+
+            <!-- 👉 VAT Number -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="billingAddress.vatNumber"
+                label="VAT Number"
+              />
+            </VCol>
+
+            <!-- 👉 Billing Address -->
+            <VCol cols="12">
+              <AppTextarea
+                v-model="billingAddress.address"
+                rows="2"
+                label="Billing Address"
+              />
+            </VCol>
+
+            <!-- 👉 Contact -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="billingAddress.contact"
+                label="Contact"
+              />
+            </VCol>
+
+            <!-- 👉 Country -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="billingAddress.country"
+                label="Country"
+              />
+            </VCol>
+
+            <!-- 👉 State -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="billingAddress.state"
+                label="State"
+              />
+            </VCol>
+
+            <!-- 👉 Zip Code -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="billingAddress.zipCode"
+                label="Zip Code"
+                type="number"
+              />
+            </VCol>
+
+            <!-- 👉 Submit and Cancel button -->
+            <VCol
+              cols="12"
+              class="text-center"
+            >
+              <VBtn
+                type="submit"
+                class="me-3"
+              >
+                submit
+              </VBtn>
+
+              <VBtn
+                variant="tonal"
+                color="secondary"
+                @click="resetForm"
+              >
+                Cancel
+              </VBtn>
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>