From e24e8198cb2c52002eb58dc99725e9845f160958 Mon Sep 17 00:00:00 2001
From: "bogdanovpd@gmail.com" <BogdanovPD>
Date: Wed, 22 Jul 2020 14:37:57 +0300
Subject: [PATCH] order process improved

---
 CHANGELOG.md                                |   1 +
 package.json                                |   2 +-
 src/components/order_page/CustomStepper.vue |  28 +-
 src/components/order_page/OrderPage.vue     | 402 ++++++++++++--------
 src/validators.js                           |   5 +
 5 files changed, 276 insertions(+), 162 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a1e92f1..26b189d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,3 +18,4 @@
  - 05.2020 - В футере добавить форму для ввода email и кнопку. Необходимо добавить валидацию email. Пока пусть отправляет данные на https://vuemmerce.herokuapp.com/api/new-subscription и всегда показывает всплывающее окно об успешной подписке. by @Vshinf
  - 05.2020 - Добавлена форма для фильтрации товаров (цена и произоводитель) by @iskangiz
  - 05.2020 - Добавить форму обратной связи by @Dalion
+ - 07.2020 - Добавлен ввоод почты/телефона при создании заказа неавторизованным пользователем, отправка данных на api/order
diff --git a/package.json b/package.json
index a497277..d33468c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuemmerce",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "private": true,
   "description": "Responsive ecommerce template built with Vue.js",
   "author": "ivan lori <ivan.lori@protonmail.com>",
diff --git a/src/components/order_page/CustomStepper.vue b/src/components/order_page/CustomStepper.vue
index 66e318a..b5608c0 100644
--- a/src/components/order_page/CustomStepper.vue
+++ b/src/components/order_page/CustomStepper.vue
@@ -1,11 +1,11 @@
 <template>
     <b-tabs v-model="activeTab" position="is-centered" class="block" type="is-toggle" expanded>
-        <b-tab-item v-for="(stepTab, index) in stepTabs" :label="stepTab.title" :key="index">
+        <b-tab-item v-for="(stepTab, index) in tabs" :label="stepTab.title" :key="index">
             <slot :name="'step' + (index + 1)">Контент для этого шага не указан</slot>
 
             <button v-if="(index + 1) !== stepTabs.length"
                     class="is-pulled-right button is-primary"
-                    @click="activeTab = index + 1">
+                    @click="nextTab(index)">
                 Продолжить
             </button>
             <button v-else class="is-pulled-right button is-primary"
@@ -31,6 +31,14 @@
             submit: {
                 type: Function,
                 required: true
+            },
+            next: {
+                type: Function,
+                required: false
+            },
+            filterIndex: {
+                type: Number,
+                required: false
             }
         },
         data: function() {
@@ -38,6 +46,22 @@
               activeTab: 0
           };
         },
+        computed: {
+            tabs: function() {
+                if (this.filterIndex >= 0) {
+                    return this.stepTabs.filter(st => this.stepTabs.indexOf(st) !== this.filterIndex)
+                }
+                return this.stepTabs;
+            }
+        },
+        methods: {
+            nextTab: function(index) {
+                if (this.next) {
+                    this.next(index);
+                }
+                this.activeTab = index + 1
+            }
+        }
     };
 </script>
 
diff --git a/src/components/order_page/OrderPage.vue b/src/components/order_page/OrderPage.vue
index 2f948fc..3c082b1 100644
--- a/src/components/order_page/OrderPage.vue
+++ b/src/components/order_page/OrderPage.vue
@@ -1,179 +1,263 @@
 <!--suppress XmlUnboundNsPrefix -->
 <template>
-    <div class="order-page">
-        <custom-stepper
-                :step-tabs="[
+  <div class="order-page">
+    <custom-stepper
+      :step-tabs="[
+                    {title: 'Контактные данные'},
                     {title: 'Выбор способа оплаты'},
                     {title: 'Выбор адреса и времени доставки'},
                     {title: 'Выберите удобное для вас время доставки'},
                 ]"
-                submitTitle="Завершить оформление заказа"
-                :submit="checkOrder">
+      submitTitle="Завершить оформление заказа"
+      :submit="checkOrder"
+      :filterIndex="isUserLoggedIn ? 0 : -1"
+      :next="nextTab"
+    >
+      <template v-show="!isUserLoggedIn" v-slot:step1>
+        <p class="content">
+          <b>Введите контактные данные</b>
+        </p>
+        <b-field :type="emailStyle" label="Email">
+          <b-input type="email" placeholder="Ваш email" v-model="email"></b-input>
+        </b-field>
+        <b-field :type="phoneStyle" label="Номер телефона">
+          <b-input placeholder="Ваш номер телефона" v-model="phone"></b-input>
+        </b-field>
+      </template>
 
-            <template v-slot:step1>
-                <p class="content">
-                    <b>Выберите способ оплаты:</b>
-                </p>
-                <b-field v-for="payTypeItem in payTypeList" :key="payType.code">
-                    <b-radio v-model="payType" size="is-medium" :native-value="payTypeItem.code">
-                        <div class="is-flex is-vertical-center">
-                            <figure class="image is-64x64">
-                                <img :src="payTypeItem.icon">
-                            </figure>
-                            <b class="has-margin-left-10">{{ payTypeItem.title }}</b>
-                        </div>
-                    </b-radio>
-                </b-field>
-            </template>
-
-            <template v-slot:step2>
-                <b-field label="Город доставки"
-                         :type="formNeedValidate && !searchCity ? 'is-danger' : ''"
-                         message="Это поле обязательно к заполнению">
-                    <city-autocomplete @select="val => searchCity = val" />
-                </b-field>
-                <b-field label="Адрес доставки"
-                         :type="formNeedValidate && !address ? 'is-danger' : ''"
-                         message="Это поле обязательно к заполнению">
-                    <b-input v-model="address"></b-input>
-                </b-field>
-                <div class="is-flex is-full-width">
-                    <b-field label="Выберите дату доставки" class="is-full-width"
-                             :type="formNeedValidate && !dateShipping ? 'is-danger' : ''"
-                             message="Это поле обязательно к заполнению">
-                        <b-datepicker v-model="dateShipping"
-                                      :first-day-of-week="1"
-                                      :min-date="new Date()"
-                                      :keep-first="true"
-                                      placeholder="Кликните для выбора даты...">
-                            <button class="button is-primary"
-                                    @click="dateShipping = new Date()">
-                                <b-icon icon="calendar-today"></b-icon>
-                                <span>Сегодня</span>
-                            </button>
-                            <button class="button is-danger"
-                                    @click="dateShipping = null">
-                                <b-icon icon="close"></b-icon>
-                                <span>Очистить</span>
-                            </button>
-                        </b-datepicker>
-                    </b-field>
-                    <b-field label="Выберите удобное для вас время доставки" class="has-margin-left-20 is-full-width">
-                        <b-timepicker
-                                v-model="timeShipping"
-                                placeholder="Кликните для выбора времени..."></b-timepicker>
-                    </b-field>
-                </div>
-            </template>
+      <template v-slot:step2>
+        <p class="content">
+          <b>Выберите способ оплаты:</b>
+        </p>
+        <b-field v-for="payTypeItem in payTypeList" :key="payType.code">
+          <b-radio v-model="payType" size="is-medium" :native-value="payTypeItem.code">
+            <div class="is-flex is-vertical-center">
+              <figure class="image is-64x64">
+                <img :src="payTypeItem.icon" />
+              </figure>
+              <b class="has-margin-left-10">{{ payTypeItem.title }}</b>
+            </div>
+          </b-radio>
+        </b-field>
+      </template>
 
-            <template v-slot:step3>
-                <h3>Проверьте введенные данные: </h3>
-                <div class="order-row-list">
-                    <dotted-row title="Способ оплаты" :value="selectedPayTypeTitle" />
-                    <dotted-row title="Город доставки" :value="searchCity" />
-                    <dotted-row title="Адрес доставки" :value="address" />
-                    <dotted-row title="Дата доставки" :value="deliveryDateTime" />
-                </div>
-            </template>
+      <template v-slot:step3>
+        <b-field
+          label="Город доставки"
+          :type="formNeedValidate && !searchCity ? 'is-danger' : ''"
+          message="Это поле обязательно к заполнению"
+        >
+          <city-autocomplete @select="val => searchCity = val" />
+        </b-field>
+        <b-field
+          label="Адрес доставки"
+          :type="formNeedValidate && !address ? 'is-danger' : ''"
+          message="Это поле обязательно к заполнению"
+        >
+          <b-input v-model="address"></b-input>
+        </b-field>
+        <div class="is-flex is-full-width">
+          <b-field
+            label="Выберите дату доставки"
+            class="is-full-width"
+            :type="formNeedValidate && !dateShipping ? 'is-danger' : ''"
+            message="Это поле обязательно к заполнению"
+          >
+            <b-datepicker
+              v-model="dateShipping"
+              :first-day-of-week="1"
+              :min-date="new Date()"
+              :keep-first="true"
+              placeholder="Кликните для выбора даты..."
+            >
+              <button class="button is-primary" @click="dateShipping = new Date()">
+                <b-icon icon="calendar-today"></b-icon>
+                <span>Сегодня</span>
+              </button>
+              <button class="button is-danger" @click="dateShipping = null">
+                <b-icon icon="close"></b-icon>
+                <span>Очистить</span>
+              </button>
+            </b-datepicker>
+          </b-field>
+          <b-field
+            label="Выберите удобное для вас время доставки"
+            class="has-margin-left-20 is-full-width"
+          >
+            <b-timepicker v-model="timeShipping" placeholder="Кликните для выбора времени..."></b-timepicker>
+          </b-field>
+        </div>
+      </template>
 
-        </custom-stepper>
+      <template v-slot:step4>
+        <h3>Проверьте введенные данные:</h3>
+        <div class="order-row-list">
+          <dotted-row title="Способ оплаты" :value="selectedPayTypeTitle" />
+          <dotted-row title="Город доставки" :value="searchCity" />
+          <dotted-row title="Адрес доставки" :value="address" />
+          <dotted-row title="Дата доставки" :value="deliveryDateTime" />
+        </div>
+      </template>
+    </custom-stepper>
 
-        <b-modal :active.sync="isShowModal" @close="() => $router.push('/')">
-            <div class="modal-card" style="width: auto">
-                <header class="modal-card-head">
-                    <p class="modal-card-title">Заказ оформлен</p>
-                </header>
-                <section class="modal-card-body">
-                    Спасибо за заказ!
-                </section>
-            </div>
-        </b-modal>
-    </div>
+    <b-modal :active.sync="isShowModal" @close="() => $router.push('/')">
+      <div class="modal-card" style="width: auto">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Заказ оформлен</p>
+        </header>
+        <section class="modal-card-body">Спасибо за заказ!</section>
+      </div>
+    </b-modal>
+  </div>
 </template>
 
 <script>
-    import moment from 'moment';
-    import DottedRow from "./DottedRow";
-    import CustomStepper from "./CustomStepper";
-    import CityAutocomplete from "./CityAutocomplete";
-
-    export default {
-        components: {
-            CityAutocomplete,
-            DottedRow,
-            CustomStepper,
-        },
-      name: 'order-page',
-        data () {
-            return {
-                formNeedValidate: false,
-                payType: "cash",
-                payTypeList: [
-                    { title: "Наличными", code: "cash",  "icon": "https://rentavto.ru/wp-content/uploads/2017/11/52240963.2yf2mccjit.W665.png" },
-                    { title: "Банковкой картой", code: "card", "icon": "http://city4g.ru/wa-data/public/shop/img/cash_oplata.png" },
-                ],
-                searchCity: '',
-                address: '',
-                dateShipping: moment().toDate(),
-                timeShipping: moment().toDate(),
-                isShowModal: false,
-            };
-        },
-        computed: {
-            selectedPayTypeTitle: function () {
-                const type = this.payTypeList.find(payTypeItem => payTypeItem.code === this.payType);
-                return type ? type.title : null;
-            },
-            deliveryDateTime: function () {
-                const formattedDate = moment(this.dateShipping).format('D/MM/YY');
-                const formattedTime = moment(this.timeShipping).format('HH:mm');
-                return `${formattedDate} ${formattedTime}`;
-            }
-        },
-        methods: {
-            checkOrder: function () {
-                if (!this.selectedPayTypeTitle) return false;
-                if (!this.searchCity) return false;
-                if (!this.address) return false;
-                if (!this.dateShipping) return false;
+import moment from "moment";
+import DottedRow from "./DottedRow";
+import CustomStepper from "./CustomStepper";
+import CityAutocomplete from "./CityAutocomplete";
+import { isValidEmail, isValidPhoneNumber } from "../../validators";
+import axios from "axios";
 
-                this.isShowModal = true;
-            },
-            danger(text) {
-                this.$snackbar.open({
-                    duration: 2000,
-                    message: `Ошибка: ${text}`,
-                    type: 'is-danger',
-                    position: 'is-bottom-right'
-                })
-            }
-        },
-        metaInfo: {
-            title: 'Vuemmerce | Order',
+export default {
+  components: {
+    CityAutocomplete,
+    DottedRow,
+    CustomStepper
+  },
+  name: "order-page",
+  data() {
+    return {
+      formNeedValidate: false,
+      payType: "cash",
+      payTypeList: [
+        {
+          title: "Наличными",
+          code: "cash",
+          icon:
+            "https://rentavto.ru/wp-content/uploads/2017/11/52240963.2yf2mccjit.W665.png"
         },
+        {
+          title: "Банковкой картой",
+          code: "card",
+          icon: "http://city4g.ru/wa-data/public/shop/img/cash_oplata.png"
+        }
+      ],
+      searchCity: "",
+      address: "",
+      dateShipping: moment().toDate(),
+      timeShipping: moment().toDate(),
+      isShowModal: false,
+      email: "",
+      phone: ""
     };
+  },
+  computed: {
+    isUserLoggedIn() {
+      return this.$store.getters.isUserLoggedIn;
+    },
+    selectedPayTypeTitle: function() {
+      const type = this.payTypeList.find(
+        payTypeItem => payTypeItem.code === this.payType
+      );
+      return type ? type.title : null;
+    },
+    deliveryDateTime: function() {
+      const formattedDate = moment(this.dateShipping).format("D/MM/YY");
+      const formattedTime = moment(this.timeShipping).format("HH:mm");
+      return `${formattedDate} ${formattedTime}`;
+    },
+    emailStyle: function() {
+      return isValidEmail(this.email) || this.email.length === 0
+        ? "input"
+        : "input is-danger";
+    },
+    phoneStyle: function() {
+      return isValidPhoneNumber(this.phone) || this.phone.length === 0
+        ? "input"
+        : "input is-danger";
+    }
+  },
+  methods: {
+    checkOrder: function() {
+      if (!this.selectedPayTypeTitle) return false;
+      if (!this.searchCity) return false;
+      if (!this.address) return false;
+      if (!this.dateShipping) return false;
+      if (!this.isUserLoggedIn &&
+        (!isValidEmail(this.email) || !isValidPhoneNumber(this.phone)))
+        return false;
+    console.log(localStorage.getItem('email'))
+    axios.post('/api/odrer', {
+        email: localStorage.getItem('email'),
+        phone: localStorage.getItem('phone'),
+        payType: localStorage.getItem('payType'),
+        address: localStorage.getItem('address'),
+        searchCity: localStorage.getItem('searchCity'),
+        dateShipping: localStorage.getItem('dateShipping'),
+        timeShipping: localStorage.getItem('timeShipping')
+    }).then(() => {
+        this.isShowModal = true;
+    })
+    },
+    danger(text) {
+      this.$snackbar.open({
+        duration: 2000,
+        message: `Ошибка: ${text}`,
+        type: "is-danger",
+        position: "is-bottom-right"
+      });
+    },
+    showSignupModal() {
+      this.$store.commit("showSignupModal", true);
+    },
+    nextTab(index) {
+        if (index === 0) {
+            localStorage.setItem('email', this.email);
+            localStorage.setItem('phone', this.phone);
+        }
+        if (index === 1) {
+            localStorage.setItem('payType', this.payType);
+        }
+        if (index === 2) {
+            localStorage.setItem('searchCity', this.searchCity);
+            localStorage.setItem('address', this.address);
+            localStorage.setItem('dateShipping', this.dateShipping);
+            localStorage.setItem('timeShipping', this.timeShipping);
+        }
+    }
+  },
+  mounted: function() {
+      if (!this.isUserLoggedIn) {
+          this.showSignupModal();
+      }
+  },
+  metaInfo: {
+    title: "Vuemmerce | Order"
+  }
+};
 </script>
 
 <style lang="scss">
-    .order-row-list {
-        margin: 40px;
-        > * {
-            margin-bottom: 10px;
-        }
-    }
-    .order-page {
-        width: 60%;
-        min-height: 300px;
-        margin: 40px auto;
-    }
-    .is-vertical-center {
-        display: flex;
-        align-items: center;
-    }
-    .tab-content {
-        overflow: visible!important;
-    }
-    .dotted {
-        background: url('/assets/icon-dotted.png') repeat-x left 83%;
-    }
+.order-row-list {
+  margin: 40px;
+  > * {
+    margin-bottom: 10px;
+  }
+}
+.order-page {
+  width: 60%;
+  min-height: 300px;
+  margin: 40px auto;
+}
+.is-vertical-center {
+  display: flex;
+  align-items: center;
+}
+.tab-content {
+  overflow: visible !important;
+}
+.dotted {
+  background: url("/assets/icon-dotted.png") repeat-x left 83%;
+}
 </style>
diff --git a/src/validators.js b/src/validators.js
index 2f7d0ad..e5a7e90 100644
--- a/src/validators.js
+++ b/src/validators.js
@@ -1,4 +1,9 @@
 export function isValidEmail (email) {
     const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
     return re.test(email);
+}
+
+export function isValidPhoneNumber (phone) {
+    const re = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/
+    return re.test(phone);
 }
\ No newline at end of file