Vue

export default {
        data: () => ({
            isShowing: false,
            confirmButtonIsDisabled: false,
            moment: moment,
            date: [],
            time: [],
            dateTime: [],
            dateValue: "",
            harper_cart_id: "",
            timeValue: "",
            first_name: "",
            last_name: "",
            contact_number: "",
            email: "",
            addressArr: [],
            address: "",
            address1: "",
            address2: "",
            notes: "",
            city: "",
            country: "",
            county: "",
            postcode: "",
            telephone_number: "",
            selection_html: "",
            cartDetails: [],
            totalPrice: 0,
            isActive: true,
            return_url: "",
            cart_id: "",
            customer_id: "",
            api_url:
            "http://localhost:10010/api/",
            changeAddress: function () {
                if (this.address) {
                    this.address = "";
                }
                if (this.address2) {
                    this.addressArr.push(this.address2);
                }
                if (this.address1) {
                    this.addressArr.push(this.address1);
                }
                if (this.city) {
                    this.addressArr.push(this.city);
                }
                if (this.county) {
                    this.addressArr.push(this.county);
                }
                if (this.country) {
                    this.addressArr.push(this.country);
                }
                if (this.postcode) {
                    this.addressArr.push(this.postcode);
                }
                if (this.telephone_number) {
                    this.addressArr.push(this.telephone_number);
                }
                this.address = this.addressArr.join(", ");
                this.addressArr = [];
            },

            checkPostcode: function (postcopde) {
                console.log(postcopde);
            },

            valid: false,
            form_valid: true,

            // Date & Time Validation
            dateRules: [v => !!v || "Please choose a date"],
            timeRules: [v => !!v || "Please select a time"],

            // Customer Information Validation
            emailRules: [
                v => !!v || "E-mail is required",
                v => /.+@.+/.test(v) || "E-mail must be valid"
            ],
            firstNameRules: [v => !!v || "Please enter your first name"],
            lastNameRules: [v => !!v || "Please enter your last name"],
            contactNumberRules: [
                v => !!v || "Please enter your mobile number",
                v => /^(((\+?44\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((\+?44\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((\+?44\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?$/.test(v) || "Contact number not valid"
            ],

            // Shipping Address Validation
            address1Rules: [v => !!v || "Please enter your address"],
            cityRules: [v => !!v || "Please enter your city"],
            countryRules: [v => !!v || "Please enter your country"],
            countyRules: [v => !!v || "Please enter your city"],
            // postcodeRules: [v => !!v || "Please enter your postcode"]
            postcodeRules: [
                v => !!v || "Please enter your postcode",
                v => this.checkPostcode(v) || "Postcode not serviced."
            ]
        }),
        components: {
            VueGoogleAutocomplete
        },
        methods: {
            getAddressData(addressData) {
                // Manual Address
                ...
            },
            submit() {
                if (this.$refs.form.validate()) {
                    this.confirmButtonIsDisabled = true;
                    let selectedDate = moment(
                        this.dateValue + " " + this.timeValue,
                        "dddd, MMMM Do, YYYY hh:mm A"
                    ).format();

                    let orderApiUrl = this.api_url + "orders";

                    let orderData = {
                        ...
                        appointment: {
                            date: selectedDate
                        },
                        customer: {
                            ...
                            }
                        },
                        items: this.cartDetails
                    };

                    this.$http
                        .post(orderApiUrl, orderData, {
                            headers: {
                                Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ3YWduZXJAaGFycGVyY29uY2llcmdlLmNvbSIsImlzcyI6Im15LWF3ZXNvbWUtd2Vic2l0ZS5jb20iLCJyb2xlIjoiYWRtaW4iLCJpYXQiOjE1NTQ4Mjg1ODJ9.8FiYSMQE0y24cGXyXpLnL99Kl1VHG2TKCT4kTQTnpr0`
                            }
                        })
                        .then(response => {
                            localStorage.setItem(
                                "confirmation",
                                JSON.stringify(response.data)
                            );
                            this.$router.push({
                                name: "Confirmation"
                            });
                        })
                        .catch(function (error) {
                            this.confirmButtonIsDisabled = false;
                            return error;
                        });
                } else {
                    this.confirmButtonIsDisabled = false;
                    this.form_valid = false;
                }
            },
            myFilter() {
                this.confirmButtonIsDisabled = false;
                this.isActive = !this.isActive;
            },
            onChange(event) {
                this.confirmButtonIsDisabled = false;
                this.time = this.dateTime[event];
            }
        },
        mounted() {
            this.harper_cart_id = this.$route.query.c || "";
            let cartDetailApiUrl = this.api_url + "carts/" + this.harper_cart_id;
            let AvailabilityApiUrl = this.api_url + "availability?";
            let tokenStr = '';
            this.$http
                .get(AvailabilityApiUrl, {
                    headers: {Authorization: `Bearer ${tokenStr}`}
                })
                .then(response => {
                    ...
                })
                .catch(response => {
                    return response;
                });

            // CartDetail API
            this.$http
                .get(cartDetailApiUrl, {
                    headers: {Authorization: `Bearer ${tokenStr}`}
                })
                .then(response => {
                    // Customer Details
                    let result = response.data.data.cart;

                    this.return_url = result.return_url;
                    this.cart_id = result.cart_id;

                    if (result.checked_postcode) {
                        this.postcode = result.checked_postcode;
                    }

                    if (result.customer) {
                        ...
                    }

                    this.cartDetails = result.items;

                    for (var n in this.cartDetails) {
                        this.totalPrice +=
                            parseFloat(this.cartDetails[n].price) *
                            parseInt(this.cartDetails[n].qty);
                    }
                })
                .catch(response => {
                    this.$router.push({
                        name: "404",
                        params: {
                            redirect: this.return_url
                        }
                    });
                    return response;
                });
        }
    };