refactor: use checkout form builder and add preview mode to fulfilmen…

…t components

Signed-off-by: Sam Poyigi <[email protected]>

resources/js/checkout.js

@@ -84,15 +84,15 @@
                 name = $el.attr('name'),
                 type = $el.attr('type');
 
-            if (!name.length || name.startsWith('form.')) return;
+            if (!name.length || name.startsWith('fields.')) return;
 
             if (['radio', 'checkbox'].indexOf(type) !== -1 && !$el.prop('checked')) return;
 
             paymentFields[name] = $el.val();
         });
 
         if ((checkoutComponent = Livewire.find(checkoutComponentId)) && Object.keys(paymentFields).length) {
-            checkoutComponent.$set('form.payment_fields', paymentFields, false)
+            checkoutComponent.$set('fields.payment_fields', paymentFields, false)
         }
     }
 

resources/js/fulfillment.js

@@ -10,7 +10,7 @@ window.OrangeFulfillment = (timeslot) => {
             this.orderTime = this.$wire.get('orderTime');
 
             this.hideDeliveryAddress = this.$wire.get('orderType') !== 'delivery';
-            this.showTimePicker = this.$wire.get('isAsap') == 0;
+            this.showTimePicker = !this.$wire.get('previewMode') && this.$wire.get('isAsap') == 0;
 
             this.$wire.$watch('orderDate', value => {
                 this.orderDate = value;

resources/lang/en/default.php

@@ -45,6 +45,7 @@
     'text_customer' => 'Customer',
     'text_guest' => 'Guest',
     'text_login' => 'Log In',
+    'text_no_delivery_address' => 'No delivery address provided',
     'text_register' => 'Register <small>It\'s easy and always will be.</small>',
     'text_forgot' => 'Forgot password?',
 
@@ -145,6 +146,11 @@
 
     'help_security' => 'Choose who can access this page',
 
+    'alert_preview_mode' => 'Action not allowed in preview mode',
+
+    'error_telephone_required' => 'Telephone number is required',
+    'error_telephone_invalid' => 'Telephone number is invalid',
+
     'contact' => [
         'text_heading' => 'Contact',
         'text_summary' => 'Feel free to send a message',

resources/models/checkoutfields.php

@@ -0,0 +1,74 @@
+<?php
+
+use Igniter\User\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+return [
+    'fields' => [
+        'first_name' => [
+            'label' => 'lang:igniter.cart::default.checkout.label_first_name',
+            'tab' => 'details',
+            'type' => 'text',
+        ],
+        'last_name' => [
+            'label' => 'lang:igniter.cart::default.checkout.label_last_name',
+            'tab' => 'details',
+            'type' => 'text',
+        ],
+        'email' => [
+            'label' => 'lang:igniter.cart::default.checkout.label_email',
+            'tab' => 'details',
+            'type' => 'email',
+        ],
+        'telephone' => [
+            'label' => 'lang:igniter.cart::default.checkout.label_telephone',
+            'tab' => 'details',
+            'type' => 'telephone',
+        ],
+        'comment' => [
+            'label' => 'lang:igniter.cart::default.checkout.label_comment',
+            'tab' => 'comments',
+            'type' => 'textarea',
+            'cssClass' => 'col-sm-12',
+        ],
+        'delivery_comment' => [
+            'label' => 'lang:igniter.cart::default.checkout.label_delivery_comment',
+            'tab' => 'comments',
+            'type' => 'textarea',
+            'cssClass' => 'col-sm-12',
+        ],
+        'payment' => [
+            'label' => 'lang:igniter.cart::default.checkout.label_payment_method',
+            'tab' => 'payments',
+            'type' => 'payments',
+            'cssClass' => 'col-sm-12',
+        ],
+        'termsAgreed' => [
+            'label' => 'lang:igniter.cart::default.checkout.text_checkout_terms',
+            'tab' => 'terms',
+            'type' => 'checkbox',
+            'cssClass' => 'col-sm-12',
+            'options' => [],
+        ],
+    ],
+    'rules' => [
+        'first_name' => ['required', 'between:1,48'],
+        'last_name' => ['required', 'between:1,48'],
+        'email' => ['sometimes', 'required', 'email:filter', 'max:96',
+            Rule::unique('customers', 'email')->ignore(Auth::customer()?->getKey(), 'customer_id')
+        ],
+        'telephone' => ['sometimes', 'required_if:telephoneIsRequired,true', 'regex:/^([0-9\s\-\+\(\)]*)$/i'],
+        'comment' => ['max:500'],
+        'delivery_comment' => ['max:500'],
+        'payment' => ['sometimes', 'nullable', 'alpha_dash'],
+        'termsAgreed' => ['sometimes', 'accepted'],
+        'payment_fields' => ['sometimes', 'array'],
+        'payment_fields.*' => ['sometimes'],
+        'payment_fields.pay_from_profile' => ['sometimes', 'integer'],
+        'payment_fields.create_payment_profile' => ['sometimes', 'integer'],
+    ],
+    'messages' => [
+        'telephone.required_if' => lang('igniter.orange::default.error_telephone_required'),
+        'telephone.regex' => lang('igniter.orange::default.error_telephone_invalid'),
+    ],
+];

resources/views/components/forms/telephone.blade.php

@@ -18,7 +18,6 @@
     id="hidden-{{$id}}"
     value="{{$number}}"
 />
-<x-igniter-orange::forms.error field="{{$field}}" id="{{$id}}Feedback" class="text-danger"/>
 @script
 <script>
     const telephoneInput = document.querySelector('#hidden-{{$id}}');

resources/views/components/fulfillment.blade.php

@@ -25,10 +25,12 @@
         @endif
           
     </div>
-    <a
-        role="button"
-        class="small text-primary"
-        data-bs-toggle="modal"
-        data-bs-target="#fulfillmentModal"
-    >@lang('igniter.local::default.search.text_change')</a>
+    @unless($previewMode)
+        <a
+            role="button"
+            class="small text-primary"
+            data-bs-toggle="modal"
+            data-bs-target="#fulfillmentModal"
+        >@lang('igniter.local::default.search.text_change')</a>
+    @endunless
 </div>

resources/views/includes/checkout/delivery-address.blade.php

@@ -0,0 +1,14 @@
+<div class="mt-2 pt-2 border-top fs-6">
+    @php($deliveryAddress = array_filter(array_only($fields, ['address_1', 'city', 'state', 'postcode'])))
+    <i class="fas fa-location-dot me-2"></i>
+    @if($deliveryAddress)
+        {{ html(format_address($deliveryAddress, false)) }}
+    @else
+        @lang('igniter.orange::default.text_no_delivery_address')
+    @endif
+</div>
+<x-igniter-orange::forms.error
+    field="delivery_address"
+    id="delivery-address-feedback"
+    class="text-danger"
+/>