tabbit

Fri Jan 12 2018
Copied to clipboard! Copy reply
<template>

    <v-container class="container">
        <header>
          <h3>Secure Checkout</h3>
        </header>      
     
        <v-layout row wrap>

          
          <!-- Left Side -->
          <v-flex xs12 md6 >
            <v-layout class="steps" row wrap>

              <!-- Guest Name -->
              <v-flex d-flex xs12>
                <v-card v-bind:class="steps.one.mode">
                  <v-card-text>
                    <v-form ref='form-one'>
                      <div class="step-header">                        
                        <!-- title = number, title, edit -->
                        <span class='step-title'>                          
                          <div>
                            <span class="step-number">1</span>
                            Guest's name (optional)
                          </div>
                          <a v-if="steps.one.mode == 'completed-step'" @click.prevent="editStep('one')">edit</a>
                        </span>
                      </div>
                      <div class="step-content">
                        <p class="hint">
                          If given, the guest's name will be engraved on the crate.
                        </p>
                        <v-text-field   
                          placeholder="Guest's name"                          
                          class="input-group"
                          maxlength="30"
                          v-model="guestName">            
                        </v-text-field>
                        <v-btn
                          class="step-button"
                          block
                          large
                          secondary
                          @click="goToNextStep('one','two')">
                            continue
                          </v-btn>
                      </div>
                    </v-form>
                  </v-card-text>
                </v-card>
              </v-flex>


              <!-- Shipping -->
              <v-flex d-flex xs12>
                <v-card v-bind:class="steps.two.mode">
                  <v-card-text>
                    <v-form ref='form-two'>
                      <div class="step-header">                        
                        <span class='step-title'>
                          <div>
                            <span class="step-number">2</span>
                            Shipping Address
                          </div>
                          <a v-if="steps.two.mode == 'completed-step'" @click.prevent="editStep('two')">edit</a>
                        </span>                        
                      </div>
                      <div class="step-content">
                        <!-- check to see if addresses.length.if so, show dropdown.
                        if not, show form with checkbox to save addr (if logged in) -->
                        <small>
                          Tip: You could ship the crate to your property and let
                          the guest know that there is a package waiting for them
                        </small>

                        <v-card-text style="padding-bottom: 0">
                          <!-- Receipient Name -->
                          <v-text-field
                            maxlength="25"
                            label="Name"
                            v-model='$store.state.checkout.shippingAddress.name'
                            class="input-group">            
                          </v-text-field>

                          <!-- Saved Address Dropdown -->
                          <div v-if='$store.state.user.id'>                   
                            <v-select
                              :items="addresses"
                              @change='updateShippingAddress'
                              v-model='$store.state.checkout.shippingAddress.id'
                              label="Select an address"
                              item-text='street'
                              item-value='id'
                              return-object                        
                            ></v-select>
                          </div>

                          <!-- Make new address form visible -->
                          <a href='#'
                            class="toggle-form"
                            v-if='this.addresses.length'
                            @click.prevent='showAddressForm = true'>
                            or click to use a different address
                          </a>

                          <!--  New Address form -->
                          <div v-if='showAddressForm' class="new-address-form">

                            <v-text-field    
                              label="Address"
                              v-model='$store.state.checkout.shippingAddress.street'
                              :rules="rules.street"
                              required
                              class="input-group">            
                            </v-text-field>
                          
                            <v-text-field
                              label="City"
                              v-model='$store.state.checkout.shippingAddress.city'
                              :rules="rules.city"
                              required
                              class="input-group">            
                            </v-text-field>                      
                          
                            <v-select
                              :items="states"
                              :rules="rules.state"
                              v-model='$store.state.checkout.shippingAddress.state'
                              label="Select State"
                              single-line
                              required                          
                            ></v-select>                      

                            <v-text-field    
                              label="Zip"
                              v-model='$store.state.checkout.shippingAddress.zip'
                              :rules="rules.zip"
                              required
                              class="input-group">            
                            </v-text-field>

                            <v-checkbox
                              label="Save this address for future use"
                              v-if='$store.state.user.id'
                              v-model='saveAddress'>
                            </v-checkbox>
                          </div>
                        </v-card-text>
                          
                        <v-btn
                          class="step-button"
                          block
                          large
                          secondary
                          @click="goToNextStep('two','three')">
                            continue
                          </v-btn>
                      </div>
                    </v-form>
                  </v-card-text>
                </v-card>          
              </v-flex>


              <!-- Payment -->
              <v-flex d-flex xs12>
                <v-card v-bind:class="steps.three.mode">
                  <v-card-text>
                    <v-form ref='form-three'>
                      <div class="step-header">
                        <span class='step-title'>
                          <div>
                            <span class="step-number">3</span>
                            Payment
                          </div>
                          <a v-if="steps.three.mode == 'completed-step'" @click.prevent="editStep('three')">edit</a>
                        </span>                   
                      </div>
                      <div class="step-content">
                        <v-card-text v-if='cards.length'>
                           <v-select                           
                              :items="cards"
                              v-model='selectedCard'
                              label="Select a credit card"
                              item-text='value'
                              item-value='id'
                              @change="showCardForm = 'none'"
                              return-object                        
                            ></v-select>

                            <v-alert color="error" icon="warning" value="true" v-if='selectedCardError'>
                              {{ selectedCardError }}
                            </v-alert>

                            <v-btn                          
                              block
                              large
                              secondary
                              v-if='showCardForm == "none"'
                              :loading='isSubmitting'
                              :disabled='total <= 0'
                              @click.prevent="handleCreditCardSubmit('select')">
                                <v-icon left dark>lock</v-icon>                            
                                PAY ${{$store.getters.total}}
                            </v-btn>
                          
                        </v-card-text>

                        <!-- Make credit card form visible -->
                          <a href='#'
                            class="toggle-form"
                            v-if='this.cards.length'
                            @click.prevent='showCCForm'>
                            or click to use a new card
                          </a>
                        
                        <!-- Credit Card form -->
                        
                        <div v-bind:style='{ display: showCardForm }'>                         

                          <div v-if='showCardForm'>
                            <v-card-text>
                              <label>
                                <div>Credit card number</div>
                                <div id='cardNumber-mount'></div>
                                <span class="icon"><i class="material-icons">credit_card</i></span>
                              </label>
                              <div class="input-error" v-if='ccNumberError'>{{ccNumberError}}</div>
                            </v-card-text>

                            <v-card-text>
                              <label>
                                <div>Expiration</div>
                                <div id='cardExpiry-mount'></div>  
                                <div class="input-error" v-if="ccExpiryError">{{ccExpiryError}}</div>
                              </label>
                            </v-card-text>

                            <v-card-text>
                              <label>
                                <div>Security Code</div>
                                <div id='cardCvc-mount'></div>
                                <div class="input-error" v-if='ccCvcError'>{{ccCvcError}}</div>
                              </label>
                            </v-card-text>

                            <v-card-text style="padding-top: 0">
                              <v-form ref='form-three'>
                                <v-text-field
                                  label='Your e-mail'
                                  :rules="rules.email"
                                  v-model='email'
                                  required
                                  persistent-hint
                                  hint="Your receipt will be sent here">
                                </v-text-field>
                              </v-form>
                            </v-card-text>

                            <v-alert color="error" icon="warning" value="true" v-if='ccSubmitError'>
                              {{ ccSubmitError }}
                            </v-alert>

                            <v-btn
                              class="step-button"
                              block
                              large
                              :loading='isSubmitting'
                              :disabled='total <= 0'
                              secondary
                              @click.prevent="handleCreditCardSubmit('form')">
                                <v-icon left dark>lock</v-icon>                            
                                PAY ${{$store.getters.total}}
                            </v-btn>
                          
                          </div>
                        </div>                    

                        
                      </div>
                    </v-form>
                  </v-card-text>
                </v-card>
              </v-flex>              

            </v-layout>         
          </v-flex>


          <!-- Right side -->
          <v-flex xs12 md5 offset-md1 class="summary">
            <v-card>
              <v-card-text>
                <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
                      -->
                      <input type="number" min='0' max='9' v-model='$store.state.crates[key].quantity' @change="updateCrate(crate, key)"> {{key}} crate
                    </div>
                  </div>                          
                </div>

                <div class="summary-premium">
                  <v-switch label="Use Premium crates?"                               
                    v-model="usePremium"
                    color="primary"
                    hide-details>  
                  </v-switch>
                </div>    

                <div class="summary-shipping">
                  <div>
                    <h6>Shipping to:</h6>
                  </div>
                  <div v-if='$store.state.checkout.shippingAddress.name'>
                    {{ $store.state.checkout.shippingAddress.name }}
                  </div>
                  <div v-if='$store.state.checkout.shippingAddress.street'>
                    {{ $store.state.checkout.shippingAddress.street }}
                  </div>
                  <div v-if='$store.state.checkout.shippingAddress.city'>
                    {{ $store.state.checkout.shippingAddress.city }}
                    <span v-if='$store.state.checkout.shippingAddress.state'>,</span>&nbsp;
                    {{ $store.state.checkout.shippingAddress.state }}&nbsp;
                    {{ $store.state.checkout.shippingAddress.zip }}
                  </div>
                  <div class="address-check">Please make sure shipping address above is correct</div>
                </div>
              </v-card-text>
            </v-card>
          </v-flex>

        </v-layout>
          
             
    </v-container>

</template>

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

export default {
  layout: 'default',
  data ()
  {
    return {
      email: this.$store.state.user.email || '',
      addresses: [],
      cards: [],
      // If user checks checkbox to save address in list (logged in only)
      saveAddress: false,
      isSubmitting: false,

      // Card dropdown. Error will show if user submits and `selectCard` is null,
      // which means a card wasn't selected from the dropdown
      selectedCard: null,
      selectedCardError: null,

      guestName: '', 
      showAddressForm: false,
      showCardForm: this.$store.state.user.id ? 'none' : 'block',
      // Initial step states. 
      steps: {
        "one": {
          mode: 'active-step'
        },
        "two": {
          mode: 'inactive-step'
        },
        "three": {
          mode: 'inactive-step'
        },
      },
      
      // Applied when user focus and leaves a field, or submits form.
      rules: {
        email: [
          v => !!v || 'E-mail is required for receipt.',
          v => isEmail(v) || 'This e-mail is not valid'
        ],
        name: [
          v => !!v || 'Name is required',
        ],
        street: [
          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 => isAlpha(v) && isLength(v, { min: 2, max: 2 }) || 'Use 2 letters', 
        ]
        
      },
      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: null, // Handles response from server
      ccNumberError: '',
      ccCvcError: '',
      ccExpiryError: ''
    }
  },

  async mounted()
  {
    // Stripe element 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',
        background: 'none',
        boxShadow: 'none',
        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.ccExpiryError = ''
      }
    });

    // Fetch user's addresses * credit cards if logged in
    if (this.$store.state.user.id)
    {
      try {
        const req = await axios({
          method: 'get',
          url: `${window.api}/user/addresses`,
          headers: {'Authorization': `Bearer ${this.$store.state.user.token}`}          
        })
        
        if (req.data.payload.addresses.length)
        {     
          this.addresses = req.data.payload.addresses         
        }
        else
        {
          this.showAddressForm = true
        }
      }
      catch (e) { }

      try {
        const req = await axios({
          method: 'get',
          url: `${window.api}/user/cards`,
          headers: {'Authorization': `Bearer ${this.$store.state.user.token}`}
        })
        
        if (req.data.payload.cards.length)
        {     
          this.cards = req.data.payload.cards.map( o => {
            return {id: o.id, value: `${o.brand} ending in ${o.last4}`}
          })
        }
        else
        {
          this.showCardForm = true
        }
      }
      catch (e) { }

    }
    else
    {
      // User is not logged in. Show address form
      this.showAddressForm = true
    }
  },

  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)
    },

    usePremium: {
      get ()
      {
        return this.$store.state.checkout.premium
      },
      set (v)
      {
        var state = {...this.$store.state}
        state.checkout.premium = v
        this.$store.dispatch('hydrateState', state)
      }
    }
  },

  methods: {
    
    /*
     * User has the option to change crate quantity
     * on the right side of checkout page.
     * 
     * @param {obj} crate - the crate object
     * @param {String} key - the name of the crate
     */

    updateCrate (crate, key)
    {      
      this.$store.dispatch('updateCrate', {
        crate: key,
        quantity: crate.quantity < 0 ? 0 : crate.quantity
      })
    },


    /*
     * Will show the new credit card form.
     * When showing it, we reset the v-select
     * of the credit card selected
     */

    showCCForm ()
    {
      // Show the form
      this.showCardForm = 'block'

      // Reset v-select
      this.selectedCard = null

      // If there was an error from v-select, clear it.
      this.selectedCardError = null
    },

   

    /*
     * Makes a section (step) editable again when user
     * clicks the 'edit' link.
     * 
     * @param {String} stepNumber - number of the step we're editing ('one', 'two', etc)
     */

    editStep(stepNumber)
    {      
      this.steps[stepNumber].mode = 'active-step'
    },

    // We store shipping addr in Vuex store in case user navigates out
    updateShippingAddress (obj)
    {
      // TODO, maybe call directly from component, passing obj?
      this.$store.dispatch('updateShippingAddress', {
        id: obj.id,
        street: obj.street,
        city: obj.city,
        state: obj.state,
        zip: obj.zip,
        country: obj.country,
      })    
    },

  

    /*
     * Goes to next step only if form validates.
     * @param {String} formNumber - number of form ref that called this
     * @param {String} stepNumber - number of step to go to
     */
    
    goToNextStep(formNumber, stepNumber)
    {
      // Because form-two is inside a v-if,
      // it won't get checked for validation, and
      // so will always pass. To fix, show
      // the form before going to next step
      if (formNumber == 'two')
      {
        this.showAddressForm = true
      }

      // We need this tick to give vue time to render
      // if we set this.showAddressForm to true in the
      // if condition above.
      this.$nextTick(() => {      
        if (this.$refs[`form-${formNumber}`].validate())
        {        
          this.steps[formNumber].mode = 'completed-step'
          this.steps[stepNumber].mode = 'active-step'
        }
      })
    
    },



    /*
     * Handles payment submission.
     * There are two credit card button payments:
     * One for the v-select, and one for the form.
     * We validate differently depending on which.
     * If it's from the v-select, we must check that
     * there is a value for `selectedCard`
     * If it's from the form, we must verify form with Stripe.
     *
     * @param {String} which - which pay button called this. 
     *   'select' or 'form'
     */

    async handleCreditCardSubmit(which)
    {
    
      this.isSubmitting = true
      var error = false
      var self = this
      var stripeToken
      
      const postData = {
        orderData: {
          email: this.email,
          shippingAddress: this.$store.state.checkout.shippingAddress,
          crates: this.$store.state.crates,
          premium: this.$store.state.premium
        },
      }

      // User is paying with a card from the dropdown
      if (which == 'select')
      {
        console.log('VIA SELECT')
        // Show/hide error message if `selectedCard` is null (no card id)
        if (!this.selectedCard)
        {
          this.selectedCardError = 'Please select a card from the menu above'
          return
        }
        
        postData.cardId = this.selectedCard.id
        postData.stripeId = this.$store.state.user.stripeId       
        
      }

      else if (which == 'form')
      {       
        try
        {          
          var result = await stripe.createToken(cardNumber)
          postData.stripeToken = result.token                 
        }
        catch (e)
        {
          this.isSubmitting = false
          this.ccSubmitError = 'Could not charge. Please try again.'
        }

        if (!this.$refs['form-three'].validate() || !postData.stripeToken)
        {
          this.isSubmitting = false
          error = true
          console.log('WHATT')
          return
        }  
      }

      

      

      this.selectedCardError = null

      axios.post(`${window.api}/cart/checkout`, postData)
        .then( response => {
          if (response.data.result)
          {
            this.$router.replace('/checkout/complete')            
            // If save address checkbox is checked, try to save it.
            if (this.saveAddress)
            {
              this._saveAddress()
            }
          }
          else
          {
            this.ccSubmitError = response.data.payload.message
          }
          this.isSubmitting = false
        })
        .catch(error => {
          console.log('AY')
          this.isSubmitting = false
          this.ccSubmitError = 'Could not charge. Please try again.'
        })
    },
    

    /*
     * Adds the shipping address to the user's list.
     * Called when the checkbox is checked.
     */

    async _saveAddress ()
    {
      try
      {
        await axios({
          method: 'post',
          url: `${window.api}/user/address`,
          headers: {'Authorization': `Bearer ${this.$store.state.user.token}`},
          data: {
            street: this.$store.state.checkout.shippingAddress.street,
            city: this.$store.state.checkout.shippingAddress.city,
            zip: this.$store.state.checkout.shippingAddress.zip,
            state: this.$store.state.checkout.shippingAddress.state,
            country: this.$store.state.checkout.shippingAddress.country
          }
        })
      }
      catch (e)
      {

      }
    }

  }
}
</script>

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

  $steps-color = #777
  $steps-inactive-color = #999!important


  .active-step  
    .step-content
      display block

  .inactive-step
  .completed-step
    color $steps-inactive-color  
    .step-content
      display none

  .inactive-step
    background transparent!important
    box-shadow none
    border 1px solid #ccc

  .completed-step    
    .step-number    
      border-color transparent


  .toggle-form
    //background #eee
    overflow auto
    //padding 0.5em 0
    text-align center
    margin 0 auto
    display block
    border-radius 3px
    text-decoration none
    margin-bottom 1em
    font-size 80%
  
  p.hint
    font-size 80%
    color #999
    padding 0.5em  4.2em
    
  .steps
    font-size 1.2em
    
    & > div
      margin-bottom 1em
    
    .step-title
      display flex
      align-items baseline
      justify-content space-between
      font-size 120%
      a
        font-size 80%
    .step-number
      display inline-block
      border 1px solid $steps-color
      margin 0 1em 0 0
      width 2em
      height 2em
      line-height 2em
      border-radius 20px
      text-align center
      font-size 80%
    .step-content
      //padding-top 1em
      small
        display none
        font-size 65%
        color lighten($steps-color, 10%)       

    button
      margin-top 2em
    
  #cc-errors
    display none


    
  
  // .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
    .card__text > div
      margin-bottom 1.4em
    h5
      font-size 140%
      font-weight normal
      //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


  .address-check
    text-align center
    background #eeeeee29
    padding 0.2em 0
    margin-top 1.5em
    border 1px dashed #ccc


  .input-error
    color #ff5252


  label
    position: relative;
    color: #8a8a8a //#8898AA;
    display: block;
    font-weight: 300; 
  

  label span.icon 
    width: 30px;
    position: absolute;
    top: 34px;
    right: 12px;
  

</style>