From 28860d5f95ff5f30850b83169ad2ae5f72eb0d92 Mon Sep 17 00:00:00 2001
From: User <gajanan10@gmail.com>
Date: Fri, 19 May 2023 19:30:43 +0530
Subject: [PATCH] checkout page ui fixes

---
 src/components/retailer/layout/Layout.vue |   3 +-
 src/routes/retailer/checkout_page.scss    |  16 +++
 src/routes/retailer/checkout_page.vue     | 149 ++++++++++++----------
 3 files changed, 103 insertions(+), 65 deletions(-)

diff --git a/src/components/retailer/layout/Layout.vue b/src/components/retailer/layout/Layout.vue
index 2d4554d..f866ac7 100644
--- a/src/components/retailer/layout/Layout.vue
+++ b/src/components/retailer/layout/Layout.vue
@@ -131,7 +131,8 @@ export default {
     box-shadow: none !important;
 }
 .sidebar-router-padding-open {
-  margin:0 130px 16px 132px;   
+  /* margin:0 130px 16px 132px;    */
+  padding: 0 0 0 250px;
 }
 .sidebar-router-padding-close {
   margin:0 16px 16px 16px;  
diff --git a/src/routes/retailer/checkout_page.scss b/src/routes/retailer/checkout_page.scss
index 40fdca2..f50f0c6 100644
--- a/src/routes/retailer/checkout_page.scss
+++ b/src/routes/retailer/checkout_page.scss
@@ -60,4 +60,20 @@
 }
 .checkpout-expansion-panel .v-expansion-panel-title__overlay{
     background-color:#fff !important;
+}
+.myItems{
+    margin-bottom: 2px;
+    padding: 6px 0;
+    cursor: pointer;
+    color: #2850da;
+}
+.myItems:hover{
+    background: rgb(240, 235, 235);
+}
+.myItems1:hover{
+    background: rgb(240, 235, 235);
+}
+.myItems1{
+    padding: 6px 0;
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/src/routes/retailer/checkout_page.vue b/src/routes/retailer/checkout_page.vue
index e416340..7369647 100644
--- a/src/routes/retailer/checkout_page.vue
+++ b/src/routes/retailer/checkout_page.vue
@@ -4,7 +4,7 @@
       <v-container>
         <v-row>
           <v-col cols="12" class="d-flex justify-center align-center">
-            <div class="h3 white--text mt-10">
+            <div class="h3 text-white mt-10">
               Do not refresh or click back. Your payment is currently being
               processed.
             </div>
@@ -80,8 +80,8 @@
           <v-window touchless v-model="tabs">
             <v-window-item value="shippingTab" :disabled="valid">
               <v-row
-                v-if="isMobileDevice && estimatedShippingMethods.length > 0"
-                class="pt-3"
+                v-if="estimatedShippingMethods.length > 0"
+                class="pt-3 mb-3 mt-1 d-block d-sm-none"
               >
                 <v-col cols="12">
                   <v-alert text>
@@ -343,7 +343,6 @@
                             <v-radio-group
                               mandatory
                               v-model="estimatedShipping"
-                              color="primary"
                             >
                               <div
                                 v-for="(
@@ -356,7 +355,7 @@
                                     <v-radio
                                       :label="method.carrierTitle"
                                       :value="method"
-                                      class="black--text"
+                                      class="text-black"
                                        color="primary"
                                     ></v-radio>
                                   </v-col>
@@ -438,11 +437,11 @@
                     v-else
                   >
                     <v-expansion-panel elevation="0">
-                      <v-expansion-panel-title class="pr-4"
+                      <v-expansion-panel-title class="pr-4 checkout-expansion"
                         >{{ cartProductsItem.length }} Items In
                         cart</v-expansion-panel-title
                       >
-                      <v-expansion-panel-text class="checkout-expansion">
+                      <v-expansion-panel-text class="">
                         <div class="mb-5 checkout-expansion-maxheight">
                           <CartProductList :checkOut="chekoutFlag" />
                         </div>
@@ -470,14 +469,18 @@
                         <v-radio
                           :label="purchaseOrderPayment.title"
                           :value="purchaseOrderPayment.code"
-                          class="black--text"
+                          class="text-black"
+                          color="primary"
                         ></v-radio>
+                      </v-radio-group>
+                      
                         <div v-if="paymentMethod === 'purchaseorder'">
                           <v-checkbox
+                          color="primary"
                             label="My billing and shipping address are the same"
                             v-model="sameAddress"
                             @change="resetFields()"
-                            dense
+                            density="compact"
                             :readonly="readOnlyCheckBox"
                             hide-details
                           ></v-checkbox>
@@ -487,7 +490,7 @@
                               <BillingAddressComponent :address="address" />
                               <v-btn
                                 class="primary my-3"
-                                large
+                                size="large"
                                 v-if="editBillingButton"
                                 @click="editBillBook()"
                                 depressed
@@ -497,20 +500,22 @@
                             </v-col>
                           </v-row> <v-form ref="poNumberForm" v-model="valid" :lazy-validation="lazy">
                           <v-row  >
-                            <v-col cols="12" align="right">
+                            <v-col cols="12">
                                <v-text-field
                                v-model="poNumber"
                                type="text"
-                                    dense
+                                    density="compact"
                                     placeholder="Purchase Order Number"
-                                    outlined
+                                    variant="outlined"
+                                    color="primary"
                                     :rules="textRules"
                                ></v-text-field>
                             </v-col>
 
-                            <v-col cols="12" align="right">
+                            <v-col cols="12" align="right" class="mb-6">
                               <v-btn
-                                class="primary mx-3 text-uppercase"
+                                class="primary mx-3 text-uppercase rounded-0"
+                                color="primary"
                                 @click="placeOrderFree($event)"
                                 tile
                                 depressed
@@ -528,73 +533,85 @@
                                 <v-col cols="12">
                                   <v-select
                                     v-model="selectedBillingAddress"
-                                    dense
+                                    density="compact"
                                     :items="billingAddressList"
-                                    outlined
+                                    variant="outlined"
                                     return-object
+                                    color="primary"
                                     class="billing-address-select"
                                     @change="changeBillingAddress()"
                                     item-value="id"
                                   >
-                                    <template v-slot:selection="data">
-                                      <div v-if="data.item.value">
+                                  <template v-slot:selection="{ item }">
+                                      <div v-if="item.raw.value">
                                         <span class>New Address</span>
                                       </div>
                                       <div
-                                        class="
-                                          d-inline-block
-                                          text-truncate
-                                          pt-sm-0
-                                        "
+                                        class="d-inline-block text-truncate pt-sm-0"
                                         v-else
                                       >
+                                       
                                         <span class
-                                          >{{ data.item.firstname }}
-                                          {{ data.item.lastname }}</span
+                                          >{{ item.raw.firstname }}
+                                          {{item.raw.lastname }}</span
                                         >
                                         <span
                                           class="body pl-1"
-                                          v-if="data.item.streetNoOne"
-                                          >{{ data.item.streetNoOne }},
-                                          {{ data.item.streetNoTwo }}</span
+                                          v-if="item.raw.streetNoOne"
+                                          >{{ item.raw.streetNoOne }},
+                                          {{ item.raw.streetNoTwo }}</span
                                         >
                                         <span class="body pl-1" v-else
-                                          >{{ data.item.street[0] }} ,{{
-                                            data.item.street[1]
+                                          >{{
+                                            item.raw.street
+                                              ? item.raw.street[0]
+                                              : ""
+                                          }}
+                                          ,{{
+                                            item.raw.street
+                                              ? item.raw.street[1]
+                                              : ""
                                           }}</span
                                         >
                                         <span class="pl-1"
-                                          >{{ data.item.city }}
-                                          {{ data.item.postcode }}</span
+                                          >{{ item.raw.city }}
+                                          {{ item.raw.postcode }}</span
                                         >
                                       </div>
                                     </template>
-                                    <template v-slot:item="data">
-                                      <v-list-item-content>
-                                        <v-list-item-title
-                                          v-if="data.item.value"
+                                    <template v-slot:item="{ props, item }">
+                                      <v-list-item-content v-bind="props">
+                                        <v-list-item-title class="myItems1"
+                                          v-if="item.raw.value"
                                         >
                                           <span class="ml-2">New Address</span>
                                         </v-list-item-title>
-                                        <v-list-item-title v-else>
+                                        <v-list-item-title class="myItems" v-else>
                                           <span class="ml-2"
-                                            >{{ data.item.firstname }}
-                                            {{ data.item.lastname }},</span
+                                            >{{ item.raw.firstname }}
+                                            {{ item.raw.lastname }},</span
                                           >
                                           <span
                                             class="body"
-                                            v-if="data.item.streetNoOne"
-                                            >{{ data.item.streetNoOne }},
-                                            {{ data.item.streetNoTwo }}</span
+                                            v-if="item.raw.streetNoOne"
+                                            >{{ item.raw.streetNoOne }},
+                                            {{ item.raw.streetNoTwo }}</span
                                           >
                                           <span class="body" v-else
-                                            >{{ data.item.street[0] }} ,{{
-                                              data.item.street[1]
+                                            >{{
+                                              item.raw.street
+                                                ? item.raw.street[0]
+                                                : ""
+                                            }}
+                                            ,{{
+                                              item.raw.street
+                                                ? item.raw.street[1]
+                                                : ""
                                             }}</span
                                           >
                                           <span class
-                                            >{{ data.item.city }},
-                                            {{ data.item.postcode }}</span
+                                            >{{ item.raw.city }},
+                                            {{ item.raw.postcode }}</span
                                           >
                                         </v-list-item-title>
                                       </v-list-item-content>
@@ -603,17 +620,19 @@
                                 </v-col>
                                 <v-col
                                   cols="12"
-                                  class="d-flex justify-end pa-0"
-                                  v-if="!showNewBillingForm"
+                                  class="d-flex justify-end pa-0 mb-6"
+                                  v-if="!sshowNewBillingForm"
                                 >
                                   <v-btn
                                     class="primary ma-3 text-uppercase"
                                     @click="cancelBillingAddress"
+                                    color="primary"
                                     >Cancel</v-btn
                                   >
                                   <v-btn
                                     class="success ma-3 text-uppercase"
                                     @click="updateBillingAddress"
+                                    color="success"
                                     >Update</v-btn
                                   >
                                 </v-col>
@@ -632,7 +651,7 @@
                                     label="Save in Address Book"
                                     v-model="saveInBillingAddressBook"
                                     class="mt-0"
-                                    dense
+                                    density="compact"
                                     hide-details
                                   ></v-checkbox>
                                 </v-col>
@@ -702,8 +721,7 @@
                           >Continue To Paypal</v-btn>
                         </v-col>
                         </div>-->
-                      </v-radio-group>
-                      
+                     
                       <v-divider></v-divider>
                     </v-col>
                     <v-col cols="12" v-else>
@@ -718,8 +736,8 @@
                               name="email"
                               v-model="emailId"
                               :rules="emailRules"
-                              outlined
-                              dense
+                              variant="outlined"
+                              density="compact"
                             ></v-text-field>
                             <!-- <v-text-field
                 v-show="passwordFields"
@@ -837,20 +855,20 @@
                 <v-col cols="12" sm="5" md="4" class="pl-3 d-none d-sm-block">
                   <p class="h3 mb-2">Order Summary</p>
                   <hr />
-                  <v-expansion-panels accordion light flat>
-                    <v-expansion-panel class="transparent-background">
-                      <v-expansion-panel-header class="pr-4"
+                  <v-expansion-panels  class="checkpout-expansion-panel">
+                    <v-expansion-panel elevation="0" class="transparent-background">
+                      <v-expansion-panel-title class="pr-4 checkout-expansion"
                         >{{ 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"
                             :cartItems="cartProductsItem"
                           />
                         </div>
-                      </v-expansion-panel-content>
+                      </v-expansion-panel-text>
                     </v-expansion-panel>
                   </v-expansion-panels>
                   <hr />
@@ -975,9 +993,10 @@
 
                       <v-row class="mt-4">
                         <v-col class="d-flex justify-space-between pb-0">
-                          <span class="display-1">Ship To:</span>
+                          <span class="text-h4">Ship To:</span>
                           <v-btn
                             icon
+                            flat
                             @click="(tabs = 'shippingTab'), (valid = false)"
                           >
                             <v-icon>mdi mdi-pencil</v-icon>
@@ -1044,9 +1063,10 @@
                       </v-row>
                       <v-row class="mt-4">
                         <v-col class="d-flex justify-space-between pb-0">
-                          <span class="display-1">Shipping Method:</span>
+                          <span class="text-h4">Shipping Method:</span>
                           <v-btn
                             icon
+                            flat
                             @click="(tabs = 'shippingTab'), (valid = false)"
                           >
                             <v-icon>mdi mdi-pencil</v-icon>
@@ -1062,7 +1082,7 @@
                         >
                           <v-col
                             cols="12"
-                            class="pb-0"
+                            class="pb-0 mb-4"
                             v-if="types.code === 'shipping'"
                             >{{ types.title }}</v-col
                           >
@@ -1088,7 +1108,7 @@
         </v-col>
       </v-row>
       <v-col v-else>
-        <v-alert class="alert-box-outline" type="error" text dense
+        <v-alert class="alert-box-outline" type="error" text density="compact"
           >You have no items in your shopping cart.</v-alert
         >
         <p>
@@ -2375,5 +2395,6 @@ export default {
   padding-top: 5px;
   padding-bottom: 5px;
 }
+ 
 </style>
 <style src="./checkout_page.scss" lang="scss" />
\ No newline at end of file