sidharth.kothari
/
retailer-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixes ui

This commit is contained in:
rakesh 2023-05-15 18:22:02 +05:30
parent a39efcdfd8
commit dfc05cd6b2
7 changed files with 312 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/common/ConfirmationDialog.vue
View File

@ -26,27 +26,29 @@
<v-card-actions class="px-4"> <v-card-actions class="px-4">
<v-row no-gutters> <v-row no-gutters>
<v-col cols="12"> <v-col cols="12">
<v-hover v-slot:default="{ hover }"> <v-hover v-slot:default="{ isHovering , props}">
<v-btn <v-btn
class="text-uppercase body-font ma-2 button-background" class="text-uppercase body-font ma-2 button-background"
tile v-bind="props"
large size="large"
depressed rounded="0"
:outlined="hover"
:color="hover?'white':'primary'"
:class="hover?'primary--text':'white--text'"
@click="onAction(false)" @click="onAction(false)"
:variant="isHovering ? 'outlined' : 'outlined'"
:class="
isHovering ? ' bg-white text-error' : 'bg-error'
"
>CANCEL</v-btn> >CANCEL</v-btn>
</v-hover> </v-hover>
<v-hover v-slot:default="{ hover }"> <v-hover v-slot:default="{ isHovering , props }">
<v-btn <v-btn
class="text-uppercase body-font ma-2 button-background" class="text-uppercase body-font ma-2 button-background"
:outlined="hover" :variant="isHovering ? 'outlined' : 'outlined'"
:color="hover?'white':'error'" :class="
:class="hover?'error--text':'white--text'" isHovering ? ' bg-white text-primary' : 'bg-primary'
tile "
large v-bind="props"
depressed size="large"
rounded="0"
@click="onAction(true)" @click="onAction(true)"
>OK</v-btn> >OK</v-btn>
</v-hover> </v-hover>

135
src/components/retailer/cart-product/CartProductList.vue
View File

@ -4,6 +4,7 @@
<v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular> <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
</v-col>--> </v-col>-->
<v-col v-if="cartItems"> <v-col v-if="cartItems">
<v-card <v-card
elevation="0" elevation="0"
class="mb-4" class="mb-4"
@ -279,18 +280,23 @@
</v-col> </v-col>
<!---------------------------cart page---------------------------------------------> <!---------------------------cart page--------------------------------------------->
<v-col cols="8" class="py-0" v-show="cartProductPage"> <v-col cols="8" class="py-0" v-show="cartProductPage">
<v-row> <v-row class="my-3">
<v-col cols="12" sm="6" md="5" lg="6"> <v-col cols="12" sm="6" md="5" lg="6">
<v-row> <v-row>
<p <p
class="fontsize-14 black--text float-left" class=" mt-4
mb-6
fontsize-14
text-black
float-left
cursor-pointer"
> >
{{ product.name }} {{ product.name }}
</p> </p>
</v-row> </v-row>
<v-row> <v-row>
<p <p
class="fontsize-14 text-uppercase" class="fontsize-14 mb-6 text-uppercase"
v-show="cartProductPage" v-show="cartProductPage"
> >
Sku {{ product.sku }} Sku {{ product.sku }}
@ -298,7 +304,7 @@
</v-row> </v-row>
<v-row> <v-row>
<p <p
class="fontsize-14 text-uppercase" class=" fontsize-14 mb-6 text-uppercase"
v-show="cartProductPage" v-show="cartProductPage"
> >
UPC {{ product.customAttributes.upc }} UPC {{ product.customAttributes.upc }}
@ -322,7 +328,7 @@
<p class="fontsize-14 mb-0 pb-10">Qty.</p> <p class="fontsize-14 mb-0 pb-10">Qty.</p>
</v-col> </v-col>
<v-col class="pl-0 pt-0"> <v-col class="pl-0 pt-0">
<v-hover v-slot:default="{ hover }"> <v-hover v-slot="{ isHovering, props }">
<v-select <v-select
:items=" :items="
qtyPriceOptions( qtyPriceOptions(
@ -331,17 +337,20 @@
index index
) )
" "
class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 cartproductlist-select-button select-change-icon" class="fontsize-16
dense line-height-21
ls-n009
font-weight-400
cartproductlist-select-button
"
variant="outlined"
density="compact"
v-bind="props"
attach attach
flat :class="isHovering ? 'text-primary' : 'text-black'"
solo v-model="selectedQty[index]"
outlined @update:modelValue="
:class="hover ? 'primary--text' : 'black--text'"
item-text="price"
item-value="qty"
single-line
@change="
updateToCart( updateToCart(
product.name, product.name,
product.sku, product.sku,
@ -358,26 +367,14 @@
product.parentSku product.parentSku
) )
" "
v-model="selectedQty[index]" :model-value="selectedQty[index]"
ref="selectedCartQty3" ref="selectedCartQty4"
background-color="transparent" background-color="transparent"
append-icon="mdi-plus" append-inner-icon="mdi-plus"
> item-value="qty"
<template v-slot:selection="data"> item-title="qty"
<span class="pl-1 fontsize-14">{{ item-children="qty"
data.item.qty ></v-select>
}}</span>
</template>
<template v-slot:item="data">
<template>
<v-list-item-content>
<v-list-item-title class="text-uppercase">{{
data.item.qty
}}</v-list-item-title>
</v-list-item-content>
</template>
</template>
</v-select>
</v-hover> </v-hover>
</v-col> </v-col>
</v-row> </v-row>
@ -386,16 +383,8 @@
<p class="fontsize-14 mb-0 pb-10">Qty.</p> <p class="fontsize-14 mb-0 pb-10">Qty.</p>
</v-col> </v-col>
<v-col class="pl-0 pt-0"> <v-col class="pl-0 pt-0">
<!--<v-select
class="fontsize-14 title-color-black cartproductlist-select-button" <v-hover v-slot:default="{ isHovering, props }">
:items="numberOptions(product.customAttributes.baMinSalesQty,product.customAttributes.baQtyIncrements,product.qty,index)"
v-model="selectedQty[index]"
dense
flat
solo
@change="updateToCart(product.sku,product.itemId,index)"
></v-select>-->
<v-hover v-slot:default="{ hover }">
<v-select <v-select
:items=" :items="
numberOptions( numberOptions(
@ -405,15 +394,21 @@
index index
) )
" "
class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 cartproductlist-select-button select-change-icon" class="
dense fontsize-16
line-height-21
ls-n009
font-weight-400
cartproductlist-select-button
"
variant="outlined"
density="compact"
v-bind="props"
attach attach
flat :class="isHovering ? 'text-primary' : 'text-black'"
solo v-model="selectedQty[index]"
outlined @update:modelValue="
:class="hover ? 'primary--text' : 'black--text'"
single-line
@change="
updateToCart( updateToCart(
product.name, product.name,
product.sku, product.sku,
@ -430,10 +425,10 @@
product.parentSku product.parentSku
) )
" "
v-model="selectedQty[index]" :model-value="selectedQty[index]"
ref="selectedCartQty4" ref="selectedCartQty4"
background-color="transparent" background-color="transparent"
append-icon="mdi-plus" append-inner-icon="mdi-plus"
></v-select> ></v-select>
</v-hover> </v-hover>
</v-col> </v-col>
@ -479,12 +474,16 @@
</div> </div>
</v-row> </v-row>
</v-col> </v-col>
<!-------------------------------------------------------------------------------------> <!------------------------------------------------------------------------------------->
<v-row class="mr-1" v-show="checkOut"> <v-row class="ma-0 pb-4 pt-5" v-show="checkOut">
<v-col align="right"> <v-col align="right">
<a <a
class="fontsize-14 black--text text-uppercase cartproductlist-action-link" class=" fontsize-14
text-black text-uppercase
cartproductlist-action-link
cursor-pointer"
@click.stop=" @click.stop="
remove( remove(
product.name, product.name,
@ -500,10 +499,7 @@
</v-row> </v-row>
</v-row> </v-row>
<v-row> <v-row>
<v-divider <div class="hr-line" v-show="cartProductPage && cartItems.length > 1"></div>
class="primary"
v-show="cartProductPage && cartItems.length > 1"
></v-divider>
</v-row> </v-row>
</v-card> </v-card>
<v-col class="text-center mb-12" v-if="isGateModulePage"> <v-col class="text-center mb-12" v-if="isGateModulePage">
@ -530,11 +526,15 @@
</v-hover> </v-hover>
</v-col> </v-col>
</v-col> </v-col>
<ConfirmationDialog <ConfirmationDialog
:confirmationDialog="confirmationDialogFlag" :key="confirmationDialog"
:confirmationDialog="confirmationDialog"
:confirmationDetails="confirmation" :confirmationDetails="confirmation"
@actionRemove="removeProduct" @actionRemove="removeProduct"
v-if="confirmationDialog"
></ConfirmationDialog> ></ConfirmationDialog>
</div> </div>
</template> </template>
<script> <script>
@ -567,7 +567,7 @@ export default {
quantity: "25", quantity: "25",
savFromKey: "Ub07GxNhS3yyoDfO", savFromKey: "Ub07GxNhS3yyoDfO",
ccId: "766a5cef-6b51-4ab4-9f25-6446c4c8baeb", ccId: "766a5cef-6b51-4ab4-9f25-6446c4c8baeb",
confirmationDialogFlag: false, confirmationDialog: false,
confirmation: { confirmation: {
confirmationMessage: "", confirmationMessage: "",
}, },
@ -750,11 +750,12 @@ export default {
} }
}, },
remove(productName, sku, itemId, parentSku,product) { remove(productName, sku, itemId, parentSku,product) {
this.productDetails=product
console.log(sku, parentSku); this.productDetails = product;
this.productId = itemId; this.productId = itemId;
this.removeProdcutName = productName; this.removeProdcutName = productName;
(this.confirmationDialogFlag = true), (this.confirmationDialog = true),
(this.confirmation = { (this.confirmation = {
confirmationMessage: confirmationMessage:
"Are you sure you would like to remove this item from the shopping cart?", "Are you sure you would like to remove this item from the shopping cart?",
@ -1110,7 +1111,7 @@ export default {
//let token = getAuthUser(); //let token = getAuthUser();
try { try {
if (action.submit) { if (action.submit) {
this.confirmationDialogFlag = false; this.confirmationDialog = false;
if (this.userAuth) { if (this.userAuth) {
try { try {
await this.$store.dispatch("userCartProduct/removeCartProduct", { await this.$store.dispatch("userCartProduct/removeCartProduct", {
@ -1176,7 +1177,7 @@ export default {
timeout: 3000, timeout: 3000,
}; };
} }
this.confirmationDialogFlag = false; this.confirmationDialog = false;
this.removeProdcutName = ""; this.removeProdcutName = "";
this.confirmation = { this.confirmation = {
confirmationMessage: "", confirmationMessage: "",

72
src/components/retailer/retailer-search/RetailerSearchProducts.vue
View File

@ -24,7 +24,6 @@
sm="4" sm="4"
cols="12" cols="12"
class="cursor-pointer" class="cursor-pointer"
> >
<v-img <v-img
:src="imageBasePathUrl + product.i + imageBaseParams" :src="imageBasePathUrl + product.i + imageBaseParams"
@ -36,14 +35,16 @@
<v-col cols="12"> <v-col cols="12">
<h1 <h1
class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break" class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
>{{ product.n }} >
{{ product.n }}
</h1> </h1>
</v-col> </v-col>
<v-col cols="5" class="py-0"> <v-col cols="5" class="py-0">
<h1 <h1
class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break" class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
> >
SKU {{product.sku}}</h1> SKU {{ product.sku }}
</h1>
</v-col> </v-col>
<v-col cols="7" class="py-0"> <v-col cols="7" class="py-0">
<p <p
@ -59,7 +60,10 @@
> >
<span v-if="product.sp"> <span v-if="product.sp">
<s>${{ priceFormatter(product.p) }}</s> &nbsp; <s>${{ priceFormatter(product.p) }}</s> &nbsp;
<span class="red--text mb-0"> ${{ roundUp(product.sp) }}</span> / {{ product.u }} <span class="text-red mb-0">
${{ roundUp(product.sp) }}</span
>
/ {{ product.u }}
</span> </span>
<span v-else-if="product.p != 0"> <span v-else-if="product.p != 0">
<span> <span>
@ -76,14 +80,14 @@
<v-btn <v-btn
:disabled="inProgress" :disabled="inProgress"
block block
x-large size="x-large"
v-bind="props" v-bind="props"
:outlined="!inProgress ? hover:false" :variant="isHovering ? 'outlined' : 'outlined'"
:color="isHovering?'white':'primary'" :class="
:class="isHovering?' text-primary':'text-white'" isHovering ? ' bg-white text-primary' : 'bg-primary'
"
class="text-uppercase ls-0 body productpage-button" class="text-uppercase ls-0 body productpage-button"
tile
depressed
@click="addToCart(product.sku, product.mq)" @click="addToCart(product.sku, product.mq)"
> >
<v-progress-circular <v-progress-circular
@ -104,25 +108,19 @@
</v-col> </v-col>
</v-row> </v-row>
<v-row v-else class="text-center"> <v-row v-else class="text-center">
<v-col <v-col lg="12" md="12" sm="12" cols="12" v-if="inProgress">
lg="12" <v-progress-circular
md="12" :size="20"
sm="12" color="primary"
cols="12" v-if="inProgress"> indeterminate
<v-progress-circular :size="20" color="primary" indeterminate ></v-progress-circular> ></v-progress-circular>
</v-col> </v-col>
<v-col <v-col lg="12" md="12" sm="12" cols="12" v-else>
lg="12"
md="12"
sm="12"
cols="12" v-else>
<v-alert small class="ma-0 pa-0" type="error" text>{{ <v-alert small class="ma-0 pa-0" type="error" text>{{
noProducts noProducts
}}</v-alert> }}</v-alert>
</v-col> </v-col>
</v-row> </v-row>
</div> </div>
</template> </template>
<script> <script>
@ -133,18 +131,17 @@ import { mapState } from "vuex";
export default { export default {
name: "RetailerSearchProducts", name: "RetailerSearchProducts",
components: { components: {},
},
props: [ props: [
"criteria", "criteria",
"searchPageContent", "searchPageContent",
"breadcrumbData", "breadcrumbData",
"categoryPageContent" "categoryPageContent",
], ],
computed: { computed: {
...mapState({ ...mapState({
searchResults: state => state.catalogBrowser.searchResults, searchResults: (state) => state.catalogBrowser.searchResults,
inProgress: state => state.catalogBrowser.inProgress, inProgress: (state) => state.catalogBrowser.inProgress,
}), }),
imageBasePathUrl() { imageBasePathUrl() {
@ -168,8 +165,7 @@ export default {
return this.$store.state.auth.userAuth; return this.$store.state.auth.userAuth;
}, },
}, },
watch: { watch: {},
},
data: () => ({ data: () => ({
priceFormatter: priceFormatter, priceFormatter: priceFormatter,
menu: false, menu: false,
@ -179,7 +175,7 @@ export default {
show: false, show: false,
message: null, message: null,
color: null, color: null,
timeout: 0 timeout: 0,
}, },
}), }),
methods: { methods: {
@ -190,37 +186,36 @@ export default {
async addToCart(sku, qty) { async addToCart(sku, qty) {
if (sku) { if (sku) {
if (this.userAuth) { if (this.userAuth) {
debugger
await this.$store await this.$store
.dispatch("userCartProduct/addToCart", { .dispatch("userCartProduct/addToCart", {
sku: sku, sku: sku,
qty: qty, qty: qty,
ccid: null, ccid: null,
price: null, price: null,
personalizeDetails: null personalizeDetails: null,
}) })
.then(() => { .then(() => {
this.snackbar = { this.snackbar = {
message: "Product Added Successfully", message: "Product Added Successfully",
color: "success", color: "success",
show: true, show: true,
timeout: 2000 timeout: 2000,
}; };
this.$store.dispatch("userCartProduct/cartProductList"); this.$store.dispatch("userCartProduct/cartProductList");
this.$emit("actionClose", this.snackbar); this.$emit("actionClose", this.snackbar);
}) })
.catch((error) => { .catch((error) => {
console.log("error",error) console.log("error", error);
this.snackbar = { this.snackbar = {
message: error.message, message: error.message,
color: "error", color: "error",
show: true, show: true,
timeout: 2000 timeout: 2000,
}; };
this.$emit("actionClose", this.snackbar); this.$emit("actionClose", this.snackbar);
}); });
} }
} else { } else {
this.errorMessage = "Please Select Quantity"; this.errorMessage = "Please Select Quantity";
} }
@ -234,8 +229,7 @@ export default {
}, },
}, },
created() { created() {},
}
}; };
</script> </script>
<style lang="scss" > <style lang="scss" >

4
src/routes/retailer/cart_products.scss
View File

@ -1,3 +1,7 @@
.cart-products-button.v-btn:before{ .cart-products-button.v-btn:before{
background-color: transparent !important; background-color: transparent !important;
} }
.hr-line{
background-color: #2850da;
height: 1px;
}

61
src/routes/retailer/cart_products.vue
View File

@ -36,7 +36,7 @@
> >
</v-text-field> </v-text-field>
</template> </template>
<v-card tile flat v-if="searchData" max-width="750"> <v-card tile flat v-if="searchData" >
<RetailerSearchProducts @actionClose="showSnackBarMessage" /> <RetailerSearchProducts @actionClose="showSnackBarMessage" />
</v-card> </v-card>
<v-card v-else > <v-card v-else >
@ -52,22 +52,7 @@
<v-alert class="alert-box-outline" type="error" text dense <v-alert class="alert-box-outline" type="error" text dense
>You have no items in your shopping cart.</v-alert >You have no items in your shopping cart.</v-alert
> >
<!-- <p>
Click
<span
class="
mr-1
text-decoration-none
fontcolor-black-light
fontsize-16
guest-shipping-address-login
"
>
<span @click="goToShopping()" class="cursor-pointer"
>here</span
> </span
>to continue shopping.
</p>-->
</v-col> </v-col>
</v-row> </v-row>
@ -76,7 +61,7 @@
<v-col cols="12" sm="12" md="8"> <v-col cols="12" sm="12" md="8">
<v-col cols="12"> <v-col cols="12">
<p <p
class="h3 body-font text-uppercase primary--text" class="h3 body-font text-uppercase text-primary"
v-if="!cartProductsProgress" v-if="!cartProductsProgress"
> >
Your Cart ( {{ cartProductsItem.length }} ) Your Cart ( {{ cartProductsItem.length }} )
@ -98,10 +83,10 @@
<v-col cols="12" sm="12" md="4" class="pb-0 mb-0"> <v-col cols="12" sm="12" md="4" class="pb-0 mb-0">
<v-row> <v-row>
<v-col cols="12"> <v-col cols="12">
<p class="pb-0 mb-0 h2 body-font text-uppercase primary--text"> <p class="pb-0 mb-0 h2 body-font text-uppercase text-primary">
Summary Summary
</p> </p>
<v-divider class="primary pb-0 mb-0"></v-divider> <div class="hr-line"></div>
</v-col> </v-col>
</v-row> </v-row>
<v-row v-if="!cartTotalAmtProgress && cartProductTotalAmt"> <v-row v-if="!cartTotalAmtProgress && cartProductTotalAmt">
@ -115,7 +100,7 @@
<v-col cols="12"> <v-col cols="12">
<p class="float-left pb-0 mb-0">Shipping</p> <p class="float-left pb-0 mb-0">Shipping</p>
<p class="float-right pb-0 mb-0"> <p class="float-right pb-0 mb-0">
<!-- ${{ priceFormatter(cartProductTotalAmt.baseShippingAmount) }}-->
TBD TBD
</p> </p>
</v-col> </v-col>
@ -123,35 +108,37 @@
v-if="stockFlag" v-if="stockFlag"
cols="12" cols="12"
align="center" align="center"
class="px-10 my-6"
> >
<v-hover v-slot:default="{ hover }"> <v-hover v-slot:default="{ isHovering, props }">
<v-btn <v-btn
tile size="large"
large rounded="0"
block v-bind="props"
class="d-sm-none d-md-block cart-products-button" class="d-sm-none d-md-block cart-products-button"
:outlined="hover" :variant="isHovering ? 'outlined' : 'outlined'"
:color="hover ? 'white' : 'primary'" :class="
:class="hover ? 'primary--text' : 'white--text'" isHovering ? ' bg-white text-primary' : 'bg-primary'
dark "
depressed block
@click="goToCheckout()" @click="goToCheckout()"
>GO TO CHECKOUT</v-btn >GO TO CHECKOUT</v-btn
> >
</v-hover> </v-hover>
<v-hover v-slot:default="{ hover }"> <v-hover v-slot:default="{ isHovering , props}">
<v-btn <v-btn
tile size="large"
large rounded="0"
v-bind="props"
class=" class="
d-none d-sm-flex d-md-none d-none d-sm-flex d-md-none
px-12 px-12
cart-products-button cart-products-button
" "
:outlined="hover" :variant="isHovering ? 'outlined' : 'outlined'"
:color="hover ? 'white' : 'primary'" :class="
:class="hover ? 'primary--text' : 'white--text'" isHovering ? ' bg-white text-primary' : 'bg-primary'
"
dark dark
depressed depressed
@click="goToCheckout()" @click="goToCheckout()"

22
src/services/user_cart.service.js
View File

@ -5,6 +5,28 @@ const vueAppMagenotApiUrl = import.meta.env.VITE_APP_MAGENTO_API_URL;
const vueAppNodeslsApiUrl = import.meta.env.VITE_APP_NODESLS_API_URL; const vueAppNodeslsApiUrl = import.meta.env.VITE_APP_NODESLS_API_URL;
const retailorId = import.meta.env.VITE_APP_RETAILOR_ID; const retailorId = import.meta.env.VITE_APP_RETAILOR_ID;
export const doPostCartItem = wrapRequest((sku, qty, ccid, price, personalizeDetails,builderId, quoteId) => {
const requestOptions = {
method: 'POST',
headers: {
'Content-type': 'application/json',
'Access-Control-Allow-Origin': '*',
...authHeader()
},
body: JSON.stringify({
"cartItem": {
"quote_id": quoteId,
"sku": sku,
"qty": qty,
},
"ccid": ccid,
"order_total": price,
"personalize_Data": personalizeDetails,
"builder_id": builderId
})
};
return fetch(`${vueAppMagenotApiUrl}/rest/crn_retailer/V1/carts/mine/items`, requestOptions)
});
export const doPostConfiguredCartItem = wrapRequest((itemNumber, quantity, typeId, optionId, optionValue, quoteId) => { export const doPostConfiguredCartItem = wrapRequest((itemNumber, quantity, typeId, optionId, optionValue, quoteId) => {

19
src/stores/retailer/user_cart.one.js
View File

@ -1,4 +1,5 @@
import { import {
doPostCartItem,
doFetchQuote, doFetchQuote,
doFetchCartProducts, doFetchCartProducts,
doFetchTotalAmt, doFetchTotalAmt,
@ -113,6 +114,24 @@ export const userCartProduct = {
}, },
}, },
actions: { actions: {
addToCart: async({ commit, state }, data) => {
try {
let result;
commit('inProgress', true);
if (!state.cartProductDetails.length > 0) {
const userQuote = await doFetchQuote();
localStorage.setItem("cr_userQuoteId", userQuote); //no use
result = await doPostCartItem(data.sku, data.qty, data.ccid, data.price, data.personalizeDetails, data.builderId?data.builderId:null, userQuote);
} else {
result = await doPostCartItem(data.sku, data.qty, data.ccid, data.price, data.personalizeDetails, data.builderId?data.builderId:null, state.cartProductDetails[0].quoteId);
}
commit('inProgress', false);
return result;
} catch (err) {
commit('inProgress', false);
throw err;
}
},
addToConfiguredCart: async({ commit, state }, data) => { addToConfiguredCart: async({ commit, state }, data) => {
try { try {
commit('inProgress', true); commit('inProgress', true);