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

Merge branch 'code-cleanup' of git.treelet.net:crane/retailer-vue into beta

This commit is contained in:
sidharth 2022-02-28 10:13:52 +05:30
parent 9e47211cea f1bad5cf21
commit d59fe3c7fc
11 changed files with 9 additions and 652 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.env.custom
View File

@ -1,4 +1,3 @@
VUE_APP_BRAINTREE_AUTH_KEY=sandbox_bn48hmp6_cz6p85sw4dr5tp8h
VUE_APP_MAGENTO_API_URL=https://customapi-r5bdena-kkhydudga4ihy.us.magentosite.cloud
VUE_APP_CRANE_URL=/shop
VUE_APP_GATE_URL=/gate
@ -14,8 +13,6 @@ VUE_APP_HOME_PAGE_URL=https://next.crane.com
VUE_APP_CC_CONNECTION_URL=https://www.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
VUE_APP_MAINTENANCE_MODE=false
VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
VUE_APP_GTAG_ID=GTM-N774RX4
VUE_APP_GA_ID=UA-26415879-3
VUE_APP_ASSETS_NODESLS_URL=https://assets-sls.crane.com
VUE_APP_IMAGE_CATEGORY_PARAMS=?height=600&width=600
VUE_APP_IMAGE_LIB_URL=https://imagelib-api.crane.com

3
.env.daily
View File

@ -1,4 +1,3 @@
VUE_APP_BRAINTREE_AUTH_KEY=sandbox_bn48hmp6_cz6p85sw4dr5tp8h
VUE_APP_MAGENTO_API_URL=https://m2-stg.crane.com
VUE_APP_CRANE_URL=/shop
VUE_APP_GATE_URL=/gate
@ -14,8 +13,6 @@ VUE_APP_HOME_PAGE_URL=https://www-daily.crane.com
VUE_APP_CC_CONNECTION_URL=https://www.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
VUE_APP_MAINTENANCE_MODE=false
VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
VUE_APP_GTAG_ID=GTM-N774RX4
VUE_APP_GA_ID=UA-26415879-3
VUE_APP_IMAGE_CATEGORY_PARAMS=?height=600&width=600
VUE_APP_CRANE_ORDER_URL=https://order.crane.com

3
.env.development
View File

@ -1,4 +1,3 @@
VUE_APP_BRAINTREE_AUTH_KEY=sandbox_bn48hmp6_cz6p85sw4dr5tp8h
VUE_APP_MAGENTO_API_URL=https://m2-stg.crane.com
VUE_APP_CRANE_URL=/shop
VUE_APP_GATE_URL=/gate
@ -14,8 +13,6 @@ VUE_APP_HOME_PAGE_URL=https://www-stg.crane.com
VUE_APP_CC_CONNECTION_URL=https://www.staging.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
VUE_APP_MAINTENANCE_MODE=false
VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
VUE_APP_GTAG_ID=GTM-N774RX4
VUE_APP_GA_ID=UA-26415879-3
VUE_APP_IMAGE_CATEGORY_PARAMS=?height=600&width=600
VUE_APP_CRANE_ORDER_URL=https://ordertest.crane.com

3
.env.production
View File

@ -1,5 +1,4 @@
NODE_ENV=production
VUE_APP_BRAINTREE_AUTH_KEY=sandbox_bn48hmp6_cz6p85sw4dr5tp8h
VUE_APP_MAGENTO_API_URL=https://m2.crane.com
VUE_APP_CRANE_URL=/shop
VUE_APP_GATE_URL=/gate
@ -15,8 +14,6 @@ VUE_APP_HOME_PAGE_URL=https://retailer.crane.com
VUE_APP_CC_CONNECTION_URL=https://www.staging.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
VUE_APP_MAINTENANCE_MODE=false
VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
VUE_APP_GTAG_ID=GTM-N774RX4
VUE_APP_GA_ID=UA-26415879-3
VUE_APP_IMAGE_CATEGORY_PARAMS=?height=600&width=600
VUE_APP_CRANE_ORDER_URL=https://ordertest.crane.com

3
.env.staging
View File

@ -1,5 +1,4 @@
NODE_ENV=production
VUE_APP_BRAINTREE_AUTH_KEY=sandbox_bn48hmp6_cz6p85sw4dr5tp8h
VUE_APP_MAGENTO_API_URL=https://m2-stg.crane.com
VUE_APP_CRANE_URL=/shop
VUE_APP_GATE_URL=/gate
@ -15,8 +14,6 @@ VUE_APP_HOME_PAGE_URL=https://www-stg.crane.com
VUE_APP_CC_CONNECTION_URL=https://www.staging.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
VUE_APP_MAINTENANCE_MODE=false
VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
VUE_APP_GTAG_ID=GTM-N774RX4
VUE_APP_GA_ID=UA-26415879-3
VUE_APP_IMAGE_CATEGORY_PARAMS=?height=600&width=600
VUE_APP_CRANE_ORDER_URL=https://ordertest.crane.com

3
package.json
View File

@ -22,8 +22,7 @@
"deploy:staging": "AWS_PROFILE=crane vue-cli-service s3-deploy --mode staging",
"lint": "vue-cli-service lint"
},
"dependencies": {
"braintree-web": "^3.62.1",
"dependencies": {
"core-js": "^3.4.4",
"fuse.js": "^6.4.2",
"js-base64": "^2.5.1",

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

@ -68,14 +68,7 @@
<v-row>
<v-col class="py-0 ma-0">
<p
class="fontsize-14 black--text float-left cursor-pointer"
@click="
goToProductDetails(
product.customAttributes,
product.name,
product.productType
)
"
class="fontsize-14 black--text float-left"
>
{{ product.name }}
</p>
@ -290,14 +283,7 @@
<v-col cols="12" sm="6" md="5" lg="6">
<v-row>
<p
class="fontsize-14 black--text float-left cursor-pointer"
@click="
goToProductDetails(
product.customAttributes,
product.name,
product.productType
)
"
class="fontsize-14 black--text float-left"
>
{{ product.name }}
</p>

56
src/components/retailer/payment/CardPayment.scss
View File

@ -1,56 +0,0 @@
/* Braintree Hosted Fields styling classes*/
.braintree-hosted-fields-focused {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: thin solid #2850da;
//box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.braintree-hosted-fields-focused.is-invalid {
outline: thin solid #dc3545;
border:0;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.is-invalid~.invalid-feedback, add.is-invalid~.invalid-tooltip, .was-validated add:invalid~.invalid-feedback, .was-validated add:invalid~.invalid-tooltip {
display: block;
}
.invalid-feedback {
display: none;
width: 100%;
margin-top: .25rem;
font-size: 80%;
color: #dc3545;
}
.is-required~.required-feedback {
display: block;
}
.required-feedback {
display: none;
width: 100%;
margin-top: .25rem;
font-size: 80%;
color: #dc3545;
}
.is-invalid.cartpayment-input-field{
border:thin solid #dc3545;
outline: thin solid #dc3545;
height:40px;
}
.is-required.cartpayment-input-field{
border:thin solid #dc3545;
outline: thin solid #dc3545;
height:40px;
}
.cartpayment-input-field{
border:thin solid rgb(48, 47, 47);
height:40px;
}
.cartpayment-input-field.is-invalid{
border:thin solid #dc3545;
height:40px;
}
.cardpayment-card-disabled.v-card--disabled {
opacity : 0.3 !important;
}

254
src/components/retailer/payment/CardPayment.vue
View File

@ -1,254 +0,0 @@
<template>
<form id="cardForm">
<v-col cols="12">
<v-row>
<v-col cols="2" md="1">
<v-card tile flat :disabled="amexCard" class="cardpayment-card-disabled">
<v-img src="@/assets/pmtImage1.png"></v-img>
</v-card>
</v-col>
<v-col cols="2" md="1">
<v-card tile flat :disabled="visaCard" class="cardpayment-card-disabled">
<v-img src="@/assets/pmtImage2.png"></v-img>
</v-card>
</v-col>
<v-col cols="2" md="1">
<v-card tile flat :disabled="masterCard" class="cardpayment-card-disabled">
<v-img src="@/assets/pmtImage3.png"></v-img>
</v-card>
</v-col>
<v-col cols="2" md="1">
<v-card tile flat :disabled="discoverCard" class="cardpayment-card-disabled">
<v-img src="@/assets/pmtImage4.png"></v-img>
</v-card>
</v-col>
</v-row>
</v-col>
<v-col cols="12" sm="6" md="6">
<v-row>
<v-col cols="12">
<label for="cc-number">Credit card number</label>
<div class="v-input cartpayment-input-field" id="cc-number"></div>
<div class="required-feedback">Credit card number is required</div>
<div class="invalid-feedback">Credit card number is invalid</div>
</v-col>
<v-col cols="5" class="py-0">
<label for="cc-month">Expiration Month</label>
<div class="v-input cartpayment-input-field" id="cc-month"></div>
<div class="required-feedback">Expiration month is required</div>
<div class="invalid-feedback">Expiration month is invalid</div>
</v-col>
<v-col cols="1" class="mt-2 mt-sm-0 mt-md-0 mt-lg-0">/</v-col>
<v-col cols="5" class="py-0">
<label for="cc-year">Expiration Year</label>
<div class="v-input cartpayment-input-field mt-sm-0 mt-lg-0 mt-md-0" id="cc-year"></div>
<div class="required-feedback">Expiration year is required</div>
<div class="invalid-feedback">Expiration year is invalid</div>
</v-col>
<v-row class="pl-3 d-flex align-center">
<v-col cols="7" class="pb-0">
<label>Card Verification Number</label>
<div class="v-input cartpayment-input-field" id="cc-cvn"></div>
<div class="required-feedback">Security code is required</div>
<div class="invalid-feedback">Security code is invalid</div>
</v-col>
<v-col cols="2" class="d-flex align-end pb-0">
<v-tooltip v-model="showCVNHelp" right>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon color="grey lighten-1" @click="showCVNHelp = !showCVNHelp">mdi-help</v-icon>
</v-btn>
</template>
<v-img src="@/assets/cvv.png"></v-img>
</v-tooltip>
</v-col>
</v-row>
</v-row>
</v-col>
<v-col cols="12">
<v-btn
depressed
tile
class="float-right text-uppercase"
color="primary"
@click="submitPayment()"
>Place Order</v-btn>
</v-col>
</form>
</template>
<script>
/* eslint-disable */
const client = require("braintree-web/client");
const hostedFields = require("braintree-web/hosted-fields");
const braintreeAuthKey = process.env.VUE_APP_BRAINTREE_AUTH_KEY;
export default {
name: "CardPayment",
components: {},
data: () => ({
masterCard: true,
visaCard: true,
discoverCard: true,
amexCard: true,
paymentMethod: "",
showCVNHelp: false,
saveInAddressBook: false,
showAddressDialog: false,
userNewAddress: false,
expiryMonth: "",
creditCardNumber: "",
creditCardCVN: "",
expiryYear: "",
hostedFieldsInstance: null,
snackbar: {
show: false,
message: null,
color: null,
timeout: 0,
},
}),
computed: {},
methods: {
placeOrder() {},
submitPayment() {
var formIsInvalid = false;
var state = this.hostedFieldsInstance.getState();
Object.keys(state.fields).forEach((field) => {
state.fields[field].container.classList.remove("is-invalid");
state.fields[field].container.classList.remove("is-required");
if (state.fields[field].isEmpty) {
state.fields[field].container.classList.add("is-required");
formIsInvalid = true;
} else if (!state.fields[field].isValid) {
state.fields[field].container.classList.add("is-invalid");
formIsInvalid = true;
}
});
if (formIsInvalid) {
// skip tokenization request if any fields are invalid
return;
}
this.hostedFieldsInstance.tokenize({}, (err, payload) => {
if (err) {
console.error(err);
return;
}
this.$emit("submitCardPayment", payload);
});
},
},
mounted() {
let vm = this;
if (!this.hostedFieldsInstance) {
client.create(
{
authorization: braintreeAuthKey,
},
(err, clientInstance) => {
if (err) {
console.error(err);
return;
}
hostedFields.create(
{
client: clientInstance,
styles: {
input: {
// change input styles to match
// bootstrap styles
"font-size": "1rem",
color: "#495057",
padding: "10px",
},
},
fields: {
number: {
selector: "#cc-number",
placeholder: "1111 1111 1111 1111",
},
expirationMonth: {
selector: "#cc-month",
placeholder: "MM",
},
expirationYear: {
selector: "#cc-year",
placeholder: "YY",
},
cvv: {
selector: "#cc-cvn",
placeholder: "111",
},
},
},
(err, hostedFieldsInstance) => {
if (err) {
console.error(err);
return;
}
vm.hostedFieldsInstance = hostedFieldsInstance;
hostedFieldsInstance.on("empty", (event) => {
let field = event.fields[event.emittedBy];
field.container.classList.remove("is-invalid");
field.container.classList.add("is-required");
});
hostedFieldsInstance.on("notEmpty", (event) => {
let field = event.fields[event.emittedBy];
field.container.classList.remove("is-required");
});
hostedFieldsInstance.on("validityChange", (event) => {
var field = event.fields[event.emittedBy];
field.container.classList.remove("is-valid");
field.container.classList.remove("is-invalid");
field.container.classList.remove("is-required");
if (field.isEmpty) {
field.container.classList.add("is-required");
} else if (field.isValid) {
field.container.classList.add("is-valid");
} else {
field.container.classList.add("is-invalid");
}
});
hostedFieldsInstance.on("cardTypeChange", (event) => {
if (event.cards.length === 1) {
var card = event.cards[0].type;
if (card == "visa") {
this.visaCard = false;
} else if (card == "master-card") {
this.masterCard = false;
} else if (card == "discover") {
this.discoverCard = false;
} else if (card == "american-express") {
this.amexCard = false;
}
} else {
this.visaCard = true;
this.masterCard = true;
this.discoverCard = true;
this.amexCard = true;
}
});
}
);
}
);
}
},
created() {},
};
</script>
<style src="./CardPayment.scss" lang="scss" scoped/>

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

@ -178,8 +178,7 @@ export default {
return with2Decimals;
},
async addToCart(sku,qty) {
if (sku) {
debugger
if (sku) {
if (this.userAuth) {
await this.$store
.dispatch("userCartProduct/addToCart", {
@ -200,9 +199,10 @@ export default {
this.$emit("actionClose", this.snackbar);
})
.catch(() => {
.catch((error) => {
console.log("error",error)
this.snackbar = {
message: 'Unexpected error while communicating with the cloud',
message: error.message,
color: "error",
show: true,
timeout: 2000

307
src/routes/retailer/checkout_page.vue
View File

@ -1159,16 +1159,13 @@
</template>
<script>
/* eslint-disable */
var client = require("braintree-web/client");
const baseUrl = process.env.VUE_APP_BASE_URL;
//const paypalCheckout = require("braintree-web/paypal-checkout");
import SnackbarComponent from "@/components/common/SnackbarComponent";
import CartProductList from "@/components/retailer/cart-product/CartProductList";
import ShippingAddressFormComponent from "@/components/retailer/address/ShippingAddressFormComponent";
import GuestShippingAddressForm from "@/components/retailer/address/GuestShippingAddressForm";
import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent";
import VerifyAddressComponent from "@/components/retailer/address/VerifyAddressComponent";
import CardPayment from "@/components/retailer/payment/CardPayment";
import { createHelpers } from "vuex-map-fields";
import { VueTelInput } from "vue-tel-input";
import {
@ -1181,7 +1178,6 @@ import {
// googleAanalyticsCheckoutAddPaymentInfo,
} from "@/services/util.service";
const braintreeAuthKey = process.env.VUE_APP_BRAINTREE_AUTH_KEY;
const { mapFields } = createHelpers({
getterType: "accountOne/getField",
mutationType: "accountOne/updateField",
@ -1259,8 +1255,7 @@ export default {
BillingAddressComponent,
CartProductList,
VerifyAddressComponent,
GuestShippingAddressForm,
CardPayment,
GuestShippingAddressForm,
SnackbarComponent,
VueTelInput
},
@ -2113,233 +2108,6 @@ export default {
} catch (error) {}
},
async submitCardPayment(payment) {
try {
let vm = this;
this.isPageLoader = true;
if (this.userAuth) {
if (vm.$refs.billingForm) {
let formValid = vm.$refs.billingForm
? vm.$refs.billingForm.$refs.shippingAddressform.validate()
: true;
if (!formValid) {
this.snackbar = {
message: "Please enter all required fields",
color: "error",
show: true,
timeout: 5000,
};
return;
}
}
try {
let res = await this.$store.dispatch("accountOne/setOrder", {
method: this.paymentMethod,
additional_data: { payment_method_nonce: payment.nonce },
});
await this.$store.dispatch("accountOne/setPaymentInProgress", true);
if (res) {
try {
let resp = await this.$store.dispatch(
"meProductOne/fetchOrderProduct",
res
);
if (resp && resp.items) {
/*googleAanalyticsCheckout("checkout_progress", {
items: resp.items,
});
googleAanalyticsCheckout("set_checkout_option", {
checkout_step: 1,
checkout_option: "payment",
});
googleAanalyticsCheckoutAddPaymentInfo(
"add_payment_info",
resp
);
googleAanalyticsPurchase(resp, resp.incrementId);*/
let shippingAddress = [];
let ccid = "";
let webOrderNumber = resp.incrementId;
let magentoOrderNumber = res;
for (let i = 0; resp.items.length > i; i++) {
let obj = resp.items[i];
if (obj.extensionAttributes) {
ccid = obj.extensionAttributes.ccid;
if (ccid) {
shippingAddress =
resp.extensionAttributes.shippingAssignments[0]
.shipping.address;
try {
let response = await this.$store.dispatch(
"accountOne/setCCOrder",
{
orderNumber: ccid,
shippingAddress: shippingAddress,
webOrderNumber: webOrderNumber,
estimatedShipping: this.estimatedShipping,
}
);
} catch (error) {
console.log(error);
}
}
if (obj.extensionAttributes.personalizeDetails) {
await this.placeCraneOrder(
resp,
obj,
webOrderNumber,
magentoOrderNumber
);
}
}
}
}
} catch (error) {
await this.$store.dispatch(
"accountOne/setPaymentInProgress",
false
);
this.isPageLoader = false;
this.snackbar = {
message: error,
color: "error",
show: true,
timeout: 5000,
};
}
}
await this.$store.dispatch(
"accountOne/setPaymentInProgress",
false
);
this.$router.push({
name: "OrderSuccess",
params: { orderNumber: res },
});
} catch (error) {
this.isPageLoader = false;
this.snackbar = {
message: error.message,
color: "error",
show: true,
timeout: 5000,
};
}
} else {
if (vm.$refs.emailForm) {
vm.email = vm.emailId;
let valid = vm.$refs.emailForm.validate();
let formValid = vm.$refs.addressFormGuest
? vm.$refs.addressFormGuest.$refs.guestShippingAddressForm.validate()
: true;
if (!valid || !formValid) {
this.snackbar = {
message: "Please enter all required fields",
color: "error",
show: true,
timeout: 5000,
};
return;
}
}
try {
let res = await this.$store.dispatch("guestInfo/setOrder", {
userEmail: vm.email,
paymentMethod: {
method: this.paymentMethod,
additional_data: { payment_method_nonce: payment.nonce },
},
});
await this.$store.dispatch("guestInfo/setPaymentInProgress", true);
if (res) {
try {
let resp = await this.$store.dispatch(
"meProductOne/fetchOrderProduct",
res
);
if (resp && resp.items) {
/*googleAanalyticsCheckout("checkout_progress", {
items: resp.items,
});
googleAanalyticsCheckout("set_checkout_option", {
checkout_step: 1,
checkout_option: "payment",
});
googleAanalyticsCheckoutAddPaymentInfo(
"add_payment_info",
resp
);
googleAanalyticsPurchase(resp, resp.incrementId);*/
let shippingAddress = [];
let ccid = "";
let webOrderNumber = resp.incrementId;
let magentoOrderNumber = res;
for (let i = 0; resp.items.length > i; i++) {
let obj = resp.items[i];
if (obj.extensionAttributes) {
ccid = obj.extensionAttributes.ccid;
if (ccid) {
shippingAddress =
resp.extensionAttributes.shippingAssignments[0]
.shipping.address;
try {
let response = await this.$store.dispatch(
"accountOne/setCCOrder",
{
orderNumber: ccid,
shippingAddress: shippingAddress,
webOrderNumber: webOrderNumber,
estimatedShipping: this.estimatedShipping,
}
);
} catch (error) {
console.log(error);
}
}
if (obj.extensionAttributes.personalizeDetails) {
await this.placeCraneOrder(
resp,
obj,
webOrderNumber,
magentoOrderNumber
);
}
}
}
}
} catch (error) {
await this.$store.dispatch(
"guestInfo/setPaymentInProgress",
false
);
this.isPageLoader = false;
this.snackbar = {
message: error,
color: "error",
show: true,
timeout: 5000,
};
}
}
await this.$store.dispatch("guestInfo/setPaymentInProgress", false);
this.$router.push({
name: "OrderSuccess",
params: { orderNumber: res },
});
} catch (error) {
this.isPageLoader = false;
this.snackbar = {
message: error.message,
color: "error",
show: true,
timeout: 5000,
};
}
}
} catch (error) {}
},
clearLocalStorageVars() {
localStorage.removeItem(
"cr_" + this.basicInfo.id + "_userFirstShippAddress"
@ -2560,78 +2328,7 @@ export default {
},
},
mounted() {
client.create(
{
authorization: braintreeAuthKey,
},
function (clientErr, clientInstance) {
// Stop if there was a problem creating the client.
// This could happen if there is a network error or if the authorization
// is invalid.
if (clientErr) {
console.error("Error creating client:", clientErr);
return;
}
// Create a PayPal Checkout component.
/* paypalCheckout.create(
{
client: clientInstance,
},
function (paypalCheckoutErr, paypalCheckoutInstance) {
// Stop if there was a problem creating PayPal Checkout.
// This could happen if there was a network error or if it's incorrectly
// configured.
if (paypalCheckoutErr) {
console.error(
"Error creating PayPal Checkout:",
paypalCheckoutErr
);
return;
}
// Set up PayPal with the checkout.js library
paypal.Button.render(
{
env: "production", // or 'sandbox'
payment: function () {
return paypalCheckoutInstance.createPayment({
// Your PayPal options here. For available options, see
// http://braintree.github.io/braintree-web/current/PayPalCheckout.html#createPayment
});
},
onAuthorize: function (data, actions) {
return paypalCheckoutInstance.tokenizePayment(data, function (
err,
payload
) {
// Submit `payload.nonce` to your server.
});
},
onCancel: function (data) {
console.log(
"checkout.js payment cancelled",
JSON.stringify(data, 0, 2)
);
},
onError: function (err) {
console.error("checkout.js error", err);
},
},
"#paypal-button"
).then(function () {
// The PayPal button will be rendered in an html element with the id
// `paypal-button`. This function will be called when the PayPal button
// is set up and ready to be used.
});
}
);*/
}
);
},
async created() {
//this.$store.dispatch("accountOne/fetchStates");