first commit

resources/js/pages/front-pages/checkout.vue

@@ -0,0 +1,153 @@
+<script setup>
+import Footer from '@/views/front-pages/front-page-footer.vue'
+import Navbar from '@/views/front-pages/front-page-navbar.vue'
+import AddressContent from '@/views/wizard-examples/checkout/Address.vue'
+import CartContent from '@/views/wizard-examples/checkout/Cart.vue'
+import ConfirmationContent from '@/views/wizard-examples/checkout/Confirmation.vue'
+import PaymentContent from '@/views/wizard-examples/checkout/Payment.vue'
+import googleHome from '@images/pages/google-home.png'
+import iphone11 from '@images/pages/iphone-11.png'
+import customAddress from '@images/svg/address.svg'
+import customCart from '@images/svg/cart.svg'
+import customPayment from '@images/svg/payment.svg'
+import customTrending from '@images/svg/trending.svg'
+
+definePage({ meta: { layout: 'blank' } })
+
+const checkoutSteps = [
+  {
+    title: 'Cart',
+    icon: customCart,
+  },
+  {
+    title: 'Address',
+    icon: customAddress,
+  },
+  {
+    title: 'Payment',
+    icon: customPayment,
+  },
+  {
+    title: 'Confirmation',
+    icon: customTrending,
+  },
+]
+
+const checkoutData = ref({
+  cartItems: [
+    {
+      id: 1,
+      name: 'Google - Google Home - White',
+      seller: 'Google',
+      inStock: true,
+      rating: 4,
+      price: 299,
+      discountPrice: 359,
+      image: googleHome,
+      quantity: 1,
+      estimatedDelivery: '18th Nov 2021',
+    },
+    {
+      id: 2,
+      name: 'Apple iPhone 11 (64GB, Black)',
+      seller: 'Apple',
+      inStock: true,
+      rating: 4,
+      price: 899,
+      discountPrice: 999,
+      image: iphone11,
+      quantity: 1,
+      estimatedDelivery: '20th Nov 2021',
+    },
+  ],
+  promoCode: '',
+  orderAmount: 1198,
+  deliveryAddress: 'home',
+  deliverySpeed: 'free',
+  deliveryCharges: 0,
+  addresses: [
+    {
+      title: 'John Doe (Default)',
+      desc: '4135 Parkway Street, Los Angeles, CA, 90017',
+      subtitle: '1234567890',
+      value: 'home',
+    },
+    {
+      title: 'ACME Inc.',
+      desc: '87 Hoffman Avenue, New York, NY, 10016',
+      subtitle: '1234567890',
+      value: 'office',
+    },
+  ],
+})
+
+const currentStep = ref(0)
+</script>
+
+<template>
+  <div class="checkout-page">
+    <Navbar />
+    <VContainer>
+      <div class="checkout-card">
+        <VCard>
+          <VCardText>
+            <!-- 👉 Stepper -->
+            <AppStepper
+              v-model:current-step="currentStep"
+              class="checkout-stepper"
+              :items="checkoutSteps"
+              :direction="$vuetify.display.mdAndUp ? 'horizontal' : 'vertical'"
+              align="center"
+            />
+          </VCardText>
+          <VDivider />
+          <VCardText>
+            <!-- 👉 stepper content -->
+            <VWindow
+              v-model="currentStep"
+              class="disable-tab-transition"
+              :touch="false"
+            >
+              <VWindowItem>
+                <CartContent
+                  v-model:current-step="currentStep"
+                  v-model:checkout-data="checkoutData"
+                />
+              </VWindowItem>
+              <VWindowItem>
+                <AddressContent
+                  v-model:current-step="currentStep"
+                  v-model:checkout-data="checkoutData"
+                />
+              </VWindowItem>
+              <VWindowItem>
+                <PaymentContent
+                  v-model:current-step="currentStep"
+                  v-model:checkout-data="checkoutData"
+                />
+              </VWindowItem>
+              <VWindowItem>
+                <ConfirmationContent v-model:checkout-data="checkoutData" />
+              </VWindowItem>
+            </VWindow>
+          </VCardText>
+        </VCard>
+      </div>
+    </VContainer>
+    <Footer />
+  </div>
+</template>
+
+<style lang="scss">
+.checkout-card {
+  margin-block: 9.25rem 5.25rem;
+}
+
+@media (max-width: 960px) and (min-width: 600px) {
+  .checkout-page {
+    .v-container {
+      padding-inline: 2rem !important;
+    }
+  }
+}
+</style>