@lancom/shared 0.0.62 → 0.0.66

package/components/customer/customer_password/customer-password.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="form__wrapper Customerassword__wrapper">
+    <validation-observer ref="form">
+      <div
+        v-if="errorMessage"
+        class="alert alert-danger">
+        Update password error: {{ errorMessage }}
+      </div>
+      <div class="form__content mt-10">
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          name="Password"
+          rules="required"
+          class="form-row">
+          <input
+            id="password"
+            ref="password"
+            v-model="customer.password"
+            name="password"
+            type="password"
+            class="form-field"
+            :class="{
+              'is-invalid': errors.length,
+              filled: customer.password
+            }" />
+          <label
+            for="password"
+            class="form-label label-inner">
+            Password
+          </label>
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+      </div>
+      <div class="form__footer">
+        <div class="form-actions">
+          <btn
+            class="btn btn-green"
+            :btn-processing="processing"
+            :btn-disabled="processing"
+            btn-label="Save"
+            @onclick="submit()">
+          </btn>
+        </div>
+      </div>
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'CustomerPassword',
+  props: {
+    customer: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      errorMessage: null
+    };
+  },
+  computed: {
+    ...mapGetters(['shop'])
+  },
+  methods: {
+    async submit() {
+      const isValid = await this.$refs.form.validate();
+      if (!isValid) {
+        return;
+      }
+
+      try {
+        this.processing = true;
+        await api.saveCustomerPassword(this.customer, this.shop._id);
+        this.$emit('save', this.customer);
+      } catch ({ response }) {
+        const { data } = response || {};
+        this.errorMessage = data && data.message;
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'customer-password.scss';
+</style>

package/components/customer/recovery_form/recovery-form.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="form__wrapper RecoveryFrom__wrapper">
+    <validation-observer ref="form">
+      <div class="form__content mt-10">
+        <div
+          v-if="error"
+          class="alert alert-danger">
+          {{ error }}
+        </div>
+        <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="Your Email"
+            :class="{
+              'is-invalid': errors.length,
+              filled: customer.email
+            }" />
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+      </div>
+      <div class="form__footer">
+        <div class="form-actions">
+          <btn
+            class="btn btn-green"
+            :btn-processing="processing"
+            :btn-disabled="processing"
+            btn-label="Password Recovery"
+            @onclick="submit()">
+          </btn>
+        </div>
+      </div>
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'RecoveryForm',
+  data() {
+    return {
+      processing: false,
+      error: null,
+      customer: {
+        email: ''
+      }
+    };
+  },
+  computed: {
+    ...mapGetters(['shop'])
+  },
+  methods: {
+    async submit() {
+      const isValid = await this.$refs.form.validate();
+      if (!isValid) {
+        return;
+      }
+
+      try {
+        this.processing = true;
+        await api.resetCustomerPassword(this.customer, this.shop._id);
+        this.$emit('recovery');
+      } catch (e) {
+        this.error = e.response.data.message;
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'recovery-form.scss';
+</style>

package/components/customer/signin_form/signin-form.scss

@@ -0,0 +1,22 @@
+@import "@/assets/scss/variables";
+
+.SignInFrom {
+  &__recovery {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 22px;
+    color: $gray_main;
+  }
+  &__error {
+    font-weight: bold;
+    font-size: 14px;
+    padding: 18px 10px;
+    text-align: center;
+    color: $white;
+    background: #EA3434;
+  }
+}
+
+.form__footer {
+  margin-top: 42px;
+}

package/components/customer/signin_form/signin-form.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="form__wrapper SignInFrom__wrapper">
+    <validation-observer ref="form" @submit="submit()">
+      <div class="form__content mt-4">
+        <div class="row">
+          <div class="col-sm-6 col-12">
+            <validation-provider
+              v-slot="{ errors }"
+              tag="div"
+              name="Email"
+              rules="required"
+              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"
+                :class="{
+                  'is-invalid': errors.length,
+                  filled: customer.email
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+          <div class="col-sm-6 col-12">
+            <validation-provider
+              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"
+                placeholder="Password"
+                type="password"
+                class="form-field labelless"
+                :class="{
+                  'is-invalid': errors.length,
+                  filled: customer.password
+                }" />
+              <span
+                v-if="errors.length"
+                class="form-help is-danger">
+                {{ errors[0] }}
+              </span>
+            </validation-provider>
+          </div>
+        </div>
+        <nuxt-link
+          to="/customer/recovery"
+          class="SignInFrom__recovery">
+          Forgot Password?
+        </nuxt-link>
+      </div>
+      <div class="form__footer">
+        <div
+          v-if="error"
+          class="SignInFrom__error">
+          {{ error }}
+        </div>
+        <div class="form-actions">
+          <btn
+            class="btn btn-black"
+            :btn-processing="processing"
+            :btn-disabled="processing"
+            :btn-block="true"
+            btn-label="Log in"
+            @onclick="submit()">
+            <i
+              slot="icon-after"
+              class="icon-arrow-right"></i>
+          </btn>
+        </div>
+      </div>
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  name: 'SignInForm',
+  data() {
+    return {
+      processing: false,
+      error: null,
+      customer: {
+        email: '',
+        password: ''
+      }
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('auth', ['authStatus', 'stateError'])
+  },
+  methods: {
+    ...mapActions('auth', ['auth_request']),
+    async submit() {
+      this.error = null;
+
+      const isValid = await this.$refs.form.validate();
+      if (!isValid) {
+        return;
+      }
+
+      try {
+        this.processing = true;
+        const data = { customer: this.customer, shop: this.shop };
+        const customer = await this.auth_request(data);
+        if (this.authStatus === 'error') {
+          this.error = this.stateError.message;
+        } else {
+          this.$emit('signin', customer);
+        }
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'signin-form.scss';
+</style>

package/components/design/approve_design_header/approve-design-header.scss

@@ -0,0 +1,71 @@
+@import "@/assets/scss/variables";
+
+.ApproveDesignHeader {
+  &__row {
+    color: $black;
+    padding-bottom: 50px;
+    border-bottom: 3px solid $grey_3;
+    & + & {
+      padding-top: 30px;
+      padding-bottom: 30px;
+      background-color: $white_high_emphasis;
+    }
+  }
+  &__cols {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+  &__logo {
+    width: 385px;
+    height: auto;
+  }
+  &__info {
+    width: 400px;
+    background-color: $white_high_emphasis;
+    border: 3px solid $grey_3;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    &-row {
+      width: 100%;
+      padding: 0 20px;
+      height: 60px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      &:not(:last-of-type) {
+        border-bottom: 3px solid $grey_3;
+      }
+      &:first-of-type {
+        background-color: $grey_4;
+      }
+    }
+  }
+  &__order {
+    &-number {
+      font-weight: 600;
+      font-size: 25px;
+      line-height: 120%;
+      letter-spacing: 0.02em;
+    }
+    &-design, &-revision {
+      font-size: 20px;
+      line-height: 150%;
+    }
+  }
+  &__subheader {
+    font-weight: 600;
+    font-size: 25px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+  }
+  &__customer-info {
+    display: flex;
+    flex-direction: column;
+    padding-top: 30px;
+    font-size: 20px;
+    line-height: 150%;
+    color: $grey_1;
+  }
+}

package/components/design/approve_design_header/approve-design-header.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="ApproveDesignHeader__wrapper">
+    <div class="ApproveDesignHeader__row ApproveDesignHeader__cols">
+      <logo class="ApproveDesignHeader__logo" />
+      <div class="ApproveDesignHeader__info">
+        <div class="ApproveDesignHeader__info-row ApproveDesignHeader__order-number">
+          <span>Order:</span>
+          <span>#{{ order.code }}</span>
+        </div>
+        <div class="ApproveDesignHeader__info-row ApproveDesignHeader__order-design">
+          <span>Design ID:</span>
+          <span>{{ product.designId }}</span>
+        </div>
+        <div class="ApproveDesignHeader__info-row ApproveDesignHeader__order-revision">
+          <span>Revision:</span>
+          <span>1</span>
+        </div>
+      </div>
+    </div>
+    <div class="ApproveDesignHeader__row">
+      <div class="ApproveDesignHeader__subheader ApproveDesignHeader__cols">
+        <span>
+          Pre-Production Approval Form
+        </span>
+        <span>
+          <span class="pageNumber"></span>/<span class="totalPages"></span>
+        </span>
+      </div>
+      <div class="ApproveDesignHeader__customer-info">
+        <span>{{ order.fullName }}</span>
+        <span>{{ order.company }}</span>
+        <span>
+          {{ order.addressLine1 }}<fragment v-if="order.addressLine2">, {{ order.addressLine2 }}</fragment>
+        </span>
+        <span>
+          {{ order.postcode }},
+          {{ order.state }},
+          {{ order.city }},
+          Australia
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Logo from '@lancom/shared/components/common/logo/logo';
+
+export default {
+  name: 'ApproveDesignHeader',
+  components: {
+    Logo
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    product: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'approve-design-header.scss';
+</style>

package/components/design/approve_design_prints/approve-design-prints.scss

@@ -0,0 +1,76 @@
+@import "@/assets/scss/variables";
+
+.ApproveDesignPrints {
+  &__wrapper {
+    display: grid;
+    grid-template-columns: repeat(2, 540px);
+    grid-column-gap: 20px;
+  }
+  &__id {
+    font-weight: 600;
+    font-size: 25px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+    color: $black;
+    text-transform: uppercase;
+  }
+  &__label {
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+    color: $grey_1;
+    text-transform: uppercase;
+  }
+  &__side {
+    display: flex;
+    flex-direction: column;
+  }
+  &__container {
+    background-color: $grey_3;
+    margin-top: 30px;
+    height: 540px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    page-break-inside: avoid !important;
+  }
+  &__no-design {
+    width: 233px;
+    height: 58px;
+    border: 2px solid $black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $white_high_emphasis;
+    font-size: 25px;
+    line-height: 150%;
+    color: $black;
+  }
+  &__footer {
+    margin-top: 30px;
+    
+    &-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      & + & {
+        margin-top: 10px;
+      }
+    }
+  }
+  &__title {
+    font-weight: 600;
+    font-size: 25px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+    color: $black;
+  }
+  &__subtitle {
+    font-size: 20px;
+    line-height: 120%;
+    letter-spacing: 0.02em;
+    color: $black;
+  }
+}

package/components/design/approve_design_prints/approve-design-prints.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div class="ApproveDesignPrints__wrapper">
+      <div class="ApproveDesignPrints__side">
+        <div class="ApproveDesignPrints__id">
+          Print ID: {{ printIds.front }}
+        </div>
+        <div class="ApproveDesignPrints__label">
+          Front artwork
+        </div>
+        <div class="ApproveDesignPrints__container">
+          <iframe
+            v-if="showFront"
+            width="540px"
+            height="540px"
+            :src="getIFrameSrc('front')"></iframe>
+          <div v-else class="ApproveDesignPrints__no-design">
+            No design
+          </div>
+        </div>
+      </div>
+      <div class="ApproveDesignPrints__side">
+        <div class="ApproveDesignPrints__id">
+          Print ID: {{ printIds.back }}
+        </div>
+        <div class="ApproveDesignPrints__label">
+          Back artwork
+        </div>
+        <div class="ApproveDesignPrints__container">
+          <iframe
+            v-if="showBack"
+            width="540px"
+            height="540px"
+            :src="getIFrameSrc('back')"></iframe>
+          <div v-else class="ApproveDesignPrints__no-design">
+            No design
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ApproveDesignPrints__footer">
+      <div class="ApproveDesignPrints__footer-row">
+        <div class="ApproveDesignPrints__title">
+          General Logo Placement (Guide only,  not to scale)
+        </div>
+      </div>
+      <div class="ApproveDesignPrints__footer-row">
+        <div class="ApproveDesignPrints__subtitle">
+          Design to be printed at these proportions on ALL size tees
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ApproveDesignPrints',
+  props: {
+    printIds: {
+      type: Object,
+      required: true
+    },
+    showFront: {
+      type: Boolean,
+      required: true
+    },
+    showBack: {
+      type: Boolean,
+      required: true
+    },
+    token: {
+      type: String,
+      required: true
+    },
+    designId: {
+      type: String
+    },
+    isScreenPrintsRequest: {
+      type: Boolean
+    }
+  },
+  methods: {
+    getIFrameSrc(side) {
+      if (this.isScreenPrintsRequest) {
+        return `/screen-print-request/${this.token}/${side}`;
+      } else {
+        return `/order/${this.token}/design/${this.designId}/${side}`;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'approve-design-prints.scss';
+</style>