From 36ed3aeec1ae4d60a72db801932435c6f176c36b Mon Sep 17 00:00:00 2001
From: User <gajanan10@gmail.com>
Date: Thu, 18 May 2023 19:40:21 +0530
Subject: [PATCH] checkout ui fixes

---
 .../retailer/cart-product/CartProductList.vue | 34 ++++++-------
 src/routes/retailer/boxed_order_history.vue   | 16 +++++-
 src/routes/retailer/checkout_page.scss        |  9 +++-
 src/routes/retailer/checkout_page.vue         | 50 ++++++++++---------
 4 files changed, 65 insertions(+), 44 deletions(-)

diff --git a/src/components/retailer/cart-product/CartProductList.vue b/src/components/retailer/cart-product/CartProductList.vue
index 35f7559..e036bf0 100644
--- a/src/components/retailer/cart-product/CartProductList.vue
+++ b/src/components/retailer/cart-product/CartProductList.vue
@@ -13,7 +13,7 @@
         v-for="(product, index) in cartItems.slice().reverse()"
         v-bind:key="index"
       >
-        <v-row class="mx-1">
+        <v-row class="mx-1 mt-4">
           <v-col cols="4">
             <div v-if="product.customAttributes.isPersonalize == 1">
               <div v-if="product.personalizeDetails">
@@ -69,7 +69,7 @@
             <v-row>
               <v-col class="py-0 ma-0">
                 <p
-                  class="fontsize-14 black--text float-left"                  
+                  class="fontsize-14 text-black mb-6 float-left"                  
                 >
                   {{ product.name }}
                 </p>
@@ -84,10 +84,10 @@
               "
             >
               <v-expansion-panel class="pa-0 ma-0" v-if="product.productOption">
-                <v-expansion-panel-header class="pa-0 ma-0"
-                  >See Details</v-expansion-panel-header
+                <v-expansion-panel-title class="pa-0 ma-0"
+                  >See Details</v-expansion-panel-title
                 >
-                <v-expansion-panel-content
+                <v-expansion-panel-text
                   v-if="product.productType == 'giftcard'"
                   class="cartproductlist-expansion"
                 >
@@ -129,8 +129,8 @@
                         .giftcardRecipientEmail
                     }}
                   </p>
-                </v-expansion-panel-content>
-                <v-expansion-panel-content
+                </v-expansion-panel-text>
+                <v-expansion-panel-text
                   v-else
                   class="cartproductlist-expansion"
                 >
@@ -145,10 +145,10 @@
                   >
                     {{ product.productOption.attributesInfo[0].value }}
                   </p>
-                </v-expansion-panel-content>
+                </v-expansion-panel-text>
               </v-expansion-panel>
             </v-expansion-panels>
-            <p class="fontsize-14">${{ priceFormatter(product.price) }}</p>
+            <p class="fontsize-14 mb-6">${{ priceFormatter(product.price) }}</p>
 
             <div v-if="pageName() != 'CheckoutPage'">
               <v-row
@@ -159,7 +159,7 @@
                   <p class="fontsize-14 mb-0 pb-7">Qty.</p>
                 </v-col>
                 <v-col class="pl-0 pt-0">
-                  <v-hover v-slot:default="{ hover }">
+                  <v-hover v-slot:default="{ isHovering }">
                     <v-select
                       :items="
                         qtyPriceOptions(
@@ -169,13 +169,13 @@
                         )
                       "
                       class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 cartproductlist-select-button select-change-icon"
-                      dense
+                      density="compact"
                       attach
                       flat
                       solo
-                      outlined
-                      :class="hover ? 'primary--text' : 'black--text'"
-                      item-text="price"
+                      variant="outlined"
+                      :class="isHovering ? 'text-primary' : 'text-black'"
+                      item-title="price"
                       item-value="qty"
                       single-line
                       @change="
@@ -269,11 +269,11 @@
             </div>
             <div v-else>
               <v-row>
-                <v-col cols="auto" class="py-0 pr-0">
+                <v-col cols="auto" class="py-0 pr-0 mb-4">
                   <p class="fontsize-14 mb-1">Qty.</p>
                 </v-col>
-                <v-col cols="auto" class="py-0 pl-2">
-                  <p class="fontsize-14 black--text">{{ product.qty }}</p>
+                <v-col cols="auto" class="py-0 pl-2 mb-4">
+                  <p class="fontsize-14 text-black">{{ product.qty }}</p>
                 </v-col>
               </v-row>
             </div>
diff --git a/src/routes/retailer/boxed_order_history.vue b/src/routes/retailer/boxed_order_history.vue
index db599a7..6bd7be8 100644
--- a/src/routes/retailer/boxed_order_history.vue
+++ b/src/routes/retailer/boxed_order_history.vue
@@ -21,7 +21,7 @@
           ></v-text-field>
         </v-col>
         <v-col cols="12" sm="12" md="6" lg="5"> 
-          <v-menu
+          <!-- <v-menu
             v-model="menu1"
             :close-on-content-click="false"
             :nudge-right="40"
@@ -46,7 +46,18 @@
               v-model="createdFrom"
               @input="menu1 = false"
             ></v-date-picker>
-          </v-menu>
+          </v-menu> -->
+          <v-text-field
+          type="date"                  
+          v-model="createdFrom"
+          placeholder="Created From"
+          density="compact"
+          variant="outlined"
+          label="Created From"
+          color="primary pt-0"
+
+          >
+          </v-text-field>
         </v-col>
 
         <div class="pt-7">-</div>
@@ -206,6 +217,7 @@ export default {
   name: "BoxedOrderHistoryPage",
   components: {},
   data: () => ({
+    visible:false,
     menu1: false,
     menu2: false,
    dateAtFormatted:"",
diff --git a/src/routes/retailer/checkout_page.scss b/src/routes/retailer/checkout_page.scss
index 98fece7..40fdca2 100644
--- a/src/routes/retailer/checkout_page.scss
+++ b/src/routes/retailer/checkout_page.scss
@@ -15,7 +15,7 @@
     border: thin solid #2850da;
 }
 
-.productpage-tab-slider.v-tab--active {
+.productpage-tab-slider.v-slide-group-item--active {
     color: #fff !important;
     background-color: #2850da !important;
     //max-height: 30px !important;
@@ -53,4 +53,11 @@
 
 .checkoutpage-button-height {
     height: 40px !important;
+}
+.myDivider{
+    background-color: #2850da !important;
+    height: 1px;
+}
+.checkpout-expansion-panel .v-expansion-panel-title__overlay{
+    background-color:#fff !important;
 }
\ No newline at end of file
diff --git a/src/routes/retailer/checkout_page.vue b/src/routes/retailer/checkout_page.vue
index 854bb21..e416340 100644
--- a/src/routes/retailer/checkout_page.vue
+++ b/src/routes/retailer/checkout_page.vue
@@ -51,8 +51,9 @@
                 regular-font
                 ls-n008
                 px-0
+                rounded-0
               "
-              :href="`#shippingTab`"
+              value="shippingTab"
               @click="changedToShippTab()"
               v-show="showShippingTab"
               >Shipping</v-tab
@@ -65,16 +66,19 @@
                 regular-font
                 ls-n008
                 px-0
+                rounded-0
               "
-              :href="`#reviewTab`"
+              value="reviewTab"
               :disabled="!valid"
               :class="giftCardProduct ? 'checkout-tabs' : ''"
               v-show="showReviewTab"
               >Review & Payments</v-tab
             >
-          </v-tabs>
-          <v-tabs-items touchless v-model="tabs">
-            <v-tab-item :value="`shippingTab`" :disabled="valid">
+          </v-tabs>          
+        </v-col>
+        <v-col cols="12">
+          <v-window touchless v-model="tabs">
+            <v-window-item value="shippingTab" :disabled="valid">
               <v-row
                 v-if="isMobileDevice && estimatedShippingMethods.length > 0"
                 class="pt-3"
@@ -118,7 +122,7 @@
                       <p class="h3 mb-2">
                         <span class="text-primary">Checkout Method</span>
                       </p>
-                      <v-divider class="primary"></v-divider>
+                      <div class="myDivider"></div>
                       <div v-if="basicInfo.addresses">
                         <div v-if="basicInfo.addresses.length > 0">
                           <v-row class="mt-2 mx-1">
@@ -383,10 +387,10 @@
                               class="body ls-n009 text-decoration-none"
                             >
                               <v-btn
-                                class="text-uppercase"
+                                class="text-uppercase rounded-0"
                                 color="primary"
                                 @click="next()"
-                                large
+                                size="large"
                                 tile
                                 block
                                 depressed
@@ -405,7 +409,7 @@
                       >
                     </v-col>
                   </v-row>
-                  <v-divider class="my-3 primary"></v-divider>
+                  <div class="my-3 myDivider"></div>
                 </v-col>
                 <v-col
                   cols="12"
@@ -416,7 +420,7 @@
                   <p class="h3 mb-2">
                     <span class="text-primary">Order Summary</span>
                   </p>
-                  <v-divider class="primary"></v-divider>
+                  <div class="myDivider"></div>
                   <v-col
                     align="center"
                     justify="center"
@@ -429,30 +433,27 @@
                     ></v-progress-circular>
                   </v-col>
                   <v-expansion-panels
-                    accordion
-                    light
-                    flat
-                    multiple
                     v-model="cartItemPanel"
+                    class="checkpout-expansion-panel"
                     v-else
                   >
-                    <v-expansion-panel class="transparent-background">
-                      <v-expansion-panel-header class="pr-4"
+                    <v-expansion-panel elevation="0">
+                      <v-expansion-panel-title class="pr-4"
                         >{{ cartProductsItem.length }} Items In
-                        cart</v-expansion-panel-header
+                        cart</v-expansion-panel-title
                       >
-                      <v-expansion-panel-content class="checkout-expansion">
+                      <v-expansion-panel-text class="checkout-expansion">
                         <div class="mb-5 checkout-expansion-maxheight">
                           <CartProductList :checkOut="chekoutFlag" />
                         </div>
-                      </v-expansion-panel-content>
+                      </v-expansion-panel-text>
                     </v-expansion-panel>
                   </v-expansion-panels>
-                  <v-divider class="primary"></v-divider>
+                  <div class="myDivider"></div>
                 </v-col>
               </v-row>
-            </v-tab-item>
-            <v-tab-item :value="`reviewTab`">
+            </v-window-item>
+            <v-window-item value="reviewTab">
               <v-row
                 no-gutters
                 class="pt-sm-6"
@@ -1082,8 +1083,8 @@
                   </v-row>
                 </v-container>
               </v-row>
-            </v-tab-item>
-          </v-tabs-items>
+            </v-window-item>
+          </v-window>
         </v-col>
       </v-row>
       <v-col v-else>
@@ -1879,6 +1880,7 @@ export default {
       }
     },
     next: function () {
+      this.tabs = "reviewTab";
       if (this.userAuth) {
         if (this.addressesList.length == 0) {
           let phoneNumber = this.$refs.userAddressForm.$refs.phoneNumber