From dfc05cd6b2ebeca316dcad0b48a6162a1b8a055a Mon Sep 17 00:00:00 2001
From: rakesh <inaniyar7@gmail.com>
Date: Mon, 15 May 2023 18:22:02 +0530
Subject: [PATCH] fixes ui
---
src/components/common/ConfirmationDialog.vue | 30 +-
.../retailer/cart-product/CartProductList.vue | 149 ++++-----
.../RetailerSearchProducts.vue | 308 +++++++++---------
src/routes/retailer/cart_products.scss | 4 +
src/routes/retailer/cart_products.vue | 61 ++--
src/services/user_cart.service.js | 24 +-
src/stores/retailer/user_cart.one.js | 19 ++
7 files changed, 312 insertions(+), 283 deletions(-)
diff --git a/src/components/common/ConfirmationDialog.vue b/src/components/common/ConfirmationDialog.vue
index fd78025..29c5101 100644
--- a/src/components/common/ConfirmationDialog.vue
+++ b/src/components/common/ConfirmationDialog.vue
@@ -26,27 +26,29 @@
<v-card-actions class="px-4">
<v-row no-gutters>
<v-col cols="12">
- <v-hover v-slot:default="{ hover }">
+ <v-hover v-slot:default="{ isHovering , props}">
<v-btn
class="text-uppercase body-font ma-2 button-background"
- tile
- large
- depressed
- :outlined="hover"
- :color="hover?'white':'primary'"
- :class="hover?'primary--text':'white--text'"
+ v-bind="props"
+ size="large"
+ rounded="0"
@click="onAction(false)"
+ :variant="isHovering ? 'outlined' : 'outlined'"
+ :class="
+ isHovering ? ' bg-white text-error' : 'bg-error'
+ "
>CANCEL</v-btn>
</v-hover>
- <v-hover v-slot:default="{ hover }">
+ <v-hover v-slot:default="{ isHovering , props }">
<v-btn
class="text-uppercase body-font ma-2 button-background"
- :outlined="hover"
- :color="hover?'white':'error'"
- :class="hover?'error--text':'white--text'"
- tile
- large
- depressed
+ :variant="isHovering ? 'outlined' : 'outlined'"
+ :class="
+ isHovering ? ' bg-white text-primary' : 'bg-primary'
+ "
+ v-bind="props"
+ size="large"
+ rounded="0"
@click="onAction(true)"
>OK</v-btn>
</v-hover>
diff --git a/src/components/retailer/cart-product/CartProductList.vue b/src/components/retailer/cart-product/CartProductList.vue
index 8f99b0c..35f7559 100644
--- a/src/components/retailer/cart-product/CartProductList.vue
+++ b/src/components/retailer/cart-product/CartProductList.vue
@@ -4,6 +4,7 @@
<v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
</v-col>-->
<v-col v-if="cartItems">
+
<v-card
elevation="0"
class="mb-4"
@@ -279,18 +280,23 @@
</v-col>
<!---------------------------cart page--------------------------------------------->
<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-row>
<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>
</v-row>
<v-row>
<p
- class="fontsize-14 text-uppercase"
+ class="fontsize-14 mb-6 text-uppercase"
v-show="cartProductPage"
>
Sku {{ product.sku }}
@@ -298,7 +304,7 @@
</v-row>
<v-row>
<p
- class="fontsize-14 text-uppercase"
+ class=" fontsize-14 mb-6 text-uppercase"
v-show="cartProductPage"
>
UPC {{ product.customAttributes.upc }}
@@ -322,26 +328,29 @@
<p class="fontsize-14 mb-0 pb-10">Qty.</p>
</v-col>
<v-col class="pl-0 pt-0">
- <v-hover v-slot:default="{ hover }">
- <v-select
- :items="
+ <v-hover v-slot="{ isHovering, props }">
+ <v-select
+ :items="
qtyPriceOptions(
product.customAttributes.qtyPrice,
product.qty,
index
)
"
- class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 cartproductlist-select-button select-change-icon"
- dense
+ class="fontsize-16
+ line-height-21
+ ls-n009
+ font-weight-400
+ cartproductlist-select-button
+ "
+
+ variant="outlined"
+ density="compact"
+ v-bind="props"
attach
- flat
- solo
- outlined
- :class="hover ? 'primary--text' : 'black--text'"
- item-text="price"
- item-value="qty"
- single-line
- @change="
+ :class="isHovering ? 'text-primary' : 'text-black'"
+ v-model="selectedQty[index]"
+ @update:modelValue="
updateToCart(
product.name,
product.sku,
@@ -358,26 +367,14 @@
product.parentSku
)
"
- v-model="selectedQty[index]"
- ref="selectedCartQty3"
+ :model-value="selectedQty[index]"
+ ref="selectedCartQty4"
background-color="transparent"
- append-icon="mdi-plus"
- >
- <template v-slot:selection="data">
- <span class="pl-1 fontsize-14">{{
- data.item.qty
- }}</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>
+ append-inner-icon="mdi-plus"
+ item-value="qty"
+ item-title="qty"
+ item-children="qty"
+ ></v-select>
</v-hover>
</v-col>
</v-row>
@@ -386,16 +383,8 @@
<p class="fontsize-14 mb-0 pb-10">Qty.</p>
</v-col>
<v-col class="pl-0 pt-0">
- <!--<v-select
- class="fontsize-14 title-color-black cartproductlist-select-button"
- :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-hover v-slot:default="{ isHovering, props }">
<v-select
:items="
numberOptions(
@@ -405,15 +394,21 @@
index
)
"
- class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 cartproductlist-select-button select-change-icon"
- dense
+ class="
+ fontsize-16
+ line-height-21
+ ls-n009
+ font-weight-400
+ cartproductlist-select-button
+ "
+
+ variant="outlined"
+ density="compact"
+ v-bind="props"
attach
- flat
- solo
- outlined
- :class="hover ? 'primary--text' : 'black--text'"
- single-line
- @change="
+ :class="isHovering ? 'text-primary' : 'text-black'"
+ v-model="selectedQty[index]"
+ @update:modelValue="
updateToCart(
product.name,
product.sku,
@@ -427,13 +422,13 @@
product.customAttributes.isPersonalize,
product.customAttributes.builderVersion,
product.ccid,
- product.parentSku
+ product.parentSku
)
"
- v-model="selectedQty[index]"
+ :model-value="selectedQty[index]"
ref="selectedCartQty4"
background-color="transparent"
- append-icon="mdi-plus"
+ append-inner-icon="mdi-plus"
></v-select>
</v-hover>
</v-col>
@@ -479,13 +474,17 @@
</div>
</v-row>
</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">
<a
- class="fontsize-14 black--text text-uppercase cartproductlist-action-link"
- @click.stop="
+ class=" fontsize-14
+ text-black text-uppercase
+ cartproductlist-action-link
+ cursor-pointer"
+ @click.stop="
remove(
product.name,
product.sku,
@@ -500,10 +499,7 @@
</v-row>
</v-row>
<v-row>
- <v-divider
- class="primary"
- v-show="cartProductPage && cartItems.length > 1"
- ></v-divider>
+ <div class="hr-line" v-show="cartProductPage && cartItems.length > 1"></div>
</v-row>
</v-card>
<v-col class="text-center mb-12" v-if="isGateModulePage">
@@ -530,11 +526,15 @@
</v-hover>
</v-col>
</v-col>
- <ConfirmationDialog
- :confirmationDialog="confirmationDialogFlag"
+
+ <ConfirmationDialog
+ :key="confirmationDialog"
+ :confirmationDialog="confirmationDialog"
:confirmationDetails="confirmation"
- @actionRemove="removeProduct"
+ @actionRemove="removeProduct"
+ v-if="confirmationDialog"
></ConfirmationDialog>
+
</div>
</template>
<script>
@@ -567,7 +567,7 @@ export default {
quantity: "25",
savFromKey: "Ub07GxNhS3yyoDfO",
ccId: "766a5cef-6b51-4ab4-9f25-6446c4c8baeb",
- confirmationDialogFlag: false,
+ confirmationDialog: false,
confirmation: {
confirmationMessage: "",
},
@@ -750,11 +750,12 @@ export default {
}
},
remove(productName, sku, itemId, parentSku,product) {
- this.productDetails=product
- console.log(sku, parentSku);
+
+ this.productDetails = product;
+
this.productId = itemId;
this.removeProdcutName = productName;
- (this.confirmationDialogFlag = true),
+ (this.confirmationDialog = true),
(this.confirmation = {
confirmationMessage:
"Are you sure you would like to remove this item from the shopping cart?",
@@ -1110,7 +1111,7 @@ export default {
//let token = getAuthUser();
try {
if (action.submit) {
- this.confirmationDialogFlag = false;
+ this.confirmationDialog = false;
if (this.userAuth) {
try {
await this.$store.dispatch("userCartProduct/removeCartProduct", {
@@ -1176,7 +1177,7 @@ export default {
timeout: 3000,
};
}
- this.confirmationDialogFlag = false;
+ this.confirmationDialog = false;
this.removeProdcutName = "";
this.confirmation = {
confirmationMessage: "",
diff --git a/src/components/retailer/retailer-search/RetailerSearchProducts.vue b/src/components/retailer/retailer-search/RetailerSearchProducts.vue
index 25e5a7f..f3db142 100644
--- a/src/components/retailer/retailer-search/RetailerSearchProducts.vue
+++ b/src/components/retailer/retailer-search/RetailerSearchProducts.vue
@@ -1,226 +1,221 @@
-<template>
-<div>
- <v-row v-if="searchResults.page.length && !inProgress" class="mx-4">
- <v-col cols="12" lg="12" md="12" sm="12" >
- <v-row v-if="inProgress">
- <v-col
- v-for="(i, index) in 9"
- v-bind:key="index"
- lg="4"
- md="4"
- sm="4"
- cols="12"
- class=" cursor-pointer"
- >
- <v-skeleton-loader type="card"></v-skeleton-loader>
- </v-col>
- </v-row>
- <v-row v-if="searchResults.page.length > 0">
- <v-col
- v-for="(product, index) in searchResults.page"
- v-bind:key="index"
- lg="4"
- md="4"
- sm="4"
- cols="12"
- class=" cursor-pointer "
-
- >
- <v-img
- :src="imageBasePathUrl + product.i + imageBaseParams"
- width="100%"
- :alt="product.n"
- :title="product.n"
- ></v-img>
- <v-row >
- <v-col cols="12" >
- <h1
- class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
- >{{ product.n }}
+<template>
+ <div>
+ <v-row v-if="searchResults.page.length && !inProgress" class="mx-4">
+ <v-col cols="12" lg="12" md="12" sm="12">
+ <v-row v-if="inProgress">
+ <v-col
+ v-for="(i, index) in 9"
+ v-bind:key="index"
+ lg="4"
+ md="4"
+ sm="4"
+ cols="12"
+ class="cursor-pointer"
+ >
+ <v-skeleton-loader type="card"></v-skeleton-loader>
+ </v-col>
+ </v-row>
+ <v-row v-if="searchResults.page.length > 0">
+ <v-col
+ v-for="(product, index) in searchResults.page"
+ v-bind:key="index"
+ lg="4"
+ md="4"
+ sm="4"
+ cols="12"
+ class="cursor-pointer"
+ >
+ <v-img
+ :src="imageBasePathUrl + product.i + imageBaseParams"
+ width="100%"
+ :alt="product.n"
+ :title="product.n"
+ ></v-img>
+ <v-row>
+ <v-col cols="12">
+ <h1
+ class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
+ >
+ {{ product.n }}
</h1>
- </v-col>
- <v-col cols="5" class="py-0">
- <h1
- class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
- >
- SKU {{product.sku}}</h1>
- </v-col>
- <v-col cols="7" class="py-0">
- <p
- v-if="product.lp"
- class="float-right fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300"
- >
- From ${{ product.lp }}
- {{ product.u }}
- </p>
- <div
- v-else
- class="float-right fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300"
- >
- <span v-if="product.sp">
- <s>${{priceFormatter(product.p)}}</s>
- <span class="red--text mb-0"> ${{ roundUp(product.sp) }}</span> / {{ product.u }}
+ </v-col>
+ <v-col cols="5" class="py-0">
+ <h1
+ class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
+ >
+ SKU {{ product.sku }}
+ </h1>
+ </v-col>
+ <v-col cols="7" class="py-0">
+ <p
+ v-if="product.lp"
+ class="float-right fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300"
+ >
+ From ${{ product.lp }}
+ {{ product.u }}
+ </p>
+ <div
+ v-else
+ class="float-right fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300"
+ >
+ <span v-if="product.sp">
+ <s>${{ priceFormatter(product.p) }}</s>
+ <span class="text-red mb-0">
+ ${{ roundUp(product.sp) }}</span
+ >
+ / {{ product.u }}
+ </span>
+ <span v-else-if="product.p != 0">
+ <span>
+ ${{ priceFormatter(product.p) }} / {{ product.u }}
</span>
- <span v-else-if="product.p != 0">
- <span>
- ${{priceFormatter(product.p ) }} / {{ product.u }}
- </span>
- </span>
- <span v-else>
- <p>TBD</p>
- </span>
- </div>
- </v-col>
- <v-col cols="12" class="float-right" >
+ </span>
+ <span v-else>
+ <p>TBD</p>
+ </span>
+ </div>
+ </v-col>
+ <v-col cols="12" class="float-right">
<v-hover v-slot:default="{ isHovering, props }">
- <v-btn
- :disabled="inProgress"
- block
- x-large
- v-bind="props"
- :outlined="!inProgress ? hover:false"
- :color="isHovering?'white':'primary'"
- :class="isHovering?' text-primary':'text-white'"
- class="text-uppercase ls-0 body productpage-button"
- tile
- depressed
- @click="addToCart(product.sku,product.mq)"
- >
- <v-progress-circular
- align="center"
- :size="40"
- block
- color="primary"
- indeterminate
- v-if="inProgress"
- ></v-progress-circular>
- <span v-if="!inProgress">ADD TO CART</span>
- </v-btn>
- </v-hover>
- </v-col>
- </v-row>
- </v-col>
- </v-row>
- </v-col>
- </v-row>
- <v-row v-else class="text-center">
- <v-col
- lg="12"
- md="12"
- sm="12"
- cols="12" v-if="inProgress">
- <v-progress-circular :size="20" color="primary" indeterminate ></v-progress-circular>
- </v-col>
- <v-col
- lg="12"
- md="12"
- sm="12"
- cols="12" v-else>
-
- <v-alert small class="ma-0 pa-0" type="error" text >{{
- noProducts
- }}</v-alert>
- </v-col>
- </v-row>
-
- </div>
+ <v-btn
+ :disabled="inProgress"
+ block
+ size="x-large"
+ v-bind="props"
+ :variant="isHovering ? 'outlined' : 'outlined'"
+ :class="
+ isHovering ? ' bg-white text-primary' : 'bg-primary'
+ "
+ class="text-uppercase ls-0 body productpage-button"
+
+ @click="addToCart(product.sku, product.mq)"
+ >
+ <v-progress-circular
+ align="center"
+ :size="40"
+ block
+ color="primary"
+ indeterminate
+ v-if="inProgress"
+ ></v-progress-circular>
+ <span v-if="!inProgress">ADD TO CART</span>
+ </v-btn>
+ </v-hover>
+ </v-col>
+ </v-row>
+ </v-col>
+ </v-row>
+ </v-col>
+ </v-row>
+ <v-row v-else class="text-center">
+ <v-col lg="12" md="12" sm="12" cols="12" v-if="inProgress">
+ <v-progress-circular
+ :size="20"
+ color="primary"
+ indeterminate
+ ></v-progress-circular>
+ </v-col>
+ <v-col lg="12" md="12" sm="12" cols="12" v-else>
+ <v-alert small class="ma-0 pa-0" type="error" text>{{
+ noProducts
+ }}</v-alert>
+ </v-col>
+ </v-row>
+ </div>
</template>
<script>
/* eslint-disable no-alert, no-console , no-debugger */
//import * as easings from "vuetify/es5/services/goto/easing-patterns";
import { mapState } from "vuex";
- import { priceFormatter } from "@/services/util.service";
+import { priceFormatter } from "@/services/util.service";
export default {
name: "RetailerSearchProducts",
- components: {
- },
+ components: {},
props: [
"criteria",
"searchPageContent",
"breadcrumbData",
- "categoryPageContent"
+ "categoryPageContent",
],
computed: {
...mapState({
- searchResults: state => state.catalogBrowser.searchResults,
- inProgress: state => state.catalogBrowser.inProgress,
+ searchResults: (state) => state.catalogBrowser.searchResults,
+ inProgress: (state) => state.catalogBrowser.inProgress,
}),
-
+
imageBasePathUrl() {
return import.meta.env.VITE_APP_IMAGE_PATH_URL;
},
imageBaseParams() {
return import.meta.env.VITE_APP_IMAGE_CATEGORY_PARAMS;
},
- isIpadOrMobile: function() {
+ isIpadOrMobile: function () {
return this.$vuetify.display.mdAndDown ? true : false;
},
- isIpad: function() {
+ isIpad: function () {
return this.$vuetify.display.smOnly || this.$vuetify.display.mdOnly
? true
: false;
},
- isMobile: function() {
+ isMobile: function () {
return this.$vuetify.display.xs ? true : false;
},
- userAuth: function() {
+ userAuth: function () {
return this.$store.state.auth.userAuth;
},
},
- watch: {
- },
+ watch: {},
data: () => ({
- priceFormatter: priceFormatter,
- menu: false,
+ priceFormatter: priceFormatter,
+ menu: false,
showDrawarFilter: false,
noProducts: "No products found.",
- snackbar: {
+ snackbar: {
show: false,
message: null,
color: null,
- timeout: 0
+ timeout: 0,
},
}),
methods: {
- roundUp(num) {
+ roundUp(num) {
var with2Decimals = num.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0];
return with2Decimals;
},
- async addToCart(sku,qty) {
- if (sku) {
+ async addToCart(sku, qty) {
+ if (sku) {
if (this.userAuth) {
- await this.$store
+ debugger
+ await this.$store
.dispatch("userCartProduct/addToCart", {
sku: sku,
- qty:qty,
+ qty: qty,
ccid: null,
price: null,
- personalizeDetails: null
+ personalizeDetails: null,
})
- .then(() => {
- this.snackbar = {
+ .then(() => {
+ this.snackbar = {
message: "Product Added Successfully",
color: "success",
show: true,
- timeout: 2000
+ timeout: 2000,
};
this.$store.dispatch("userCartProduct/cartProductList");
this.$emit("actionClose", this.snackbar);
-
})
- .catch((error) => {
- console.log("error",error)
+ .catch((error) => {
+ console.log("error", error);
this.snackbar = {
message: error.message,
color: "error",
show: true,
- timeout: 2000
+ timeout: 2000,
};
- this.$emit("actionClose", this.snackbar);
+ this.$emit("actionClose", this.snackbar);
});
}
-
} else {
this.errorMessage = "Please Select Quantity";
}
@@ -234,8 +229,7 @@ export default {
},
},
- created() {
- }
+ created() {},
};
</script>
<style lang="scss" >
diff --git a/src/routes/retailer/cart_products.scss b/src/routes/retailer/cart_products.scss
index 6413e5f..88e705e 100644
--- a/src/routes/retailer/cart_products.scss
+++ b/src/routes/retailer/cart_products.scss
@@ -1,3 +1,7 @@
.cart-products-button.v-btn:before{
background-color: transparent !important;
+}
+.hr-line{
+ background-color: #2850da;
+ height: 1px;
}
\ No newline at end of file
diff --git a/src/routes/retailer/cart_products.vue b/src/routes/retailer/cart_products.vue
index 36f6e39..1dc630d 100644
--- a/src/routes/retailer/cart_products.vue
+++ b/src/routes/retailer/cart_products.vue
@@ -36,7 +36,7 @@
>
</v-text-field>
</template>
- <v-card tile flat v-if="searchData" max-width="750">
+ <v-card tile flat v-if="searchData" >
<RetailerSearchProducts @actionClose="showSnackBarMessage" />
</v-card>
<v-card v-else >
@@ -52,22 +52,7 @@
<v-alert class="alert-box-outline" type="error" text dense
>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-row>
@@ -76,7 +61,7 @@
<v-col cols="12" sm="12" md="8">
<v-col cols="12">
<p
- class="h3 body-font text-uppercase primary--text"
+ class="h3 body-font text-uppercase text-primary"
v-if="!cartProductsProgress"
>
Your Cart ( {{ cartProductsItem.length }} )
@@ -98,10 +83,10 @@
<v-col cols="12" sm="12" md="4" class="pb-0 mb-0">
<v-row>
<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
</p>
- <v-divider class="primary pb-0 mb-0"></v-divider>
+ <div class="hr-line"></div>
</v-col>
</v-row>
<v-row v-if="!cartTotalAmtProgress && cartProductTotalAmt">
@@ -115,7 +100,7 @@
<v-col cols="12">
<p class="float-left pb-0 mb-0">Shipping</p>
<p class="float-right pb-0 mb-0">
- <!-- ${{ priceFormatter(cartProductTotalAmt.baseShippingAmount) }}-->
+
TBD
</p>
</v-col>
@@ -123,35 +108,37 @@
v-if="stockFlag"
cols="12"
align="center"
- class="px-10 my-6"
+
>
- <v-hover v-slot:default="{ hover }">
+ <v-hover v-slot:default="{ isHovering, props }">
<v-btn
- tile
- large
+ size="large"
+ rounded="0"
+ v-bind="props"
+ class="d-sm-none d-md-block cart-products-button"
+ :variant="isHovering ? 'outlined' : 'outlined'"
+ :class="
+ isHovering ? ' bg-white text-primary' : 'bg-primary'
+ "
block
- class="d-sm-none d-md-block cart-products-button"
- :outlined="hover"
- :color="hover ? 'white' : 'primary'"
- :class="hover ? 'primary--text' : 'white--text'"
- dark
- depressed
@click="goToCheckout()"
>GO TO CHECKOUT</v-btn
>
</v-hover>
- <v-hover v-slot:default="{ hover }">
+ <v-hover v-slot:default="{ isHovering , props}">
<v-btn
- tile
- large
+ size="large"
+ rounded="0"
+ v-bind="props"
class="
d-none d-sm-flex d-md-none
px-12
cart-products-button
"
- :outlined="hover"
- :color="hover ? 'white' : 'primary'"
- :class="hover ? 'primary--text' : 'white--text'"
+ :variant="isHovering ? 'outlined' : 'outlined'"
+ :class="
+ isHovering ? ' bg-white text-primary' : 'bg-primary'
+ "
dark
depressed
@click="goToCheckout()"
diff --git a/src/services/user_cart.service.js b/src/services/user_cart.service.js
index af2b8a3..088de39 100644
--- a/src/services/user_cart.service.js
+++ b/src/services/user_cart.service.js
@@ -4,7 +4,29 @@ import { wrapRequest } from './nav';
const vueAppMagenotApiUrl = import.meta.env.VITE_APP_MAGENTO_API_URL;
const vueAppNodeslsApiUrl = import.meta.env.VITE_APP_NODESLS_API_URL;
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) => {
diff --git a/src/stores/retailer/user_cart.one.js b/src/stores/retailer/user_cart.one.js
index 5e2027f..a32fd87 100644
--- a/src/stores/retailer/user_cart.one.js
+++ b/src/stores/retailer/user_cart.one.js
@@ -1,4 +1,5 @@
import {
+ doPostCartItem,
doFetchQuote,
doFetchCartProducts,
doFetchTotalAmt,
@@ -113,6 +114,24 @@ export const userCartProduct = {
},
},
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) => {
try {
commit('inProgress', true);