removed unneeded files
This commit is contained in:
sidharth
parent
7af242454a
commit
e59452ddf3
|
|
@ -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_MAGENTO_API_URL=https://customapi-r5bdena-kkhydudga4ihy.us.magentosite.cloud
|
||||||
VUE_APP_CRANE_URL=/shop
|
VUE_APP_CRANE_URL=/shop
|
||||||
VUE_APP_GATE_URL=/gate
|
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_CC_CONNECTION_URL=https://www.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
|
||||||
VUE_APP_MAINTENANCE_MODE=false
|
VUE_APP_MAINTENANCE_MODE=false
|
||||||
VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
|
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_ASSETS_NODESLS_URL=https://assets-sls.crane.com
|
||||||
VUE_APP_IMAGE_CATEGORY_PARAMS=?height=600&width=600
|
VUE_APP_IMAGE_CATEGORY_PARAMS=?height=600&width=600
|
||||||
VUE_APP_IMAGE_LIB_URL=https://imagelib-api.crane.com
|
VUE_APP_IMAGE_LIB_URL=https://imagelib-api.crane.com
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
VUE_APP_BRAINTREE_AUTH_KEY=sandbox_bn48hmp6_cz6p85sw4dr5tp8h
|
|
||||||
VUE_APP_MAGENTO_API_URL=https://m2-stg.crane.com
|
VUE_APP_MAGENTO_API_URL=https://m2-stg.crane.com
|
||||||
VUE_APP_CRANE_URL=/shop
|
VUE_APP_CRANE_URL=/shop
|
||||||
VUE_APP_GATE_URL=/gate
|
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_CC_CONNECTION_URL=https://www.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
|
||||||
VUE_APP_MAINTENANCE_MODE=false
|
VUE_APP_MAINTENANCE_MODE=false
|
||||||
VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
|
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_IMAGE_CATEGORY_PARAMS=?height=600&width=600
|
||||||
VUE_APP_CRANE_ORDER_URL=https://order.crane.com
|
VUE_APP_CRANE_ORDER_URL=https://order.crane.com
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
VUE_APP_BRAINTREE_AUTH_KEY=sandbox_bn48hmp6_cz6p85sw4dr5tp8h
|
|
||||||
VUE_APP_MAGENTO_API_URL=https://m2-stg.crane.com
|
VUE_APP_MAGENTO_API_URL=https://m2-stg.crane.com
|
||||||
VUE_APP_CRANE_URL=/shop
|
VUE_APP_CRANE_URL=/shop
|
||||||
VUE_APP_GATE_URL=/gate
|
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_CC_CONNECTION_URL=https://www.staging.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
|
||||||
VUE_APP_MAINTENANCE_MODE=false
|
VUE_APP_MAINTENANCE_MODE=false
|
||||||
VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
|
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_IMAGE_CATEGORY_PARAMS=?height=600&width=600
|
||||||
VUE_APP_CRANE_ORDER_URL=https://ordertest.crane.com
|
VUE_APP_CRANE_ORDER_URL=https://ordertest.crane.com
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
NODE_ENV=production
|
NODE_ENV=production
|
||||||
VUE_APP_BRAINTREE_AUTH_KEY=sandbox_bn48hmp6_cz6p85sw4dr5tp8h
|
|
||||||
VUE_APP_MAGENTO_API_URL=https://m2.crane.com
|
VUE_APP_MAGENTO_API_URL=https://m2.crane.com
|
||||||
VUE_APP_CRANE_URL=/shop
|
VUE_APP_CRANE_URL=/shop
|
||||||
VUE_APP_GATE_URL=/gate
|
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_CC_CONNECTION_URL=https://www.staging.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
|
||||||
VUE_APP_MAINTENANCE_MODE=false
|
VUE_APP_MAINTENANCE_MODE=false
|
||||||
VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
|
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_IMAGE_CATEGORY_PARAMS=?height=600&width=600
|
||||||
VUE_APP_CRANE_ORDER_URL=https://ordertest.crane.com
|
VUE_APP_CRANE_ORDER_URL=https://ordertest.crane.com
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
NODE_ENV=production
|
NODE_ENV=production
|
||||||
VUE_APP_BRAINTREE_AUTH_KEY=sandbox_bn48hmp6_cz6p85sw4dr5tp8h
|
|
||||||
VUE_APP_MAGENTO_API_URL=https://m2-stg.crane.com
|
VUE_APP_MAGENTO_API_URL=https://m2-stg.crane.com
|
||||||
VUE_APP_CRANE_URL=/shop
|
VUE_APP_CRANE_URL=/shop
|
||||||
VUE_APP_GATE_URL=/gate
|
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_CC_CONNECTION_URL=https://www.staging.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
|
||||||
VUE_APP_MAINTENANCE_MODE=false
|
VUE_APP_MAINTENANCE_MODE=false
|
||||||
VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
|
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_IMAGE_CATEGORY_PARAMS=?height=600&width=600
|
||||||
VUE_APP_CRANE_ORDER_URL=https://ordertest.crane.com
|
VUE_APP_CRANE_ORDER_URL=https://ordertest.crane.com
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,6 @@
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"braintree-web": "^3.62.1",
|
|
||||||
"core-js": "^3.4.4",
|
"core-js": "^3.4.4",
|
||||||
"fuse.js": "^6.4.2",
|
"fuse.js": "^6.4.2",
|
||||||
"js-base64": "^2.5.1",
|
"js-base64": "^2.5.1",
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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/>
|
|
||||||
|
|
||||||
|
|
@ -1159,16 +1159,13 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
var client = require("braintree-web/client");
|
|
||||||
const baseUrl = process.env.VUE_APP_BASE_URL;
|
const baseUrl = process.env.VUE_APP_BASE_URL;
|
||||||
//const paypalCheckout = require("braintree-web/paypal-checkout");
|
|
||||||
import SnackbarComponent from "@/components/common/SnackbarComponent";
|
import SnackbarComponent from "@/components/common/SnackbarComponent";
|
||||||
import CartProductList from "@/components/retailer/cart-product/CartProductList";
|
import CartProductList from "@/components/retailer/cart-product/CartProductList";
|
||||||
import ShippingAddressFormComponent from "@/components/retailer/address/ShippingAddressFormComponent";
|
import ShippingAddressFormComponent from "@/components/retailer/address/ShippingAddressFormComponent";
|
||||||
import GuestShippingAddressForm from "@/components/retailer/address/GuestShippingAddressForm";
|
import GuestShippingAddressForm from "@/components/retailer/address/GuestShippingAddressForm";
|
||||||
import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent";
|
import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent";
|
||||||
import VerifyAddressComponent from "@/components/retailer/address/VerifyAddressComponent";
|
import VerifyAddressComponent from "@/components/retailer/address/VerifyAddressComponent";
|
||||||
import CardPayment from "@/components/retailer/payment/CardPayment";
|
|
||||||
import { createHelpers } from "vuex-map-fields";
|
import { createHelpers } from "vuex-map-fields";
|
||||||
import { VueTelInput } from "vue-tel-input";
|
import { VueTelInput } from "vue-tel-input";
|
||||||
import {
|
import {
|
||||||
|
|
@ -1181,7 +1178,6 @@ import {
|
||||||
// googleAanalyticsCheckoutAddPaymentInfo,
|
// googleAanalyticsCheckoutAddPaymentInfo,
|
||||||
} from "@/services/util.service";
|
} from "@/services/util.service";
|
||||||
|
|
||||||
const braintreeAuthKey = process.env.VUE_APP_BRAINTREE_AUTH_KEY;
|
|
||||||
const { mapFields } = createHelpers({
|
const { mapFields } = createHelpers({
|
||||||
getterType: "accountOne/getField",
|
getterType: "accountOne/getField",
|
||||||
mutationType: "accountOne/updateField",
|
mutationType: "accountOne/updateField",
|
||||||
|
|
@ -1260,7 +1256,6 @@ export default {
|
||||||
CartProductList,
|
CartProductList,
|
||||||
VerifyAddressComponent,
|
VerifyAddressComponent,
|
||||||
GuestShippingAddressForm,
|
GuestShippingAddressForm,
|
||||||
CardPayment,
|
|
||||||
SnackbarComponent,
|
SnackbarComponent,
|
||||||
VueTelInput
|
VueTelInput
|
||||||
},
|
},
|
||||||
|
|
@ -2113,233 +2108,6 @@ export default {
|
||||||
|
|
||||||
} catch (error) {}
|
} 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() {
|
clearLocalStorageVars() {
|
||||||
localStorage.removeItem(
|
localStorage.removeItem(
|
||||||
"cr_" + this.basicInfo.id + "_userFirstShippAddress"
|
"cr_" + this.basicInfo.id + "_userFirstShippAddress"
|
||||||
|
|
@ -2560,78 +2328,7 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
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() {
|
async created() {
|
||||||
//this.$store.dispatch("accountOne/fetchStates");
|
//this.$store.dispatch("accountOne/fetchStates");
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue