@lancom/shared 0.0.62 → 0.0.66

package/components/common/tabs.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <div :class="{ [tabsClass]: true, disabled, fullWidth }">
+      <div
+        v-for="tab in tabs"
+        :key="tab.value"
+        class="tab ripple"
+        :class="{ active: currentTab === tab.value }"
+        @click="select(tab)">
+        <div class="lc_medium18 tab-label">
+          <i
+            v-if="tab.icon"
+            :class="[tab.icon, 'tab-icon']">
+          </i>
+          {{ tab.label }}
+        </div>
+        <div
+          v-if="tab.description"
+          class="lc_regular12 lc_grey1 mt-5">
+          {{ tab.description }}
+        </div>
+      </div>
+    </div>
+    <slot :current-tab="currentTab"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Tabs',
+  props: {
+    type: {
+      type: String,
+      default: 'primary',
+      validator(value) {
+        return ['large', 'primary', 'secondary'].includes(value);
+      }
+    },
+    tabs: {
+      type: Array,
+      required: true,
+      validator(tabs) {
+        const notEmptry = tabs.length;
+        const consistsOfObjects = !tabs.filter(tab => tab !== Object(tab)).length;
+        const hasRequiredFields = !tabs.filter(tab => !(Object.keys(tab).includes('label') && Object.keys(tab).includes('value'))).length;
+        return notEmptry && consistsOfObjects && hasRequiredFields;
+      }
+    },
+    selected: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    fullWidth: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      currentTab: null
+    };
+  },
+  computed: {
+    tabsClass() {
+      return `tabs--${this.type}`;
+    }
+  },
+  watch: {
+    selected(value) {
+      if (value !== this.currentTab) {
+        this.select({ value });
+      }
+    }
+  },
+  mounted() {
+    this.select(this.tabs[0]);
+  },
+  methods: {
+    select({ value }) {
+      this.currentTab = value;
+      this.$emit('select', this.currentTab);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/scss/variables";
+
+.tab {
+  flex-grow: .2;
+  display: flex;
+  align-items: center;
+  border-radius: 2px;
+  border: 1px solid $grey_4;
+  &:not(:last-of-type) {
+    margin-right: 4px;
+  }
+  &:not(:first-of-type) {
+    margin-left: 4px;
+  }
+  &s--primary,
+  &s--secondary,
+  &s--large {
+    display: flex;
+    justify-content: center;
+    white-space: nowrap;
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 500;
+    text-align: center;
+    color: #a6a6a6;
+    background-color: #FFFFFF;
+    transition: background-color .22s ease-in-out;
+  }
+  &s--large & {
+    height: 80px;
+    flex-direction: column;
+    padding: 10px;
+    min-width: 190px;
+    white-space: normal;
+  }
+  &s--primary & {
+    height: 60px;
+  }
+  &s--secondary & {
+    height: 45px;
+  }
+  &s {
+    display: flex;
+    border-radius: 4px 4px 0 0;
+    overflow: hidden;
+    &--secondary,
+    &--primary,
+    &--large {
+      @extend .tabs;
+    }
+    &.disabled {
+      pointer-events: none;
+      opacity: .6;
+    }
+  }
+  &-label {
+    padding: 0 12px;
+    position: relative;
+  }
+  &-icon {
+    font-size: 26px;
+  }
+  &s--large &-label,
+  &s--primary &-label,
+  &s--secondary &-label {
+    width: 100%;
+  }
+  &s--large &:not(.active),
+  &s--primary &:not(.active),
+  &s--secondary &:not(.active) {
+    background-color: #FFFFFF;
+    color: $grey_1;
+  }
+  &s--large &.active,
+  &s--primary &.active,
+  &s--secondary &.active {
+    background-color: $grey_4;
+    color: $black;
+  }
+}
+.fullWidth .tab {
+  flex-grow: 1;
+}
+</style>

package/components/common/toggle-content.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="ToggleContent__wrapper">
+    <div
+      class="ToggleContent__header"
+      @click="toggle()">
+      <div class="ToggleContent__label">
+        {{ label }}
+      </div>
+      <div
+        class="ToggleContent__arrow"
+        :class="{ opened }">
+        <i class="icon-arrow-left"></i>
+      </div>
+    </div>
+    <div
+      v-if="opened"
+      class="ToggleContent__content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LancomToggleContent',
+  props: {
+    label: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      opened: true
+    };
+  },
+  methods: {
+    toggle() {
+      this.opened = !this.opened;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/scss/variables";
+.ToggleContent {
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  &__arrow {
+    &.opened {
+      transform: rotateZ(-90deg);
+    }
+  }
+}
+</style>

package/components/customer/customer.scss

@@ -0,0 +1,9 @@
+.CustomerPage {
+  &__controls {
+    display: flex;
+    width: 100%;
+    > div {
+      flex-grow: 1;
+    }
+  }
+}

package/components/customer/customer.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="CustomerPage__wrapper">
+    <div class="row">
+      <div class="col-12">
+        <div class="CustomerPage__controls">
+          <div>
+            <btn
+              :btn-class="isRegister ? 'white' : 'green'"
+              btn-label="LOG IN"
+              :btn-block="true"
+              @onclick="isRegister = false" />
+          </div>
+          <div>
+            <btn
+              :btn-class="isRegister ? 'green' : 'white'"
+              btn-label="REGISTER"
+              :btn-block="true"
+              @onclick="isRegister = true" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <customer-form
+          v-if="isRegister"
+          :customer="customer"
+          @save="createdCustomer($event)" />
+        <signin-form
+          v-else
+          @signin="signin()" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions, mapMutations } from 'vuex';
+import SigninForm from '@lancom/shared/components/customer/signin_form/signin-form';
+import CustomerForm from '@lancom/shared/components/customer/customer_form/customer-form';
+
+export default {
+  name: 'Customer',
+  components: {
+    SigninForm,
+    CustomerForm
+  },
+  props: {
+    activeRegister: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isRegister: this.activeRegister,
+      customer: {
+        firstName: null,
+        lastName: null,
+        email: null,
+        phone: null,
+        password: null,
+        company: null,
+        suburb: null,
+        signUpForNewsletter: false
+      }
+    };
+  },
+  methods: {
+    ...mapActions('auth', ['update_user']),
+    createdCustomer({ customer: user, token }) {
+      this.update_user({ user, token });
+      this.$router.push('/');
+    },
+    signin() {
+      this.$router.push('/');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'customer.scss';
+</style>

package/components/customer/customer_form/customer-form.scss

@@ -0,0 +1,12 @@
+@import "@/assets/scss/variables";
+
+.CustomerForm {
+  &__error {
+    font-weight: bold;
+    font-size: 14px;
+    padding: 18px 10px;
+    text-align: center;
+    color: $white;
+    background: #EA3434;
+  }
+}

package/components/customer/customer_form/customer-form.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="form__wrapper CustomerFrom__wrapper">
+    <validation-observer ref="form">
+      <div class="mt-10">
+        <div class="row">
+          <div class="col-6">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Email"
+              rules="required|email"
+              class="form-row">
+              <label
+                for="email"
+                class="form-label">
+                Email
+              </label>
+              <input
+                id="email"
+                ref="email"
+                v-model="customer.email"
+                name="email"
+                type="text"
+                class="form-field labelless"
+                placeholder="Email"
+                :disabled="customer._id"
+                :class="{
+                  'is-invalid': errors.length,
+                  filled: customer.email
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="First Name"
+              rules="required"
+              class="form-row">
+              <label
+                for="firstName"
+                class="form-label">
+                First Name
+              </label>
+              <input
+                id="firstName"
+                v-model="customer.firstName"
+                name="firstName"
+                type="text"
+                class="form-field labelless"
+                placeholder="First Name"
+                :class="{
+                  'is-invalid': errors.length,
+                  filled: customer.firstName
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Phone"
+              class="form-row">
+              <label
+                for="phone"
+                class="form-label">
+                Phone (optional)
+              </label>
+              <input
+                id="phone"
+                v-model="customer.phone"
+                name="phone"
+                type="number"
+                class="form-field labelless"
+                placeholder="Phone"
+                :class="{
+                  'is-invalid': errors.length,
+                  filled: customer.phone
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+          <div class="col-6">
+            <validation-provider
+              v-if="!customer._id"
+              v-slot="{ errors }"
+              tag="div"
+              name="Password"
+              rules="required"
+              class="form-row">
+              <label
+                for="password"
+                class="form-label">
+                Password
+              </label>
+              <input
+                id="password"
+                ref="password"
+                v-model="customer.password"
+                name="password"
+                type="password"
+                class="form-field labelless"
+                placeholder="Password"
+                :class="{
+                  'is-invalid': errors.length,
+                  filled: customer.password
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Last Name"
+              rules="required"
+              class="form-row">
+              <label
+                for="lastName"
+                class="form-label">
+                Last Name
+              </label>
+              <input
+                id="lastName"
+                v-model="customer.lastName"
+                name="lastName"
+                type="text"
+                class="form-field labelless"
+                placeholder="Last Name"
+                :class="{
+                  'is-invalid': errors.length,
+                  filled: customer.lastName
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Company"
+              class="form-row">
+              <label
+                for="company"
+                class="form-label">
+                Company (optional)
+              </label>
+              <input
+                id="company"
+                v-model="customer.company"
+                name="company"
+                type="text"
+                class="form-field labelless"
+                placeholder="Company"
+                :class="{
+                  'is-invalid': errors.length,
+                  filled: customer.company
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+        </div>
+        <div
+          class="row"
+          style="margin-top: -20px">
+          <div class="col-12">
+            <postcode-select
+              :suburb="customer.suburb"
+              :labelless="true"
+              placeholder="Suburb"
+              @select="handleSuburbChange">
+            </postcode-select>
+            <div class="form-row">
+              <label class="form-label">
+                <checkbox v-model="customer.signUpForNewsletter" />
+                <span class="lc_regular12 lc__grey1">
+                  Sign up for newsletter
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="form__footer mt-5">
+        <div
+          v-if="errorMessage"
+          class="CustomerForm__error">
+          {{ errorMessage }}
+        </div>
+        <div class="form-actions full">
+          <btn
+            class="btn btn-black"
+            :btn-processing="processing"
+            :btn-disabled="processing"
+            :btn-label="customer._id ? 'Save' : 'Create Account'"
+            @onclick="submit()">
+          </btn>
+        </div>
+      </div>
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'CustomerForm',
+  components: {
+    PostcodeSelect
+  },
+  props: {
+    customer: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      errorMessage: null,
+      processing: false
+    };
+  },
+  computed: {
+    ...mapGetters(['shop'])
+  },
+  methods: {
+    async submit() {
+      this.errorMessage = null;
+
+      const isValid = await this.$refs.form.validate();
+      if (!isValid) {
+        return;
+      }
+
+      try {
+        this.processing = true;
+        const result = await api.saveCustomer(this.customer, this.shop._id);
+        this.$emit('save', result);
+      } catch ({ response }) {
+        const { data } = response || {};
+        this.errorMessage = data && data.error;
+      } finally {
+        this.processing = false;
+      }
+    },
+    handleSuburbChange(suburb) {
+      this.$set(this.customer, 'suburb', suburb);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'customer-form.scss';
+</style>