Mon Sep 04 2017
Copied to clipboard! Copy reply
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403
  • 404
  • 405
  • 406
  • 407
  • 408
  • 409
  • 410
  • 411
  • 412
  • 413
  • 414
  • 415
  • 416
  • 417
  • 418
  • 419
  • 420
  • 421
  • 422
  • 423
  • 424
  • 425
  • 426
  • 427
  • 428
  • 429
  • 430
  • 431
  • 432
  • 433
  • 434
  • 435
  • 436
  • 437
  • 438
  • 439
  • 440
  • 441
  • 442
  • 443
  • 444
  • 445
  • 446
  • 447
  • 448
  • 449
  • 450
  • 451
  • 452
  • 453
  • 454
<template>

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

              <v-divider></v-divider>

              <v-stepper-step step="2" :complete="e1 > 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 free of charge.
                </p>
                <p>
                  If you enter your guest's name, the crate will say "Welcome, <i>Guest.</i>"
                </p>
              </div>
              <v-btn primary @click.native="e1 = 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-layout row>          
                  <v-card flat>
                    <v-card-text>
                      <v-text-field    
                        label="Name"
                        v-model='shipping.name'
                        class="input-group">            
                      </v-text-field>
                    </v-card-text>
                  </v-card>        
                </v-layout>

                <v-layout row-sm column child-flex-sm>          
                  <v-card flat>
                    <v-card-text>
                      <v-text-field    
                        label="Address"
                        v-model='shipping.address'
                        :rules="[rules.required, rules.shippingAddress]"
                        class="input-group">            
                      </v-text-field>
                    </v-card-text>
                  </v-card>
                   <v-card flat>
                    <v-card-text>
                      <v-text-field    
                        label="City"
                        v-model='shipping.city'
                        :rules="[rules.required, rules.shippingCity]"
                        class="input-group">            
                      </v-text-field>
                    </v-card-text>
                  </v-card>       
                  <v-card flat>
                    <v-card-text>
                      <v-text-field    
                        label="State"
                        v-model='shipping.state'
                        :rules="[rules.required]"
                        class="input-group">            
                      </v-text-field>
                    </v-card-text>
                  </v-card>        
                   <v-card flat>
                    <v-card-text>
                      <v-text-field    
                        label="Zip"
                        v-model='shipping.zip'
                        :rules="[rules.required, rules.zip]"
                        class="input-group">            
                      </v-text-field>
                    </v-card-text>
                  </v-card>        
                </v-layout>
              </div>
              <v-btn  accent @click.native="e1 = 1">Back</v-btn>
              <v-btn primary @click.native="e1 = 3">Continue</v-btn>
            </v-stepper-content>

            <v-stepper-content step="3">
              <v-form ref='form'>
              <!-- <h5>Choose a payment method</h5>    -->  
              <v-layout row-sm column>

                <!--  cc -->
                <v-flex  order-xs3 order-sm1>
                  <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="">
                        </v-card-text>
                      </v-card>

                      <!-- cc name -->
                      <v-card flat>
                        <v-card-text>
                          <v-text-field    
                            label="Name on Card"
                            :rules="rules.name"
                            v-model='creditCard.name'
                            class="input-group">            
                          </v-text-field>
                        </v-card-text>
                      </v-card>

                      <!-- cc number -->
                      <v-card flat>
                        <v-card-text>
                          <v-text-field
                            label="Card Number"
                            v-model='creditCard.number'
                            :rules="rules.ccNumber"
                            class="input-group">            
                          </v-text-field>
                        </v-card-text>
                      </v-card>
                       
                      <v-layout row wrap>
                        <!-- exp -->
                        <v-flex xs12 sm4 md4>
                          <v-card flat>
                            <v-card flat>
                              <v-card-text>
                                <v-text-field    
                                  label="Expiry Date"
                                  v-model='creditCard.exp'
                                  :rules="rules.ccExp"
                                  class="input-group">            
                                </v-text-field>
                              </v-card-text>
                            </v-card>
                          </v-card>
                        </v-flex>

                        <!-- billing zip -->
                        <v-flex xs12 sm4 md4>
                          <v-card flat>
                            <v-card flat>
                              <v-card-text>
                                <v-text-field
                                  required
                                  label="Billing Zip"
                                  v-model='creditCard.zip'
                                  :rules="rules.zip"
                                  class="input-group">            
                                </v-text-field>
                              </v-card-text>
                            </v-card>
                          </v-card>
                        </v-flex>

                        <!-- cvv -->
                        <v-flex xs12 sm4 md4>
                          <v-card flat>
                            <v-card-text>
                              <v-text-field    
                                label="Security Code"
                                v-model='creditCard.security'
                                :rules="rules.ccSecurityCode"
                                class="input-group">            
                              </v-text-field>
                            </v-card-text>
                          </v-card> 
                        </v-flex>   
                      </v-layout>                       

                      <!-- email -->
                      <v-card flat>
                        <v-card-text>
                          <v-text-field
                            label='Your e-mail'
                            :rules="rules.email"
                            v-model='email'
                            persistent-hint
                            hint="We need this to send you the receipt.">
                            </v-text-field>
                        </v-card-text>
                      </v-card>
                        
                        <!-- :loading='isSubmitting' -->
                        <v-btn
                          block
                          primary
                          large
                          @click='handleCreditCardSubmit'
                          class="pay-button">
                          <v-icon left dark>lock</v-icon>
                          PAY ${{total}}
                        </v-btn>

                      </v-card-text>
                    </v-card>
                  </v-flex>
                  <!-- /cc -->
                  
                  <!-- Paypal -->
                  <!-- <v-flex  order-xs1>
                    <v-card  flat class="ma-1 payment-option" order-xs1 order-sm2>
                      <v-card-text>
                        <img class='paypal' src="https://ee-screenshots.s3.amazonaws.com/2016/08/paypal-express-checkout-logo.png" alt="">
                      </v-card-text>
                    </v-card>
                  </v-flex> -->
                  <!-- /paypal -->
                  
                </v-layout>
                
                <!-- <v-card-text>
                  <v-alert error value="true">
                    Sorry, an error occurred while processing your payment.
                  </v-alert>
                </v-card-text> -->


                <v-card-text>
                  <v-btn accent @click.native="e1 = 2"> Back</v-btn>
                </v-card-text>
              
              </v-layout>
              </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 {
      e1: 0,
   
      isSubmitting: false,
      guestName: '',
      email: '',
      shipping: {
        name: null,
        address: null,
        address2: null,
        city: null,
        state: null,
        zip: null,
        country: 'us'
      },
      creditCard: {
        name: '',
        number: '',
        exp: '',
        security: '',
        zip: '',
        country: 'us'
      },
      rules: {
        email: [
          v => !!v || 'E-mail is required',
          v => isEmail(v) || 'This e-mail is not valid'
        ],
        name: [
          v => !!v || 'Name is required',
        ],
        zip: [
          v => !!v || 'Zip code is required',
          v => /[0-9a-zA-Z]+/i.test(v) || 'Enter a valid zip code'
        ],
        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'
        ]

      }
    }
  },

  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: {
    /*
     * Filters user input instantly, 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 (/[0-9]/.test(e.target.value))
          {
            e.preventDefault()
            return false
          }
        }
      }
    },

    /*
     * Handles credit card submition form.
     */
    handleCreditCardSubmit(e)
    {

      this.$refs.form.validate()

      
      /*this.isSubmitting = true
      return
 
      axios.post('/api/checkout', {
        guestName: this.guestName,
        shipping: this.shipping,
        crates: this.$store.state.crates, //[{name: 'smiley crate', quantity: 2}],
        paymentMethod: {type: 'credit card', info: this.creditCard}
      })
      .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'

  
// .stepper__header
//   background white

.stepper__wrapper > div
  font-size 1.3em

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

.checkout-stepper
  h5
    text-align center
    padding 0.7em 0

.payment-icons
  text-align center
  img
    display inline-block
    margin-left 10px
  
img.paypal
  width 50%
  display block
  margin 0 auto
  
.pay-button
  div
    font-size 1.3em
    i
      font-size 20px
      margin-right 5px
</style>