tabbit

Wed Oct 04 2017
Copied to clipboard! Copy reply
<template>

    <main class="container">
        <header>
          <h3>&mdash; Checkout &mdash;</h3>
          <!-- <p></p>   -->      
        </header>      
     
 
          <v-stepper v-model="step" class='checkout-stepper'>
            <v-stepper-header>
              <v-stepper-step step="1" :complete="step > 1">
                Guest's Name
                <small>(optional)</small>
              </v-stepper-step>

              <v-divider></v-divider>

              <v-stepper-step step="2" :complete="step > 2">
                Shipping Address
              </v-stepper-step>

              <v-divider></v-divider>

              <v-stepper-step step="3">
                Checkout
              </v-stepper-step>
            </v-stepper-header>

            <v-stepper-content step="1">
              <div>                
                <v-text-field   
                  placeholder="Enter guest's name here (optional)"
                  hint-persistent
                  hint=""
                  class="input-group"
                  v-model="guestName">            
                </v-text-field>
                <p>
                  This is optional, and <b>free of charge</b>.
                </p>
                <p>
                  Enter you guest's name if you want it to appear on the crate.
                  <br>
                  You can <a href="" @click.prevent="step = 2">skip</a> this step.
                </p>
              </div>
              <v-btn primary @click.native="step = 2">Continue</v-btn>
            </v-stepper-content>

            <v-stepper-content step="2">
              <div>
                <p>
                  Where are we shipping to?
                </p>
                <p>
                  <small>
                    Tip: If you can't make it to your property to leave the crate
                    inside, you can have it shipped directly to the property
                    and let the guests know that there is a package for them
                    at the door when they arrive!
                  </small>
                </p>
                <v-form ref='form2'>
                  <v-layout row>          
                  <v-card flat>
                    <v-card-text>
                      <v-text-field    
                        label="Name"
                        v-model='$store.state.checkout.shipping.name'
                        class="input-group">            
                      </v-text-field>
                    </v-card-text>
                  </v-card>        
                  </v-layout>

                  <v-layout row-sm column child-flex-sm> 

                    <!-- Shipping address  -->
                    <v-card flat>
                      <v-card-text>
                        <v-text-field    
                          label="Address"
                          v-model='$store.state.checkout.shipping.address'
                          :rules="rules.address"
                          required
                          class="input-group">            
                        </v-text-field>
                      </v-card-text>
                    </v-card>
                    
                    <!-- shipping city -->
                    <v-layout row wrap>
                      <v-flex xs12 sm4 md4>
                        <v-card flat>
                          <v-card-text>
                            <v-text-field    
                              label="City"
                              v-model='$store.state.checkout.shipping.city'
                              :rules="rules.city"
                              required
                              class="input-group">            
                            </v-text-field>
                          </v-card-text>
                        </v-card>
                      </v-flex>
                      
                      <!-- shipping state -->
                      <v-flex xs12 sm4 md4>
                        <v-card flat>
                          <v-card-text>
                            <v-select
                              :items="states"
                              :rules='rules.state'
                              v-model="$store.state.checkout.shipping.state"
                              label="Select State"
                              single-line
                              required
                              autocomplete
                              auto
                              hide-details
                            ></v-select>
                          </v-card-text>
                        </v-card>
                      </v-flex>
                      
                      <!-- shipping zip -->
                      <v-flex xs12 sm4 md4>
                        <v-card flat>
                          <v-card-text>
                            <v-text-field    
                              label="Zip"
                              v-model='$store.state.checkout.shipping.zip'
                              :rules="rules.zip"
                              required
                              class="input-group">            
                            </v-text-field>
                          </v-card-text>
                        </v-card>
                      </v-flex>
                    </v-layout>                 
                  </v-layout>
                </v-form>
              </div>
              <v-btn accent @click.native='step = 1'>Back</v-btn>
              <v-btn primary @click.native="goToStep3">Continue</v-btn>
            </v-stepper-content>

            <v-stepper-content step="3">
              <v-form ref='form3'>
                <v-layout>                

                  <!--  cc fields -->
                  <v-flex sm6>
                    <v-card flat class="ma-1 payment-option">
                      <v-card-text>
                        <!-- icons -->
                        <v-card flat>
                          <v-card-text class='payment-icons'>
                            <img src="/icons/payments/visa.png" alt="">
                            <img src="/icons/payments/mastercard.png" alt="">
                            <img src="/icons/payments/americanexpress.png" alt="">
                            <img src="/icons/payments/discover.png" alt="">

                            <a href="">
                              click here to pay with paypal
                            </a>
                          </v-card-text>
                        </v-card>
                        
                        <!-- Name, CC No., Email -->
                        <v-layout row wrap>
                          <v-flex>
                            <v-card flat>
                              <v-card-text>
                                <div id='cardNumber-mount'></div>
                                <div class="input-error" v-if='ccNumberError'>{{ccNumberError}}</div>
                              </v-card-text>                            
                            </v-card>
                          </v-flex>                                                
                        </v-layout>                    
                        
                        <v-layout row wrap>
                          <v-flex xs12 sm6>
                            <v-card flat>
                              <v-card-text>
                                <div id='cardCvc-mount'></div>
                                <div class="input-error" v-if='ccCvcError'>{{ccCvcError}}</div>
                              </v-card-text>                            
                            </v-card>
                          </v-flex>

                          <v-flex xs12 sm6>
                            <v-card flat>
                              <v-card-text>
                                <div id='cardExpiry-mount'></div>  
                                <div class="input-error" v-if="ccExpiryError">{{ ccExpiryError }}</div>
                              </v-card-text>                            
                            </v-card>
                          </v-flex>
                        </v-layout>    

                        <v-layout>
                          <!-- cc email -->
                          <v-flex>
                            <v-card flat>
                              <v-card-text>
                                <v-text-field
                                  label='Your e-mail'
                                  :rules="rules.email"
                                  v-model='$store.state.email'
                                  persistent-hint
                                  hint="Your receipt will be sent here">
                                  </v-text-field>
                              </v-card-text>
                            </v-card>

                            <v-card flat>
                              <v-card-text>
                                <v-btn
                                block
                                primary
                                large
                                :loading='isSubmitting'
                                @click='handleCreditCardSubmit'
                                class="pay-button">
                                <v-icon left dark>lock</v-icon>
                                PAY ${{$store.getters.total}}
                              </v-btn>
                              </v-card-text>
                            </v-card>
                          </v-flex>
                        </v-layout>                         
                        
                      </v-card-text>
                    </v-card>
                  </v-flex>
                  <!-- /cc -->

                  <!-- Summary -->
                  <v-flex sm6>
                    <v-card  flat class="ma-1">
                      <v-card-text>
                        <div class="summary">
                          <h5>Order Summary</h5>
                          
                          <div class="summary-items">
                            <div v-for="(crate, key) in $store.state.crates" :key='key'>
                              <div>
                                <input type="text" v-model='$store.state.crates[key].quantity' :value='$store.state.crates[key].quantity'> {{key}} crate
                              </div>
                            </div>                          
                          </div>
                          
                          <div class="summary-premium">
                            <v-switch label="Use Premium crates?"                               
                              v-model="$store.state.usePremium"
                              color="primary"
                              hide-details>  
                            </v-switch>
                          </div>    
                          <div class="summary-shipping">
                            <div>
                              <h6>Shipping to:</h6>
                            </div>
                            {{$store.state.checkout.shipping.name}}<br>
                            {{$store.state.checkout.shipping.address}}<br>
                            {{$store.state.checkout.shipping.city}},&nbsp;
                            {{$store.state.checkout.shipping.state}}&nbsp;
                            {{$store.state.checkout.shipping.zip}}
                          </div>
                          <div class="summary-total" style="display: none">
                            <span>Total:</span>
                            <span>{{total}}</span>
                          </div>
                        </div>
                      </v-card-text>

                      
                    </v-card>
                  </v-flex>
                  <!-- /paypal -->
                    
                </v-layout>

                <v-layout>

                </v-layout>
                  
                <v-card v-if='ccSubmitError'>
                    <v-card-text>
                      <v-alert error value="true">     
                        {{ ccSubmitError }}                
                      </v-alert>
                    </v-card-text>                  
                </v-card>


                <v-card-text>
                  <v-btn accent @click.native="step = 2"> Back</v-btn>
                </v-card-text>
                
              
              </v-form>
            </v-stepper-content>

          </v-stepper>  
             
    </main>

</template>

<script>
import axios from 'axios'
import { isEmail, isCreditCard, isInt, isLength } from 'validator'

export default {
  layout: 'default',
  data ()
  {
    return {
      step: 1,
      isSubmitting: false,
      guestName: '',
      
      // Applied when user focus and leaves a field, or submits form.
      rules: {
        email: [
          v => !!v || 'E-mail is required',
          v => isEmail(v) || 'This e-mail is not valid'
        ],
        name: [
          v => !!v || 'Name is required',
        ],
        address: [
          v => !!v || 'City is required',
          v => isLength(v, { min: 2 }) || 'This field is required'
        ],
        zip: [
          v => !!v || 'Zip code is required',
          v => /[0-9a-zA-Z]+/i.test(v) || 'Enter a valid zip code'
        ],
        city: [
          v => !!v || 'City is required',
          v => isLength(v, { min: 1 }) || 'Enter a valid city'
        ],
        state: [
          v => !!v || 'This field is required',
          v => isLength(v, { min: 2, max: 2 }) || 'Use 2 letters'
        ],
        ccNumber: [
          v => !!v || 'This field is required',
          v => isCreditCard(v) || 'Invalid credit card number'
        ],
        ccExp: [
          v => !!v || 'This field is required',
          v => isLength(v, { min:4, max:4 }) && isInt(v) 
            || 'Invalid expiration date'
        ],
        ccSecurityCode: [
          v => !!v || 'This field is required',
          v => isLength(v, { min:3, max:3 }) && isInt(v) 
            || 'Invalid security code'
        ]

      },
      states: [
        "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", 
        "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", 
        "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", 
        "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", 
        "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "MP", 
        "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", 
        "SD", "TN", "TX", "UT", "VT", "VI", "VA", "WA", 
        "WV", "WI", "WY"
      ],
      ccSubmitError: '', // Handles response from server
      ccNumberError: '',
      ccCvcError: '',
      ccExpiryError: ''
    }
  },

  mounted()
  {
    // Style elements & styling
    window.stripe = Stripe('pk_test_0CoPbVlrcNnupYEd1fSRlrWU');
    var elements = stripe.elements();    
    var style = {
      base: {
        color: '#32325d',
        lineHeight: '24px',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '18px',
        '::placeholder': {
          color: '#aab7c4'
        }
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
      }
    };

    /*
     * Mount each card element individually so 
     * that they can be responsive and stack in mobile
     */
    
    window.cardNumber = elements.create('cardNumber', {style: style})
    window.cardCvc = elements.create('cardCvc', {style: style})
    window.cardExpiry = elements.create('cardExpiry', {style: style})
    
    window.cardNumber.mount('#cardNumber-mount');
    window.cardCvc.mount('#cardCvc-mount');
    window.cardExpiry.mount('#cardExpiry-mount');
    
    window.cardNumber.addEventListener('change', ({error}) => {      
      if (error)
      {
        this.ccNumberError = error.message
      }
      else
      {
        this.ccNumberError = ''
      }
    });

    window.cardCvc.addEventListener('change', ({error}) => {      
      if (error)
      {
        
        this.ccCvcError = error.message
      }
      else
      {
        this.ccCvcError = ''
      }
    });

    window.cardExpiry.addEventListener('change', ({error}) => {      
      if (error)
      {
        this.ccExpiryError = error.message
      }
      else
      {
        this.cardExpiryError = ''
      }
    });
  },

  computed: {

    /*
     * Holds total price in user's basket.
     * This is the sum of all crates prices
     * combined. (crate price * crate count).
     * We use this number to display in the view.
     */
    total()
    {
      var crates = this.$store.state.crates
      return Object.keys(this.$store.state.crates)
        .map(e => crates[e].price * crates[e].quantity)
        .reduce((acc,cv) => acc + cv)
    }
  },

  methods: {
    /*
     * When user is in Step 2 (shipping address),
     * only go to Step 3 if the form validates
     */
    goToStep3()
    {
      if (this.$refs.form2.validate())
      {
        this.step = 3
        return true
      }
      return false
    },

    /*
     * Filters user input in real-time, preventing
     * user from entering invalid characters.
     * For instance, inputs that are numbers 
     * only (ie, cvv), will not let a user enter a letter.
     * They are called on keyUp event of each field
     * that requires it.
     *
     * @param {String} field we want to filter
     * @param {Object} e - input event
     */
    filter(field, e)
    {
      var fields = {

        // CVVs are 3 digits
        cvv(e)
        {
          if (e.key.length == 1 && !/[0-9]+$/i.test(e.key))
          {
            e.preventDefault()
            return false
          }
        },

        /*
         * We must check if e.key is 1 char long, and if so,
         * make sure it is 0-9.
         * We need the e.key.length == 1 because special e.key
         * like 'Backspace', 'Del' will fail the 0-9 regex
         * and thus not register.
         */
        expiry(e)
        {
          if (e.key.length == 1 && !/[0-9]+$/i.test(e.key))
          {
            e.preventDefault()
            return false
          }          
        }
      }

      fields[field](e)
    },

    /*
     * Handles credit card submition form.
     */
    handleCreditCardSubmit(e)
    {
      e.preventDefault()
    
      this.isSubmitting = true
      var error = false
      var self = this
      
      if (!this.$refs.form3.validate())
      {
        console.log('didnt validate form 3')
        this.isSubmitting = false
        error = true
      }
      /* 
       * To remain PCI compliant, we pass the tokenized
       * creditcard info to the server, instead of the raw data.
       * We only tokenize the credit card info that
       * is the `card` element from Stripe. All other data
       * like email, crates, shipping, etc, remain raw.
       * NOTE that when using multiple Elements (like cardNumber,
       * cardCvc, etc) instead of just Card, we can pass any
       * of them to createToken, since they are linked.
       */
      stripe.createToken(cardNumber).then(result => {
        if (result.error)
        {
          
          
          // self.ccSubmitError = result.error.message
          this.isSubmitting = false
          error = true
        }
        
        if (!error)
        {
          /*
           * Send tokenized data, along with all other raw information
           * (shipping addr, crates, etc) to the server.
           */
         
          axios.post('/api/checkout', {
            clientState: this.$store.state,
            stripeToken: result.token
          })
          .then( response => {
            if (response.data.result == 'success')
            {
              console.log(response)
              //this.$router.replace('/checkout/complete')
            }
            this.isSubmitting = false
          })
          .catch(error => {
            console.log(error);
            this.isSubmitting = false
          });

          //this.isSubmitting = false
          
        }

      })

      // if (this.$refs.form3.validate())
      // {
      //   console.log('FORM GOOD TO GO')
      // }

      
      
      
 
      // axios.post('/api/checkout', {
      //   clientState: this.$store.state,
      // })
      // .then( response => {
      //   if (response.data.result == 'success')
      //   {
      //     this.$router.replace('/checkout/complete')
      //   }
      //   this.isSubmitting = false
      // })
      // .catch(error => {
      //   console.log(error);
      //   this.isSubmitting = false
      // });

      
    }
  }
}
</script>

<style lang='stylus'>
@import '~assets/css/variables'

  
#cc-errors
  display none

.stepper__wrapper > div
  font-size 1.3em

.card.payment-option
  //border 3px solid #eee
  height 100%!important
  
  &:hover
    border-color #999

.payment-icons
  text-align center
  display none
  img
    display inline-block
    margin-left 10px
  
 
.pay-button
  div
    font-size 1.3em
    i
      font-size 20px
      margin-right 5px


.summary
  font-size 1em
  background rgba(228, 227, 227, 0.2)
  padding 1em 2em
  border-radius 5px
  color #444
  & > div
    margin-bottom 1.4em
  h5
    font-size 1.2em
    font-weight bold
    //border-bottom 1px solid #ccc
    text-align  center
    margin-bottom 1em
  h6
    font-size 1em
    margin-bottom 7px
    font-weight bold
    
  
  .summary-items
    line-height 32px
  .input-group
    padding-top 0
  
  input
    border-bottom 1px solid #ccc
    padding 0 10px
    max-width 55px
    text-align center
    margin 0 5px
    color $blue
    line-height 15px
    font-size 1.2em



.input-error
  color #ff5252


.checkout-stepper.stepper.stepper--is-booted
  box-shadow none
</style>