ui fixes
This commit is contained in:
User
parent
4838582ad9
commit
27246a07b8
11
package.json
11
package.json
|
|
@ -23,25 +23,27 @@
|
|||
"lint": "vite lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vuetify/vite-plugin": "^1.0.0-alpha.11",
|
||||
"core-js": "^3.8.3",
|
||||
"fuse.js": "^6.4.2",
|
||||
"js-base64": "^2.5.1",
|
||||
"lodash-humps": "^3.1.5",
|
||||
"vite-plugin-s3": "^0.3.0",
|
||||
"vite-plugin-vuetify": "^1.0.2",
|
||||
"vue": "^3.2.47",
|
||||
"vue3-cookies": "^1.0.6",
|
||||
"vue-meta": "^2.4.0",
|
||||
"vue-router": "4",
|
||||
"vue-tel-input": "^4.4.0",
|
||||
"vue3-cookies": "^1.0.6",
|
||||
"vue3-google-map": "^0.14.0",
|
||||
"vue3-tel-input": "^1.0.4",
|
||||
"vueperslides": "^2.8.2",
|
||||
"vuetify": "^3.0.0-beta.11",
|
||||
"@vuetify/vite-plugin": "^1.0.0-alpha.11",
|
||||
"vite-plugin-vuetify": "^1.0.2",
|
||||
"vite-plugin-s3": "^0.3.0",
|
||||
"vuex": "^4.0.2",
|
||||
"vuex-map-fields": "^1.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
|
|
@ -49,7 +51,6 @@
|
|||
"sass": "^1.62.0",
|
||||
"sass-loader": "^13.2.2",
|
||||
"vite": "^4.2.1",
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"vite-plugin-aws3": "^0.3.0",
|
||||
"vue-template-compiler": "^2.7.14",
|
||||
"vue-tsc": "^1.2.0",
|
||||
|
|
|
|||
|
|
@ -55,8 +55,9 @@
|
|||
</v-card>
|
||||
</v-menu>
|
||||
|
||||
<v-hover v-slot:default="{ hover }" v-if="!userAuth">
|
||||
<v-hover v-slot:default="{ isHoovering, props }" v-if="!userAuth">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
icon
|
||||
@click="goToLogin()"
|
||||
class="d-none d-md-block header-buttons"
|
||||
|
|
@ -64,20 +65,21 @@
|
|||
>
|
||||
<v-icon
|
||||
v-if="pageName() == 'CategoryPage'"
|
||||
:class="hover ? 'header-category-icon' : 'text-primary'"
|
||||
:class="isHoovering ? 'header-category-icon' : 'text-primary'"
|
||||
>mdi-account-circle-outline</v-icon
|
||||
>
|
||||
<v-icon v-else :class="hover ? 'text-primary' : 'text-white'"
|
||||
<v-icon v-else :class="isHoovering ? 'text-primary' : 'text-white'"
|
||||
>mdi-account-circle-outline</v-icon
|
||||
>
|
||||
</v-btn>
|
||||
</v-hover>
|
||||
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHoovering, props }">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
icon
|
||||
:class="
|
||||
hover ? 'text-primary' : textColor ? textColor : 'text-white'
|
||||
isHoovering ? 'text-primary' : textColor ? textColor : 'text-white'
|
||||
"
|
||||
@click="showSearchInput = true"
|
||||
class="d-none d-md-block header-buttons"
|
||||
|
|
@ -85,10 +87,10 @@
|
|||
>
|
||||
<v-icon
|
||||
v-if="pageName() == 'CategoryPage'"
|
||||
:class="hover ? 'header-category-icon' : 'text-primary'"
|
||||
:class="isHoovering ? 'header-category-icon' : 'text-primary'"
|
||||
>mdi-magnify</v-icon
|
||||
>
|
||||
<v-icon v-else :class="hover ? 'text-primary' : 'text-white'"
|
||||
<v-icon v-else :class="isHoovering ? 'text-primary' : 'text-white'"
|
||||
>mdi-magnify</v-icon
|
||||
>
|
||||
</v-btn>
|
||||
|
|
@ -124,11 +126,12 @@
|
|||
</v-text-field>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering, props }">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
icon
|
||||
:class="
|
||||
hover ? 'text-primary' : textColor ? textColor : 'text-white'
|
||||
isHovering ? 'text-primary' : textColor ? textColor : 'text-white'
|
||||
"
|
||||
class="header-buttons"
|
||||
@click.stop="showCartDrawer(true)"
|
||||
|
|
@ -136,10 +139,10 @@
|
|||
>
|
||||
<v-icon
|
||||
v-if="pageName() == 'CategoryPage'"
|
||||
:class="hover ? 'header-category-icon' : 'text-primary'"
|
||||
:class="isHovering ? 'header-category-icon' : 'text-primary'"
|
||||
>mdi-cart-outline</v-icon
|
||||
>
|
||||
<v-icon v-else :class="hover ? 'text-primary' : 'text-white'"
|
||||
<v-icon v-else :class="isHovering ? 'text-primary' : 'text-white'"
|
||||
>mdi-cart-outline</v-icon
|
||||
>
|
||||
<span v-if="cartProductsProgress || inProgress">
|
||||
|
|
@ -188,12 +191,13 @@
|
|||
<v-spacer></v-spacer>
|
||||
|
||||
</v-app-bar>
|
||||
|
||||
<v-app-bar
|
||||
height="56"
|
||||
:absolute="!isScrolled"
|
||||
:app="isScrolled"
|
||||
:color="
|
||||
isScrolled || hover ? 'header-background-white' : 'rgba(0,0,0,0.0)'
|
||||
isScrolled || isHovering ? 'header-background-white' : 'rgba(0,0,0,0.0)'
|
||||
"
|
||||
elevation="0"
|
||||
v-else-if="pageName() == 'CheckoutPage'"
|
||||
|
|
@ -219,8 +223,9 @@
|
|||
></v-img>
|
||||
<v-spacer></v-spacer>
|
||||
</v-app-bar>
|
||||
<v-hover v-else v-slot:default="{ hover }">
|
||||
<v-hover v-else v-slot:default="{ isHovering, props }">
|
||||
<v-app-bar
|
||||
v-bind="props"
|
||||
height="56"
|
||||
:class="
|
||||
pageName() == 'HomePage' &&
|
||||
|
|
@ -233,7 +238,7 @@
|
|||
:absolute="!isScrolled"
|
||||
:app="isScrolled"
|
||||
:color="
|
||||
isScrolled || hover ? 'header-background-white' : 'rgba(0,0,0,0.0)'
|
||||
isScrolled || isHovering ? 'header-background-white' : 'rgba(0,0,0,0.0)'
|
||||
"
|
||||
elevation="0"
|
||||
>
|
||||
|
|
@ -243,23 +248,23 @@
|
|||
:class="textColor"
|
||||
class="d-md-none header-menu-button ml-n3 pl-1"
|
||||
:color="
|
||||
hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
|
||||
isHovering && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
|
||||
"
|
||||
></v-app-bar-nav-icon>
|
||||
<v-img
|
||||
v-if="!isScrolled && !hover"
|
||||
craneLogoWhite
|
||||
v-if="!isScrolled && !isHovering"
|
||||
:src="craneLogoWhite"
|
||||
max-width="100"
|
||||
@click="goToHomePage()"
|
||||
class="cursor-pointer d-none d-md-flex"
|
||||
class="cursor-pointer d-none d-md-flex ml-6"
|
||||
contain
|
||||
aspect-ratio="1"
|
||||
></v-img>
|
||||
<v-img
|
||||
v-else-if="(isScrolled && !hover) || hover"
|
||||
v-else-if="(isScrolled && !isHovering) || isHovering"
|
||||
:src="craneLogoBlue"
|
||||
max-width="100"
|
||||
class="cursor-pointer d-none d-md-flex"
|
||||
class="cursor-pointer d-none d-md-flex ml-6"
|
||||
@click="goToHomePage()"
|
||||
contain
|
||||
aspect-ratio="1"
|
||||
|
|
@ -267,7 +272,7 @@
|
|||
</v-col>
|
||||
<v-col class="d-flex justify-center">
|
||||
<v-img
|
||||
v-if="!isScrolled && !hover"
|
||||
v-if="!isScrolled && !isHovering"
|
||||
craneLogoWhite
|
||||
max-width="100"
|
||||
@click="goToHomePage()"
|
||||
|
|
@ -276,7 +281,7 @@
|
|||
aspect-ratio="1"
|
||||
></v-img>
|
||||
<v-img
|
||||
v-else-if="(isScrolled && !hover) || hover"
|
||||
v-else-if="(isScrolled && !isHovering) || isHovering"
|
||||
:src="craneLogoBlue"
|
||||
max-width="100"
|
||||
class="cursor-pointer d-md-none"
|
||||
|
|
@ -295,7 +300,7 @@
|
|||
v-on="on"
|
||||
:class="textColor"
|
||||
:color="
|
||||
hover && !isScrolled
|
||||
isHovering && !isScrolled
|
||||
? 'primary'
|
||||
: isScrolled
|
||||
? 'primary'
|
||||
|
|
@ -330,7 +335,7 @@
|
|||
v-if="!userAuth"
|
||||
icon
|
||||
:color="
|
||||
hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
|
||||
isHovering && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
|
||||
"
|
||||
@click="goToLogin()"
|
||||
:class="textColor"
|
||||
|
|
@ -345,7 +350,7 @@
|
|||
<v-btn
|
||||
icon
|
||||
:color="
|
||||
hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
|
||||
isHovering && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
|
||||
"
|
||||
@click="showSearchInput = true"
|
||||
:class="textColor"
|
||||
|
|
@ -371,7 +376,7 @@
|
|||
icon
|
||||
:class="textColor"
|
||||
:color="
|
||||
hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
|
||||
isHovering && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
|
||||
"
|
||||
class="header-buttons mr-n2"
|
||||
@click.stop="showCartDrawer(true)"
|
||||
|
|
@ -695,6 +700,7 @@ export default {
|
|||
}
|
||||
},
|
||||
goToHomePage() {
|
||||
alert('hello')
|
||||
window.open("/", "_self");
|
||||
},
|
||||
async inactiveCategoryMenu(data) {
|
||||
|
|
|
|||
|
|
@ -18,19 +18,20 @@
|
|||
<h2 class="black--text mt-3">Shopping Cart</h2>
|
||||
</v-col>
|
||||
<v-col cols="5" justify="center">
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering, props }">
|
||||
<v-btn
|
||||
large
|
||||
tile
|
||||
v-bind="props"
|
||||
class="float-right mt-2"
|
||||
:outlined="hover"
|
||||
:color="hover?'white':'primary'"
|
||||
:class="hover?'primary--text header-closedrawer-button':'white--text'"
|
||||
:variant="isHovering"
|
||||
:color="isHovering?'white':'primary'"
|
||||
:class="isHovering?'text-primary header-closedrawer-button':'text-white'"
|
||||
depressed
|
||||
@click.stop="closeCartDrawer(false)"
|
||||
>
|
||||
CLOSE
|
||||
<v-icon :class="hover?'primary--text':'white--text'" class="h3">mdi mdi-close</v-icon>
|
||||
<v-icon :class="isHovering?'text-primary':'text-white'" class="h3">mdi mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
|
|
|
|||
|
|
@ -150,6 +150,7 @@
|
|||
<vue-tel-input
|
||||
type="number"
|
||||
v-model="telephone"
|
||||
mode="international"
|
||||
:defaultCountry="setCountryCode"
|
||||
:class="phoneNumberError ? 'phonenumber-input-error-border':'phonenumber-custom-input'"
|
||||
@input="validateNumber"
|
||||
|
|
@ -219,7 +220,7 @@
|
|||
//import { mapState } from "vuex";
|
||||
import { createHelpers } from "vuex-map-fields";
|
||||
import { fetchStates } from "@/services/util.service";
|
||||
import { VueTelInput } from "vue-tel-input";
|
||||
import { VueTelInput } from 'vue3-tel-input'
|
||||
|
||||
const { mapFields: mapFieldsGuest } = createHelpers({
|
||||
getterType: "guestInfo/getField",
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@
|
|||
//import { mapState } from "vuex";
|
||||
import { createHelpers } from "vuex-map-fields";
|
||||
import { fetchStates } from "@/services/util.service";
|
||||
import { VueTelInput } from "vue-tel-input";
|
||||
import { VueTelInput } from 'vue3-tel-input'
|
||||
|
||||
const { mapFields } = createHelpers({
|
||||
getterType: "accountOne/getField",
|
||||
|
|
|
|||
|
|
@ -1,40 +1,45 @@
|
|||
<template>
|
||||
<div class="d-flex flex-column height-100">
|
||||
<Header @action="onAction" />
|
||||
<v-navigation-drawer
|
||||
v-model="showMenu"
|
||||
v-if="showMenu"
|
||||
:clipped="$vuetify.display.mdAndUp"
|
||||
app
|
||||
color="header-background-color darken-3"
|
||||
class="white--text pa-4"
|
||||
color="header-bg-color darken-3"
|
||||
class=" bg-indigo text-white pa-4 mt-6"
|
||||
>
|
||||
<v-row>
|
||||
<v-col cols="12" class="pa-0">
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering, props }">
|
||||
<router-link
|
||||
:class="hover ? 'primary--text darken-3 white' : 'white--text'"
|
||||
v-bind="props"
|
||||
:class="isHovering ? 'text-primary bg-white' : 'text-white'"
|
||||
class="my-account-link d-block text-decoration-none h4 pa-2 px-6 my-1"
|
||||
:to="{name:'AccountDashboard'}"
|
||||
>Account Dashboard</router-link>
|
||||
</v-hover>
|
||||
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering, props }">
|
||||
<router-link
|
||||
:class="hover ? 'primary--text darken-3 white' : 'white--text'"
|
||||
v-bind="props"
|
||||
:class="isHovering ? 'text-primary bg-white' : 'text-white'"
|
||||
class="my-account-link d-block text-decoration-none h4 pa-2 px-6 my-1"
|
||||
:to="basicInfo.addresses&&basicInfo.addresses.length?{name:'AddressBook'}:{name:'EditAddressBook' ,params:{addressId:'new'}}"
|
||||
>Address Book</router-link>
|
||||
</v-hover>
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering, props }">
|
||||
<router-link
|
||||
:class="hover ? 'primary--text darken-3 white' : 'white--text'"
|
||||
v-bind="props"
|
||||
:class="isHovering ? 'text-primary bg-white' : 'text-white'"
|
||||
class="my-account-link d-block text-decoration-none h4 pa-2 px-6 my-1"
|
||||
:to="{name:'EditAccountInfo',params:{value:'false'}}"
|
||||
>Account Information</router-link>
|
||||
</v-hover>
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering, props }">
|
||||
<router-link
|
||||
:class="hover ? 'primary--text darken-3 white' : 'white--text'"
|
||||
v-bind="props"
|
||||
:class="isHovering ? 'text-primary bg-white' : 'text-white'"
|
||||
class="d-block text-decoration-none h4 pa-2 px-6 my-1"
|
||||
to
|
||||
@click.native="goToLogout()"
|
||||
|
|
@ -43,7 +48,7 @@
|
|||
</v-col>
|
||||
</v-row>
|
||||
</v-navigation-drawer>
|
||||
<Header @action="onAction" />
|
||||
|
||||
<v-content>
|
||||
<router-view class="pa-4" />
|
||||
</v-content>
|
||||
|
|
@ -56,6 +61,7 @@
|
|||
<script>
|
||||
import Header from "@/components/retailer/layout/header/Header.vue";
|
||||
import FooterComponent from "@/components/retailer/layout/footer/FooterComponent.vue"
|
||||
import craneLogoWhite from "@/assets/Crane_Logo_white.png";
|
||||
|
||||
import { createHelpers } from "vuex-map-fields";
|
||||
|
||||
|
|
@ -76,6 +82,7 @@ export default {
|
|||
source: String
|
||||
},
|
||||
data: () => ({
|
||||
craneLogoWhite:craneLogoWhite,
|
||||
showMenu: false
|
||||
}),
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -4,13 +4,14 @@
|
|||
app
|
||||
color="header-background-color darken-3"
|
||||
dark
|
||||
class=" bg-indigo text-white pa-4"
|
||||
>
|
||||
<v-col class="d-flex justify-start pa-0">
|
||||
<v-app-bar-nav-icon @click="menuAction()" class="header-buttons" />
|
||||
<v-img
|
||||
class="ml-md-2 cursor-pointer d-none d-md-flex d-lg-flex"
|
||||
@click="goTohomePage()"
|
||||
src="@/assets/Crane_Logo_white.png"
|
||||
:src="craneLogoWhite"
|
||||
max-height="45"
|
||||
max-width="100"
|
||||
contain
|
||||
|
|
@ -21,7 +22,7 @@
|
|||
<v-img
|
||||
class="ml-md-2 cursor-pointer d-md-none d-lg-none"
|
||||
@click="goTohomePage()"
|
||||
src="@/assets/Crane_Logo_white.png"
|
||||
:src="craneLogoWhite"
|
||||
max-height="45"
|
||||
max-width="100"
|
||||
contain
|
||||
|
|
@ -200,6 +201,8 @@ import {
|
|||
getCategoryOne,
|
||||
} from "@/services/util.service";
|
||||
import humps from "lodash-humps";
|
||||
import craneLogoBlue from "@/assets/Crane_Logo_blue.png";
|
||||
import craneLogoWhite from "@/assets/Crane_Logo_white.png";
|
||||
|
||||
export default {
|
||||
name: "Header",
|
||||
|
|
@ -207,6 +210,8 @@ export default {
|
|||
|
||||
props: [],
|
||||
data: () => ({
|
||||
craneLogoBlue:craneLogoBlue,
|
||||
craneLogoWhite:craneLogoWhite,
|
||||
activeCategoryMenu: "",
|
||||
searchResultList: [],
|
||||
searchInProgress: false,
|
||||
|
|
|
|||
10
src/main.js
10
src/main.js
|
|
@ -1,6 +1,7 @@
|
|||
import { createApp } from 'vue'
|
||||
import VueCookies from 'vue3-cookies';
|
||||
|
||||
import VueTelInput from 'vue3-tel-input'
|
||||
import 'vue3-tel-input/dist/vue3-tel-input.css'
|
||||
import App from './App.vue'
|
||||
import router from './multipages'
|
||||
import store from './stores';
|
||||
|
|
@ -10,10 +11,15 @@ import 'vuetify/lib/styles/settings/_variables.scss';
|
|||
|
||||
import 'vuetify/dist/vuetify.min.css'
|
||||
|
||||
const VueTelInputOptions = {
|
||||
mode: "international",
|
||||
onlyCountries: ['NG', 'GH', "GB", "US", "CA"]
|
||||
}
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(vuetify)
|
||||
app.use(VueCookies)
|
||||
|
||||
app.use(VueTelInput, VueTelInputOptions)
|
||||
|
||||
app.use(store)
|
||||
app.use(router)
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<v-row>
|
||||
<v-col cols="12" sm="12" class="fontcolor-black-light">
|
||||
<div v-show="!addressId">
|
||||
<p class="h2 mb-5 body-font text-uppercase primary--text pb-2">Address Book</p>
|
||||
<p class="h2 mb-5 body-font text-uppercase text-primary pb-2">Address Book</p>
|
||||
<div class="address-book-line my-1"></div>
|
||||
<v-row class="mt-12" align="center" justify="center" v-if="inProgress">
|
||||
<v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<v-row class="mt-4" v-else>
|
||||
<v-col cols="12" sm="6" md="6" lg="6">
|
||||
<p
|
||||
class="body-font text-uppercase primary--text font-weight-bold"
|
||||
class="body-font text-uppercase text-primary font-weight-bold"
|
||||
>Default Billing Address</p>
|
||||
<p
|
||||
class="body-font"
|
||||
|
|
@ -23,12 +23,13 @@
|
|||
</div>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering, props }">
|
||||
<v-btn
|
||||
@click="editAddress(billingAddressDetails.address,billingAddressDetails.index)"
|
||||
:outlined="hover"
|
||||
:color="hover?'white':'primary'"
|
||||
:class="hover?'primary--text':'white--text'"
|
||||
v-bind="props"
|
||||
:variant="isHovering"
|
||||
:color="isHovering?'white':'primary'"
|
||||
:class="isHovering?'text-primary':'text-white'"
|
||||
depressed
|
||||
:large="$vuetify.display.mdAndUp?true:false"
|
||||
tile
|
||||
|
|
@ -40,7 +41,7 @@
|
|||
</v-col>
|
||||
<v-col cols="12" sm="6" md="6" lg="6">
|
||||
<p
|
||||
class="body-font text-uppercase primary--text font-weight-bold"
|
||||
class="body-font text-uppercase text-primary font-weight-bold"
|
||||
>Default Shipping Address</p>
|
||||
<p
|
||||
class="body-font"
|
||||
|
|
@ -52,15 +53,16 @@
|
|||
</div>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering, props }">
|
||||
<v-btn
|
||||
@click="editAddress(shippingAddressDetails.address,shippingAddressDetails.index)"
|
||||
depressed
|
||||
:large="$vuetify.display.mdAndUp?true:false"
|
||||
tile
|
||||
:outlined="hover"
|
||||
:color="hover?'white':'primary'"
|
||||
:class="hover?'primary--text':'white--text'"
|
||||
v-bind="props"
|
||||
:variant="isHovering"
|
||||
:color="isHovering?'white':'primary'"
|
||||
:class="isHovering?'text-primary':'text-white'"
|
||||
class="body-font my-2 address-book-button"
|
||||
>EDIT</v-btn>
|
||||
</v-hover>
|
||||
|
|
@ -72,7 +74,7 @@
|
|||
<v-col>
|
||||
<v-row class="mt-4">
|
||||
<p
|
||||
class="h3 body-font text-uppercase primary--text pb-2 mb-1 mr-3"
|
||||
class="h3 body-font text-uppercase text-primary pb-2 mb-1 mr-3"
|
||||
>Additional Address Entries</p>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
|
@ -102,29 +104,31 @@
|
|||
<ShippingAddressComponent :address="address" />
|
||||
<v-row>
|
||||
<v-col cols="2">
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering, props }">
|
||||
<v-btn
|
||||
@click="editAddress(address,index)"
|
||||
depressed
|
||||
tile
|
||||
dense
|
||||
:outlined="hover"
|
||||
:color="hover?'white':'primary'"
|
||||
:class="hover?'primary--text':'white--text'"
|
||||
v-bind="props"
|
||||
:variant="isHovering"
|
||||
:color="isHovering?'white':'primary'"
|
||||
:class="isHovering?'text-primary':'text-white'"
|
||||
class="body-font my-2 address-book-button"
|
||||
>EDIT</v-btn>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
<v-col cols="2">
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering, props }">
|
||||
<v-btn
|
||||
@click="deleteAddress(address)"
|
||||
depressed
|
||||
tile
|
||||
dense
|
||||
:outlined="hover"
|
||||
:color="hover?'white':'red'"
|
||||
:class="hover?'red--text':'white--text'"
|
||||
v-bind="props"
|
||||
:variant="isHovering"
|
||||
:color="isHovering?'white':'red'"
|
||||
:class="isHovering?'text-red':'text-white'"
|
||||
class="body-font my-2 white--text"
|
||||
>DELETE</v-btn>
|
||||
</v-hover>
|
||||
|
|
@ -134,15 +138,16 @@
|
|||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering, props }">
|
||||
<v-btn
|
||||
@click="editAddress()"
|
||||
depressed
|
||||
:large="$vuetify.display.mdAndUp?true:false"
|
||||
tile
|
||||
:outlined="hover"
|
||||
:color="hover?'white':'primary'"
|
||||
:class="hover?'primary--text':'white--text'"
|
||||
v-bind="props"
|
||||
:variant="isHovering"
|
||||
:color="isHovering?'white':'primary'"
|
||||
:class="isHovering?'text-primary':'text-white'"
|
||||
class="body-font my-2 address-book-button"
|
||||
>ADD NEW ADDRESS</v-btn>
|
||||
</v-hover>
|
||||
|
|
@ -151,11 +156,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-show="addressId">
|
||||
<p class="h2 mb-5 body-font text-uppercase primary--text">Add New Address</p>
|
||||
<p class="h2 mb-5 body-font text-uppercase text-primary">Add New Address</p>
|
||||
<v-form ref="addressBookForm" v-model="valid">
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6">
|
||||
<p class="h3 body-font text-uppercase primary--text">Contact Information</p>
|
||||
<p class="h3 body-font text-uppercase text-primary">Contact Information</p>
|
||||
<div class="address-book-line mb-5"></div>
|
||||
<!-- <ContactInfoComponent v-bind:contactDetails="basicInfo" ref="contactInfoForm" /> -->
|
||||
<v-form ref="contactForm" v-model="valid" :lazy-validation="lazy">
|
||||
|
|
@ -358,7 +363,7 @@ import MeVerifyAddressComponent from "@/components/retailer/address/MeVerifyAddr
|
|||
import { loginInterrupt } from "@/services/nav";
|
||||
import SnackbarComponent from "@/components/common/SnackbarComponent.vue";
|
||||
import ConfirmationDialog from "@/components/common/ConfirmationDialog.vue";
|
||||
import { VueTelInput } from "vue-tel-input";
|
||||
import { VueTelInput } from 'vue3-tel-input'
|
||||
//import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent.vue";
|
||||
|
||||
import { createHelpers } from "vuex-map-fields";
|
||||
|
|
@ -415,7 +420,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
hideAndShowFields: function() {
|
||||
let currentName = this.$router.history.current.name;
|
||||
let currentName = this.$route.name
|
||||
if (currentName === "AddressBook") {
|
||||
return false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1167,7 +1167,7 @@ import GuestShippingAddressForm from "@/components/retailer/address/GuestShippin
|
|||
import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent.vue";
|
||||
import VerifyAddressComponent from "@/components/retailer/address/VerifyAddressComponent.vue";
|
||||
import { createHelpers } from "vuex-map-fields";
|
||||
import { VueTelInput } from "vue-tel-input";
|
||||
import { VueTelInput } from 'vue3-tel-input'
|
||||
import {
|
||||
// googleAanalyticsPurchase,
|
||||
// googleAanalyticsCheckout,
|
||||
|
|
|
|||
36
yarn.lock
36
yarn.lock
|
|
@ -2110,7 +2110,7 @@
|
|||
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.47.tgz#e597ef75086c6e896ff5478a6bfc0a7aa4bbd14c"
|
||||
integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
|
||||
|
||||
"@vuetify/loader-shared@^1.7.1":
|
||||
"@vuetify/loader-shared@^1.4.0", "@vuetify/loader-shared@^1.7.1":
|
||||
version "1.7.1"
|
||||
resolved "https://registry.yarnpkg.com/@vuetify/loader-shared/-/loader-shared-1.7.1.tgz#0f63a3d41b6df29a2db1ff438aa1819b237c37a3"
|
||||
integrity sha512-kLUvuAed6RCvkeeTNJzuy14pqnkur8lTuner7v7pNE/kVhPR97TuyXwBSBMR1cJeiLiOfu6SF5XlCYbXByEx1g==
|
||||
|
|
@ -2118,6 +2118,14 @@
|
|||
find-cache-dir "^3.3.2"
|
||||
upath "^2.0.1"
|
||||
|
||||
"@vuetify/vite-plugin@^1.0.0-alpha.11":
|
||||
version "1.0.0-alpha.11"
|
||||
resolved "https://registry.yarnpkg.com/@vuetify/vite-plugin/-/vite-plugin-1.0.0-alpha.11.tgz#43cd0fa4134da2467d7dd134b35b5d21a54ddfca"
|
||||
integrity sha512-ADAEubiF+2VHbcsJs0nWCBThc4LX+mGnioYrF0O+jKTvCICT1PJKpp15+M7ZyyM9sAkEFpVH+5FaH5/Ywj7RWg==
|
||||
dependencies:
|
||||
"@vuetify/loader-shared" "^1.4.0"
|
||||
debug "^4.3.3"
|
||||
|
||||
acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
|
||||
version "5.3.2"
|
||||
resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
|
||||
|
|
@ -2368,7 +2376,7 @@ core-js@^3.6.4:
|
|||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
|
||||
integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
|
||||
|
||||
core-js@^3.8.3:
|
||||
core-js@^3.6.5, core-js@^3.8.3:
|
||||
version "3.30.1"
|
||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.30.1.tgz#fc9c5adcc541d8e9fa3e381179433cbf795628ba"
|
||||
integrity sha512-ZNS5nbiSwDTq4hFosEDqm65izl2CWmLz0hARJMyNQBgkUZMIF51cQiMvIQKA6hvuaeWxQDP3hEedM1JZIgTldQ==
|
||||
|
|
@ -2987,6 +2995,11 @@ levn@^0.4.1:
|
|||
prelude-ls "^1.2.1"
|
||||
type-check "~0.4.0"
|
||||
|
||||
libphonenumber-js@^1.9.6:
|
||||
version "1.10.28"
|
||||
resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.28.tgz#cae7e929cad96cee5ecc9449027192ecba39ee72"
|
||||
integrity sha512-1eAgjLrZA0+2Wgw4hs+4Q/kEBycxQo8ZLYnmOvZ3AlM8ImAVAJgDPlZtISLEzD1vunc2q8s2Pn7XwB7I8U3Kzw==
|
||||
|
||||
loader-utils@^2.0.0:
|
||||
version "2.0.4"
|
||||
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
|
||||
|
|
@ -3560,6 +3573,11 @@ uri-js@^4.2.2:
|
|||
dependencies:
|
||||
punycode "^2.1.0"
|
||||
|
||||
user@^0.0.0:
|
||||
version "0.0.0"
|
||||
resolved "https://registry.yarnpkg.com/user/-/user-0.0.0.tgz#f27f1b23fc511f2a8efa40db55cfba123824e02a"
|
||||
integrity sha512-eRNM5isOvr6aEFAGi1CqAkmLkYxW2NJ5ThhbD+6IJXYKM1mo7Gtxx4mQIveHz/5K3p/SVnlW9k17ETn+QAu8IQ==
|
||||
|
||||
util-deprecate@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
|
||||
|
|
@ -3682,7 +3700,17 @@ vue3-google-map@^0.14.0:
|
|||
"@googlemaps/js-api-loader" "^1.12.11"
|
||||
"@googlemaps/markerclusterer" "^2.0.6"
|
||||
|
||||
vue@^3.0.0, vue@^3.2.47:
|
||||
vue3-tel-input@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/vue3-tel-input/-/vue3-tel-input-1.0.4.tgz#ed26cb808d124aebb5073d03f366b23e686804d6"
|
||||
integrity sha512-C60OyAq5ORDErSJ4x7UmJJbF95CDncMswnySmAUtbuBP0pcVcJBu6DOTxKquykvTbJEh9I73DXyqMtDxtLrwJg==
|
||||
dependencies:
|
||||
core-js "^3.6.5"
|
||||
libphonenumber-js "^1.9.6"
|
||||
user "^0.0.0"
|
||||
vue "^3.0.0-beta.1"
|
||||
|
||||
vue@^3.0.0, vue@^3.0.0-beta.1, vue@^3.2.47:
|
||||
version "3.2.47"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.47.tgz#3eb736cbc606fc87038dbba6a154707c8a34cff0"
|
||||
integrity sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==
|
||||
|
|
@ -3709,7 +3737,7 @@ vuetify-loader@^1.9.2:
|
|||
file-loader "^6.2.0"
|
||||
loader-utils "^2.0.0"
|
||||
|
||||
vuetify@^3.0.0:
|
||||
vuetify@^3.0.0-beta.11:
|
||||
version "3.1.15"
|
||||
resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.1.15.tgz#aacee61d81dcaaeabaae44f68172de142dadd274"
|
||||
integrity sha512-uxB4UCrP+hFyJaoSsVObAGBRD73qq5ga7HULepzGoMeUWap2H99mcqmMdN/a/Yp4ODK3gT8EcUeph3EgEcsArQ==
|
||||
|
|
|
|||
Loading…
Reference in New Issue