From faeef9fa2b2d7d0892c29bd03e159cad6d1faa56 Mon Sep 17 00:00:00 2001
From: Sam Poyigi <6567634+sampoyigi@users.noreply.github.com>
Date: Sun, 22 Sep 2024 15:45:10 +0100
Subject: [PATCH] refactor: use checkout form builder and add preview mode to
 fulfilment components

Signed-off-by: Sam Poyigi <6567634+sampoyigi@users.noreply.github.com>
---
 resources/js/checkout.js                      |   4 +-
 resources/js/fulfillment.js                   |   2 +-
 resources/lang/en/default.php                 |   6 +
 resources/models/checkoutfields.php           |  74 ++++++
 .../components/forms/telephone.blade.php      |   1 -
 .../views/components/fulfillment.blade.php    |  14 +-
 .../checkout/address-fields.blade.php         | 129 -----------
 .../includes/checkout/comment-field.blade.php |  16 --
 .../checkout/customer-fields.blade.php        |  58 -----
 .../checkout/delivery-address.blade.php       |  14 ++
 .../checkout/delivery-comment-field.blade.php |  15 --
 .../checkout/field-checkbox.blade.php         |  33 +++
 .../includes/checkout/field-email.blade.php   |  20 ++
 ...nts.blade.php => field-payments.blade.php} |  10 +-
 .../checkout/field-telephone.blade.php        |  11 +
 .../includes/checkout/field-text.blade.php    |  20 ++
 .../checkout/field-textarea.blade.php         |  19 ++
 .../includes/checkout/one-step-form.blade.php |  21 +-
 .../includes/checkout/tab-fields.blade.php    |  10 +
 .../includes/checkout/terms-field.blade.php   |  19 --
 .../includes/checkout/two-step-form.blade.php |  29 ++-
 .../views/includes/local/timeslot.blade.php   |   2 +
 resources/views/livewire/checkout.blade.php   |   2 +-
 .../livewire/fulfillment-modal.blade.php      |  17 +-
 src/Livewire/Checkout.php                     | 212 ++++++++----------
 src/Livewire/Forms/CheckoutForm.php           |  92 --------
 src/Livewire/FulfillmentModal.php             |  17 ++
 src/View/Components/Fulfillment.php           |  14 ++
 28 files changed, 394 insertions(+), 487 deletions(-)
 create mode 100644 resources/models/checkoutfields.php
 delete mode 100644 resources/views/includes/checkout/address-fields.blade.php
 delete mode 100644 resources/views/includes/checkout/comment-field.blade.php
 delete mode 100644 resources/views/includes/checkout/customer-fields.blade.php
 create mode 100644 resources/views/includes/checkout/delivery-address.blade.php
 delete mode 100644 resources/views/includes/checkout/delivery-comment-field.blade.php
 create mode 100644 resources/views/includes/checkout/field-checkbox.blade.php
 create mode 100644 resources/views/includes/checkout/field-email.blade.php
 rename resources/views/includes/checkout/{payments.blade.php => field-payments.blade.php} (90%)
 create mode 100644 resources/views/includes/checkout/field-telephone.blade.php
 create mode 100644 resources/views/includes/checkout/field-text.blade.php
 create mode 100644 resources/views/includes/checkout/field-textarea.blade.php
 create mode 100644 resources/views/includes/checkout/tab-fields.blade.php
 delete mode 100644 resources/views/includes/checkout/terms-field.blade.php
 delete mode 100644 src/Livewire/Forms/CheckoutForm.php

diff --git a/resources/js/checkout.js b/resources/js/checkout.js
index 1101388..f58b43d 100644
--- a/resources/js/checkout.js
+++ b/resources/js/checkout.js
@@ -84,7 +84,7 @@
                 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;
 
@@ -92,7 +92,7 @@
         });
 
         if ((checkoutComponent = Livewire.find(checkoutComponentId)) && Object.keys(paymentFields).length) {
-            checkoutComponent.$set('form.payment_fields', paymentFields, false)
+            checkoutComponent.$set('fields.payment_fields', paymentFields, false)
         }
     }
 
diff --git a/resources/js/fulfillment.js b/resources/js/fulfillment.js
index 87d8685..56501ce 100644
--- a/resources/js/fulfillment.js
+++ b/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;
diff --git a/resources/lang/en/default.php b/resources/lang/en/default.php
index 1bcfd8b..cbe6eeb 100644
--- a/resources/lang/en/default.php
+++ b/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',
diff --git a/resources/models/checkoutfields.php b/resources/models/checkoutfields.php
new file mode 100644
index 0000000..3983b56
--- /dev/null
+++ b/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'),
+    ],
+];
diff --git a/resources/views/components/forms/telephone.blade.php b/resources/views/components/forms/telephone.blade.php
index 1117a6d..e30f868 100644
--- a/resources/views/components/forms/telephone.blade.php
+++ b/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}}');
diff --git a/resources/views/components/fulfillment.blade.php b/resources/views/components/fulfillment.blade.php
index ba41092..56164a3 100644
--- a/resources/views/components/fulfillment.blade.php
+++ b/resources/views/components/fulfillment.blade.php
@@ -25,10 +25,12 @@
         @endif
         &nbsp;&nbsp;
     </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>
diff --git a/resources/views/includes/checkout/address-fields.blade.php b/resources/views/includes/checkout/address-fields.blade.php
deleted file mode 100644
index fe6b9ee..0000000
--- a/resources/views/includes/checkout/address-fields.blade.php
+++ /dev/null
@@ -1,129 +0,0 @@
-<div class="p-3 pb-0">
-    @if(!count($this->customerAddresses))
-        <h5 class="fw-normal mt-2">@lang('igniter.cart::default.checkout.label_address')</h5>
-    @else
-        <div class="form-group">
-            <div class="form-floating">
-                <select
-                    wire:model.change="form.address_id"
-                    data-checkout-control="address_id"
-                    class="form-select"
-                    aria-describedby="addressIdFeedback"
-                >
-                    <option value="0">@lang('igniter.cart::default.checkout.text_address')</option>
-                    @foreach ($this->customerAddresses as $address)
-                        <option
-                            value="{{ $address->address_id }}"
-                            @checked($order->address_id == $address->address_id)
-                        >{{ $address->formatted_address }}</option>
-                    @endforeach
-                </select>
-                <label for="addressId">@lang('igniter.cart::default.checkout.text_delivery_address')</label>
-            </div>
-            <x-igniter-orange::forms.error field="form.address_id" id="addressIdFeedback" class="text-danger" />
-        </div>
-    @endif
-
-    <div>
-        <div class="row g-3 mb-1">
-            <div class="col-sm-6">
-                <div @class(['form-floating', 'is-invalid' => has_form_error('form.address_1')])>
-                    <input
-                        wire:model="form.address_1"
-                        data-checkout-control="address_1"
-                        type="text"
-                        @class(['form-control', 'is-invalid' => has_form_error('form.address_1')])
-                        placeholder="@lang('igniter.cart::default.checkout.label_address_1')"
-                        aria-describedby="addressOneFeedback"
-                        required
-                    />
-                    <label for="">@lang('igniter.cart::default.checkout.label_address_1')</label>
-                </div>
-                <x-igniter-orange::forms.error field="form.address_1" id="addressOneFeedback" class="text-danger" />
-            </div>
-            @if ($showAddress2Field)
-                <div class="col-sm-6">
-                    <div @class(['form-floating', 'is-invalid' => has_form_error('form.address_2')])>
-                        <input
-                            wire:model="form.address_2"
-                            data-checkout-control="address_2"
-                            type="text"
-                            @class(['form-control', 'is-invalid' => has_form_error('form.address_2')])
-                            placeholder="@lang('igniter.cart::default.checkout.label_address_2')"
-                            aria-describedby="addressTwoFeedback"
-                        />
-                        <label for="">@lang('igniter.cart::default.checkout.label_address_2')</label>
-                    </div>
-                    <x-igniter-orange::forms.error field="form.address_2" id="addressTwoFeedback" class="text-danger" />
-                </div>
-            @endif
-            @if ($showCityField)
-                <div class="col-sm-4">
-                    <div @class(['form-floating', 'is-invalid' => has_form_error('form.city')])>
-                        <input
-                            wire:model="form.city"
-                            data-checkout-control="city"
-                            type="text"
-                            @class(['form-control', 'is-invalid' => has_form_error('form.city')])
-                            placeholder="@lang('igniter.cart::default.checkout.label_city')"
-                            aria-describedby="cityFeedback"
-                        />
-                        <label for="">@lang('igniter.cart::default.checkout.label_city')</label>
-                    </div>
-                    <x-igniter-orange::forms.error field="form.city" id="cityFeedback" class="text-danger" />
-                </div>
-            @endif
-            @if ($showStateField)
-                <div class="col-sm-4">
-                    <div @class(['form-floating', 'is-invalid' => has_form_error('form.state')])>
-                        <input
-                            wire:model="form.state"
-                            data-checkout-control="state"
-                            type="text"
-                            @class(['form-control', 'is-invalid' => has_form_error('form.state')])
-                            placeholder="@lang('igniter.cart::default.checkout.label_state')"
-                            aria-describedby="stateFeedback"
-                        />
-                        <label for="">@lang('igniter.cart::default.checkout.label_state')</label>
-                    </div>
-                    <x-igniter-orange::forms.error field="form.state" id="stateFeedback" class="text-danger" />
-                </div>
-            @endif
-            @if ($showPostcodeField)
-                <div class="col-sm-4">
-                    <div @class(['form-floating', 'is-invalid' => has_form_error('form.postcode')])>
-                        <input
-                            wire:model="form.postcode"
-                            data-checkout-control="postcode"
-                            type="text"
-                            @class(['form-control', 'is-invalid' => has_form_error('form.postcode')])
-                            placeholder="@lang('igniter.cart::default.checkout.label_postcode')"
-                            aria-describedby="postcodeFeedback"
-                        />
-                        <label for="">@lang('igniter.cart::default.checkout.label_postcode')</label>
-                    </div>
-                    <x-igniter-orange::forms.error field="form.postcode" id="postcodeFeedback" class="text-danger" />
-                </div>
-            @endif
-            @if ($showCountryField)
-                <div @class(['form-floating', 'is-invalid' => has_form_error('form.country_id')])>
-                    <select
-                        wire:model="form.country_id"
-                        data-checkout-control="country_id"
-                        @class(['form-select', 'is-invalid' => has_form_error('form.country_id')])
-                        aria-describedby="countryFeedback"
-                    >
-                        @foreach (countries('country_name') as $key => $value)
-                            <option
-                                value="{{ $key }}"
-                                {!! ($key == $order->address['country_id']) ? 'selected="selected"' : '' !!}
-                            >{{ $value }}</option>
-                        @endforeach
-                    </select>
-                    <label for="">@lang('igniter.cart::default.checkout.label_country')</label>
-                </div>
-                <x-igniter-orange::forms.error field="form.country_id" id="countryFeedback" class="text-danger" />
-            @endif
-        </div>
-    </div>
-</div>
diff --git a/resources/views/includes/checkout/comment-field.blade.php b/resources/views/includes/checkout/comment-field.blade.php
deleted file mode 100644
index cfc59f5..0000000
--- a/resources/views/includes/checkout/comment-field.blade.php
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="mb-3">
-    <div @class(['form-floating', 'is-invalid' => has_form_error('form.comment')])>
-        <textarea
-            wire:model="form.comment"
-            data-checkout-control="comment"
-            name="comment"
-            id="comment"
-            rows="3"
-            @class(['form-control', 'is-invalid' => has_form_error('form.comment')])
-            placeholder="@lang('igniter.cart::default.checkout.label_comment')"
-            aria-describedby="commentFeedback"
-        ></textarea>
-        <label for="comment">@lang('igniter.cart::default.checkout.label_comment')</label>
-    </div>
-    <x-igniter-orange::forms.error field="form.comment" id="commentFeedback" class="text-danger"/>
-</div>
diff --git a/resources/views/includes/checkout/customer-fields.blade.php b/resources/views/includes/checkout/customer-fields.blade.php
deleted file mode 100644
index 482d5f6..0000000
--- a/resources/views/includes/checkout/customer-fields.blade.php
+++ /dev/null
@@ -1,58 +0,0 @@
-<div class="row g-3 mb-1">
-    <div class="col-sm-6">
-        <div @class(['form-floating', 'is-invalid' => has_form_error('form.first_name')])>
-            <input
-                wire:model="form.first_name"
-                data-checkout-control="first_name"
-                type="text"
-                id="firstName"
-                @class(['form-control', 'is-invalid' => has_form_error('form.first_name')])
-                placeholder="@lang('igniter.cart::default.checkout.label_first_name')"
-                aria-describedby="firstNameFeedback"
-                required
-            />
-            <label for="firstName">@lang('igniter.cart::default.checkout.label_first_name')</label>
-        </div>
-        <x-igniter-orange::forms.error field="form.first_name" id="firstNameFeedback" class="text-danger" />
-    </div>
-    <div class="col-sm-6">
-        <div @class(['form-floating', 'is-invalid' => has_form_error('form.last_name')])>
-            <input
-                wire:model="form.last_name"
-                data-checkout-control="last_name"
-                type="text"
-                id="lastName"
-                @class(['form-control', 'is-invalid' => has_form_error('form.last_name')])
-                placeholder="@lang('igniter.cart::default.checkout.label_last_name')"
-                aria-describedby="lastNameFeedback"
-                required
-            />
-            <label for="lastName">@lang('igniter.cart::default.checkout.label_last_name')</label>
-        </div>
-        <x-igniter-orange::forms.error field="form.last_name" id="lastNameFeedback" class="text-danger" />
-    </div>
-    <div class="col-sm-6">
-        <div @class(['form-floating', 'is-invalid' => has_form_error('form.email')])>
-            <input
-                wire:model="form.email"
-                data-checkout-control="email"
-                type="text"
-                id="email"
-                @class(['form-control', 'is-invalid' => has_form_error('form.email')])
-                placeholder="@lang('igniter.cart::default.checkout.label_email')"
-                aria-describedby="emailFeedback"
-                required
-            />
-            <label for="email">@lang('igniter.cart::default.checkout.label_email')</label>
-        </div>
-        <x-igniter-orange::forms.error field="form.email" id="emailFeedback" class="text-danger" />
-    </div>
-    <div class="col-sm-6">
-        <x-igniter-orange::forms.telephone
-            id="input-telephone"
-            :number="$form->telephone"
-            field="form.telephone"
-            :label="lang('igniter.user::default.settings.label_telephone')"
-        />
-    </div>
-</div>
diff --git a/resources/views/includes/checkout/delivery-address.blade.php b/resources/views/includes/checkout/delivery-address.blade.php
new file mode 100644
index 0000000..a71dc22
--- /dev/null
+++ b/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"
+/>
diff --git a/resources/views/includes/checkout/delivery-comment-field.blade.php b/resources/views/includes/checkout/delivery-comment-field.blade.php
deleted file mode 100644
index 89f8384..0000000
--- a/resources/views/includes/checkout/delivery-comment-field.blade.php
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="">
-    <div @class(['form-floating', 'is-invalid' => has_form_error('form.delivery_comment')])>
-        <textarea
-            wire:model="form.delivery_comment"
-            data-checkout-control="delivery_comment"
-            id="deliveryComment"
-            rows="3"
-            @class(['form-control', 'is-invalid' => has_form_error('form.delivery_comment')])
-            placeholder="@lang('igniter.cart::default.checkout.label_comment')"
-            aria-describedby="deliveryCommentFeedback"
-        ></textarea>
-    <label for="deliveryComment">@lang('igniter.cart::default.checkout.label_delivery_comment')</label>
-    </div>
-    <x-igniter-orange::forms.error field="form.delivery_comment" id="deliveryCommentFeedback" class="text-danger" />
-</div>
diff --git a/resources/views/includes/checkout/field-checkbox.blade.php b/resources/views/includes/checkout/field-checkbox.blade.php
new file mode 100644
index 0000000..fc5c218
--- /dev/null
+++ b/resources/views/includes/checkout/field-checkbox.blade.php
@@ -0,0 +1,33 @@
+@php
+    $fieldOptions = $field->options();
+    $checkedValues = (array)$field->value;
+@endphp
+<div class="p-3">
+    <div class="form-group">
+        <input
+            type="hidden"
+            wire:model="{{$field->getName()}}"
+            value="0"
+        />
+        <div
+            id="{{$field->getId()}}"
+            @class(['form-check', 'form-check-inline' => $field->placeholder])
+        >
+            <input
+                wire:model="{{$field->getName()}}"
+                data-checkout-control="{{$field->fieldName}}"
+                type="checkbox"
+                class="form-check-input"
+                id="{{$field->getId()}}"
+                name="{{$field->getName()}}"
+                value="1"
+                aria-describedby="{{$field->getName()}}-feedback"
+            >
+            @if($field->placeholder)
+                <label class="form-check-label ms-2" for="{{ $field->getId() }}">@lang($field->placeholder)</label>
+            @endif
+        </div>
+        <x-igniter-orange::forms.error field="{{$field->getName()}}" id="{{$field->getName()}}-feedback"
+            class="text-danger"/>
+    </div>
+</div>
diff --git a/resources/views/includes/checkout/field-email.blade.php b/resources/views/includes/checkout/field-email.blade.php
new file mode 100644
index 0000000..9343b0a
--- /dev/null
+++ b/resources/views/includes/checkout/field-email.blade.php
@@ -0,0 +1,20 @@
+<div @class(['form-floating', 'is-invalid' => has_form_error($field->getName())])>
+    <input
+        wire:model="{{$field->getName()}}"
+        data-checkout-control="{{$field->fieldName}}"
+        type="email"
+        id="{{$field->getId()}}"
+        @class(['form-control', 'is-invalid' => has_form_error($field->getName())])
+        placeholder="{{ $field->placeholder }}"
+        aria-describedby="{{$field->getId()}}-feedback"
+        autocomplete="off"
+        {!! $field->hasAttribute('maxlength') ? '' : 'maxlength="255"' !!}
+        {!! $field->getAttributes() !!}
+    />
+    <label for="{{$field->getId()}}">@lang($field->label)</label>
+</div>
+<x-igniter-orange::forms.error
+    field="{{$field->getName()}}"
+    id="{{$field->getId()}}-feedback"
+    class="text-danger"
+/>
diff --git a/resources/views/includes/checkout/payments.blade.php b/resources/views/includes/checkout/field-payments.blade.php
similarity index 90%
rename from resources/views/includes/checkout/payments.blade.php
rename to resources/views/includes/checkout/field-payments.blade.php
index 86e8b8d..1bba293 100644
--- a/resources/views/includes/checkout/payments.blade.php
+++ b/resources/views/includes/checkout/field-payments.blade.php
@@ -1,10 +1,10 @@
 <div class="px-3">
-    <h5 class="fw-normal mb-2">@lang('igniter.cart::default.checkout.label_payment_method')</h5>
+    <h5 class="fw-normal mb-2">@lang($field->label)</h5>
     <div data-toggle="payments" class="progress-indicator-container">
         <div class="list-group list-group-flush p-3 border rounded">
             @foreach ($this->paymentGateways as $paymentMethod)
                 @php
-                    $paymentIsSelected = ($this->form->payment == $paymentMethod->code);
+                    $paymentIsSelected = ($field->value == $paymentMethod->code);
                     $paymentIsNotApplicable = !$paymentMethod->isApplicable($order->order_total, $paymentMethod);
                 @endphp
                 <div
@@ -13,11 +13,11 @@
                 >
                     <div class="form-check">
                         <input
-                            data-checkout-control="payment"
+                            data-checkout-control="{{$field->fieldName}}"
                             data-payment-code="{{ $paymentMethod->code }}"
                             data-pre-validate-checkout="{{ $paymentMethod->completesPaymentOnClient() ? 'true' : 'false' }}"
                             type="radio"
-                            name="form.payment"
+                            name="{{$field->getName()}}"
                             id="payment-{{ $paymentMethod->code }}"
                             class="form-check-input"
                             value="{{ $paymentMethod->code }}"
@@ -67,5 +67,5 @@ class="form-check-label ms-2 d-block"
             @endforeach
         </div>
     </div>
-    <x-igniter-orange::forms.error field="form.payment" id="paymentFeedback" class="text-danger"/>
+    <x-igniter-orange::forms.error field="{{$field->getName()}}" id="{{$field->getName()}}-feedback" class="text-danger"/>
 </div>
diff --git a/resources/views/includes/checkout/field-telephone.blade.php b/resources/views/includes/checkout/field-telephone.blade.php
new file mode 100644
index 0000000..e830602
--- /dev/null
+++ b/resources/views/includes/checkout/field-telephone.blade.php
@@ -0,0 +1,11 @@
+<x-igniter-orange::forms.telephone
+    id="input-telephone"
+    :number="$field->value"
+    field="{{$field->getName()}}"
+    :label="lang($field->label)"
+/>
+<x-igniter-orange::forms.error
+    field="{{$field->getName()}}"
+    id="{{$field->getId()}}-feedback"
+    class="text-danger"
+/>
diff --git a/resources/views/includes/checkout/field-text.blade.php b/resources/views/includes/checkout/field-text.blade.php
new file mode 100644
index 0000000..18593c5
--- /dev/null
+++ b/resources/views/includes/checkout/field-text.blade.php
@@ -0,0 +1,20 @@
+<div @class(['form-floating', 'is-invalid' => has_form_error($field->getName())])>
+    <input
+        wire:model="{{$field->getName()}}"
+        data-checkout-control="{{$field->fieldName}}"
+        type="text"
+        id="{{$field->getId()}}"
+        @class(['form-control', 'is-invalid' => has_form_error($field->getName())])
+        placeholder="{{ $field->placeholder }}"
+        aria-describedby="{{$field->getId()}}-feedback"
+        autocomplete="off"
+        {!! $field->hasAttribute('maxlength') ? '' : 'maxlength="255"' !!}
+        {!! $field->getAttributes() !!}
+    />
+    <label for="{{$field->getId()}}">@lang($field->label)</label>
+</div>
+<x-igniter-orange::forms.error
+    field="{{$field->getName()}}"
+    id="{{$field->getId()}}-feedback"
+    class="text-danger"
+/>
diff --git a/resources/views/includes/checkout/field-textarea.blade.php b/resources/views/includes/checkout/field-textarea.blade.php
new file mode 100644
index 0000000..7eab45b
--- /dev/null
+++ b/resources/views/includes/checkout/field-textarea.blade.php
@@ -0,0 +1,19 @@
+<div @class(['form-floating', 'is-invalid' => has_form_error($field->getName())])>
+    <textarea
+        wire:model="{{$field->getName()}}"
+        data-checkout-control="{{$field->fieldName}}"
+        name="{{$field->getName()}}"
+        id="{{$field->getId()}}"
+        autocomplete="off"
+        @class(['form-control', 'is-invalid' => has_form_error($field->getName())])
+        placeholder="{{ $field->placeholder }}"
+        aria-describedby="{{$field->getId()}}-feedback"
+        {!! $field->getAttributes() !!}
+    >{{ $field->value }}</textarea>
+    <label for="{{$field->getId()}}">@lang($field->label)</label>
+</div>
+<x-igniter-orange::forms.error
+    field="{{$field->getName()}}"
+    id="{{$field->getId()}}-feedback"
+    class="text-danger"
+/>
diff --git a/resources/views/includes/checkout/one-step-form.blade.php b/resources/views/includes/checkout/one-step-form.blade.php
index 65ee3a5..a351008 100644
--- a/resources/views/includes/checkout/one-step-form.blade.php
+++ b/resources/views/includes/checkout/one-step-form.blade.php
@@ -1,25 +1,32 @@
 <x-igniter-orange::forms.form id="checkout-form" novalidate>
     <div class="p-3">
         <h5 class="fw-normal">@lang('igniter.orange::default.label_your_details')</h5>
-        @include('igniter-orange::includes.checkout.customer-fields')
+        @include('igniter-orange::includes.checkout.tab-fields', [
+            'fields' => $this->formTabFields('details'),
+        ])
     </div>
 
     <div class="px-3 fs-5">
         <div class="p-3 border rounded">
             <x-igniter-orange::fulfillment/>
+
+            @includeWhen($order->isDeliveryType(), 'igniter-orange::includes.checkout.delivery-address')
         </div>
     </div>
 
-    @includeWhen($order->isDeliveryType(), 'igniter-orange::includes.checkout.address-fields')
-
     <div class="p-3">
-        @includeWhen($showCommentField, 'igniter-orange::includes.checkout.comment-field')
-        @includeWhen($order->isDeliveryType() && $showDeliveryCommentField, 'igniter-orange::includes.checkout.delivery-comment-field')
+        @include('igniter-orange::includes.checkout.tab-fields', [
+            'fields' => $this->formTabFields('comments'),
+        ])
     </div>
 
-    @includeWhen($this->paymentGateways->isNotEmpty(), 'igniter-orange::includes.checkout.payments')
+    @include('igniter-orange::includes.checkout.tab-fields', [
+        'fields' => $this->formTabFields('payments'),
+    ])
 
-    @includeWhen($agreeTermsSlug, 'igniter-orange::includes.checkout.terms-field')
+    @include('igniter-orange::includes.checkout.tab-fields', [
+        'fields' => $this->formTabFields('terms'),
+    ])
 
     <div class="p-3">
         <button
diff --git a/resources/views/includes/checkout/tab-fields.blade.php b/resources/views/includes/checkout/tab-fields.blade.php
new file mode 100644
index 0000000..56669c9
--- /dev/null
+++ b/resources/views/includes/checkout/tab-fields.blade.php
@@ -0,0 +1,10 @@
+<div class="row g-3 mb-1">
+    @foreach ($fields as $field)
+        <div @class(['col-sm-6', $field->cssClass])>
+            @include('igniter-orange::includes.checkout.field-'.$field->type, [
+                'field' => $field,
+                'orderModel' => $order,
+            ])
+        </div>
+    @endforeach
+</div>
diff --git a/resources/views/includes/checkout/terms-field.blade.php b/resources/views/includes/checkout/terms-field.blade.php
deleted file mode 100644
index 50bd9fb..0000000
--- a/resources/views/includes/checkout/terms-field.blade.php
+++ /dev/null
@@ -1,19 +0,0 @@
-<div class="p-3">
-    <div class="form-group">
-        <div class="form-check">
-            <input
-                wire:model="form.termsAgreed"
-                data-checkout-control="termsAgreed"
-                id="terms-condition"
-                type="checkbox"
-                value="1"
-                class="form-check-input"
-                aria-describedby="termsAgreedFeedback"
-            >
-            <label class="form-check-label ms-2" for="terms-condition">
-                {!! sprintf(lang('igniter.cart::default.checkout.label_terms'), url($agreeTermsSlug)) !!}
-            </label>
-        </div>
-        <x-igniter-orange::forms.error field="form.termsAgreed" id="termsAgreedFeedback" class="text-danger" />
-    </div>
-</div>
diff --git a/resources/views/includes/checkout/two-step-form.blade.php b/resources/views/includes/checkout/two-step-form.blade.php
index 00883b1..b93bbca 100644
--- a/resources/views/includes/checkout/two-step-form.blade.php
+++ b/resources/views/includes/checkout/two-step-form.blade.php
@@ -1,30 +1,41 @@
-<x-igniter-orange::forms.form wire:submit="onConfirm" id="checkout-form" novalidate>
+<x-igniter-orange::forms.form id="checkout-form" novalidate>
     @if ($checkoutStep !== $this::STEP_PAY)
         <input type="hidden" wire:model.fill="form.checkoutStep" name="checkoutStep" value="{{$this::STEP_PAY}}">
         <div class="p-3">
             <h5 class="fw-normal">@lang('igniter.orange::default.label_your_details')</h5>
-            @include('igniter-orange::includes.checkout.customer-fields')
+            @include('igniter-orange::includes.checkout.tab-fields', [
+                'fields' => $this->formTabFields('details'),
+            ])
         </div>
 
         <div class="px-3 fs-5">
             <div class="p-3 border rounded">
                 <x-igniter-orange::fulfillment/>
+
+                @includeWhen($order->isDeliveryType(), 'igniter-orange::includes.checkout.delivery-address')
             </div>
         </div>
 
-        @includeWhen($order->isDeliveryType(), 'igniter-orange::includes.checkout.address-fields')
-
-        @includeWhen($showCommentField, 'igniter-orange::includes.checkout.comment-field')
-
-        @includeWhen($order->isDeliveryType() && $showDeliveryCommentField, 'igniter-orange::includes.checkout.delivery-comment-field')
+        <div class="p-3">
+            @include('igniter-orange::includes.checkout.tab-fields', [
+                'fields' => $this->formTabFields('comments'),
+            ])
+        </div>
     @else
-        @includeWhen($this->paymentGateways->isNotEmpty(), 'igniter-orange::includes.checkout.payments')
+        <div class="py-3">
+            @include('igniter-orange::includes.checkout.tab-fields', [
+                'fields' => $this->formTabFields('payments'),
+            ])
+        </div>
 
-        @includeWhen($agreeTermsSlug, 'igniter-orange::includes.checkout.terms-field')
+        @include('igniter-orange::includes.checkout.tab-fields', [
+            'fields' => $this->formTabFields('terms'),
+        ])
     @endif
 
     <div class="p-3">
         <button
+            wire:loading.class="disabled"
             data-checkout-control="submit"
             type="submit"
             class="btn btn-primary w-100 btn-lg"
diff --git a/resources/views/includes/local/timeslot.blade.php b/resources/views/includes/local/timeslot.blade.php
index 838e7c7..b61ddea 100644
--- a/resources/views/includes/local/timeslot.blade.php
+++ b/resources/views/includes/local/timeslot.blade.php
@@ -7,6 +7,7 @@
         class="form-check-input"
         value="1"
         @checked($isAsap)
+        @disabled($previewMode)
     />
     <label
         class="form-check-label text-wrap ms-2 d-block"
@@ -22,6 +23,7 @@ class="form-check-label text-wrap ms-2 d-block"
         class="form-check-input"
         value="0"
         @checked(!$isAsap)
+        @disabled($previewMode)
     />
     <label
         class="form-check-label text-wrap ms-2 d-block"
diff --git a/resources/views/livewire/checkout.blade.php b/resources/views/livewire/checkout.blade.php
index 6055265..b1e55f2 100644
--- a/resources/views/livewire/checkout.blade.php
+++ b/resources/views/livewire/checkout.blade.php
@@ -14,7 +14,7 @@
             <div
                 data-control="checkout"
                 data-partial="checkoutForm"
-                data-payment-input-name="form.payment"
+                data-payment-input-name="fields.payment"
                 data-validate-event="checkout::validate"
                 data-confirm-event="checkout::confirm"
                 data-choose-payment-event="checkout::choose-payment"
diff --git a/resources/views/livewire/fulfillment-modal.blade.php b/resources/views/livewire/fulfillment-modal.blade.php
index f931a15..67a6de1 100644
--- a/resources/views/livewire/fulfillment-modal.blade.php
+++ b/resources/views/livewire/fulfillment-modal.blade.php
@@ -28,6 +28,7 @@
                                         class="form-check-input"
                                         value="{{ $orderType->getCode() }}"
                                         @checked($orderType->isActive())
+                                        @disabled($previewMode)
                                     />
                                     <label
                                         class="form-check-label text-wrap ms-2 d-block"
@@ -47,13 +48,15 @@ class="form-check-label text-wrap ms-2 d-block"
                                 <h6 class="my-3">
                                     <i class="fa fa-map-pin"></i>&nbsp;&nbsp;
                                     @lang('igniter.orange::default.text_delivering_to')
-                                    <a
-                                        wire:click="$set('showAddressPicker', true)"
-                                        role="button"
-                                        class="small text-primary"
-                                    >@lang('igniter.local::default.search.text_change')</a>
+                                    @unless($previewMode)
+                                        <a
+                                            wire:click="$set('showAddressPicker', true)"
+                                            role="button"
+                                            class="small text-primary"
+                                        >@lang('igniter.local::default.search.text_change')</a>
+                                    @endunless
                                 </h6>
-                                @if($showAddressPicker)
+                                @if(!$previewMode && $showAddressPicker)
                                     <div class="input-group bg-white rounded border p-1 mb-3 mb-lg-0">
                                         <input
                                             wire:model="searchQuery"
@@ -66,7 +69,7 @@ class="bg-white form-control shadow-none border-none"
                                             type="button"
                                             data-control="user-position"
                                             class="btn shadow-none"
-                                        ><i class="fa fa-location-arrow fs-5 align-bottom"></i> </button>
+                                        ><i class="fa fa-location-arrow fs-5 align-bottom"></i></button>
                                     </div>
 
                                     <x-igniter-orange::forms.error
diff --git a/src/Livewire/Checkout.php b/src/Livewire/Checkout.php
index 53886e5..41d01a0 100644
--- a/src/Livewire/Checkout.php
+++ b/src/Livewire/Checkout.php
@@ -4,16 +4,16 @@
 
 use Exception;
 use Igniter\Cart\Classes\CartManager;
+use Igniter\Cart\Classes\CheckoutForm;
 use Igniter\Cart\Classes\OrderManager;
 use Igniter\Cart\Models\Order;
 use Igniter\Flame\Exception\ApplicationException;
+use Igniter\Flame\Support\Facades\File;
 use Igniter\Flame\Traits\EventEmitter;
 use Igniter\Local\Facades\Location;
 use Igniter\Main\Traits\ConfigurableComponent;
 use Igniter\Main\Traits\UsesPage;
-use Igniter\Orange\Livewire\Forms\CheckoutForm;
 use Igniter\System\Facades\Assets;
-use Igniter\System\Models\Country;
 use Igniter\User\Facades\Auth;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Support\Facades\Event;
@@ -35,34 +35,17 @@ class Checkout extends Component
 
     public const STEP_PAY = 'pay';
 
-    public CheckoutForm $form;
-
-    /** Whether to use a two page checkout */
+    /** Whether to use a two-page checkout */
     public bool $isTwoPageCheckout = false;
 
-    /** Whether to display the address 2 form field */
-    public bool $showAddress2Field = true;
-
-    /** Whether to display the city form field */
-    public bool $showCityField = true;
-
-    /** Whether to display the state form field */
-    public bool $showStateField = true;
-
-    /** Whether to display the country form field */
-    public bool $showCountryField = false;
-
-    /** Whether to display the postcode form field */
-    public bool $showPostcodeField = true;
-
-    /** Whether the telephone field should be required */
-    public bool $showTelephoneField = true;
+    /** Whether to display the telephone form field */
+    public bool $hideTelephoneField = false;
 
     /** Whether to display the comment form field */
-    public bool $showCommentField = true;
+    public bool $hideCommentField = false;
 
     /** Whether to display the delivery comment form field */
-    public bool $showDeliveryCommentField = true;
+    public bool $hideDeliveryCommentField = false;
 
     /** Whether the telephone field should be required */
     public bool $telephoneIsRequired = true;
@@ -82,22 +65,15 @@ class Checkout extends Component
     #[Url(as: 'step')]
     public string $checkoutStep = 'details';
 
-    public array $paymentFields = [];
+    public array $fields = [];
+
+    protected CheckoutForm $checkoutForm;
 
-    /**
-     * @var \Igniter\Cart\Classes\CartManager
-     */
-    protected $cartManager;
+    protected CartManager $cartManager;
 
-    /**
-     * @var \Igniter\Cart\Classes\OrderManager
-     */
-    protected $orderManager;
+    protected OrderManager $orderManager;
 
-    /**
-     * @var \Igniter\Cart\Models\Order
-     */
-    protected $order;
+    protected ?Order $order = null;
 
     public static function componentMeta(): array
     {
@@ -116,42 +92,17 @@ public function defineProperties(): array
                 'type' => 'switch',
                 'validationRule' => 'required|boolean',
             ],
-            'showAddress2Field' => [
-                'label' => 'Display the address 2 checkout field.',
-                'type' => 'switch',
-                'validationRule' => 'required|boolean',
-            ],
-            'showCityField' => [
-                'label' => 'Display the city checkout field.',
-                'type' => 'switch',
-                'validationRule' => 'required|boolean',
-            ],
-            'showStateField' => [
-                'label' => 'Display the state checkout field.',
-                'type' => 'switch',
-                'validationRule' => 'required|boolean',
-            ],
-            'showPostcodeField' => [
-                'label' => 'Display the postcode checkout field.',
-                'type' => 'switch',
-                'validationRule' => 'required|boolean',
-            ],
-            'showTelephoneField' => [
+            'hideTelephoneField' => [
                 'label' => 'Display the telephone checkout field.',
                 'type' => 'switch',
                 'validationRule' => 'required|boolean',
             ],
-            'showCountryField' => [
-                'label' => 'Display the country checkout field.',
-                'type' => 'switch',
-                'validationRule' => 'required|boolean',
-            ],
-            'showCommentField' => [
+            'hideCommentField' => [
                 'label' => 'Display the comment checkout field',
                 'type' => 'switch',
                 'validationRule' => 'required|boolean',
             ],
-            'showDeliveryCommentField' => [
+            'hideDeliveryCommentField' => [
                 'label' => 'Display the delivery comment checkout field',
                 'type' => 'switch',
                 'validationRule' => 'required|boolean',
@@ -215,16 +166,9 @@ public function mount()
             $paymentGateway->beforeRenderPaymentForm($paymentGateway, controller());
         }
 
-        $order = $this->getOrder();
-        $this->form->requiresAddress = $order->isDeliveryType();
-        $this->form->first_name = $order->first_name;
-        $this->form->last_name = $order->last_name;
-        $this->form->email = $order->email;
-        $this->form->telephone = $order->telephone;
-        $this->form->comment = $order->comment;
-        $this->form->delivery_comment = $order->delivery_comment;
-        $this->form->address_id = $order->address_id;
-        $this->form->payment = $order->payment;
+        foreach ($this->checkoutForm->getFields() as $field) {
+            $this->fields[$field->fieldName] = $field->value;
+        }
 
         $this->prepareDeliveryAddress();
     }
@@ -233,20 +177,13 @@ public function boot()
     {
         $this->orderManager = resolve(OrderManager::class);
         $this->cartManager = resolve(CartManager::class);
-    }
-
-    public function updating($property, $value)
-    {
-        if ($property === 'form.address_id' && is_numeric($value)) {
-            $this->form->address_id = $value;
-            $this->prepareDeliveryAddress();
-        }
+        $this->initForm();
     }
 
     #[Computed, Locked]
-    public function customerAddresses()
+    public function formTabFields(string $tab): array
     {
-        return $this->getOrder()->listCustomerAddresses();
+        return array_get($this->checkoutForm->getTab('primary'), $tab, []);
     }
 
     #[Computed, Locked]
@@ -318,7 +255,7 @@ public function onConfirm()
                 return $redirect;
             }
         } catch (\Exception $ex) {
-            throw ValidationException::withMessages(['form.payment' => $ex->getMessage()]);
+            throw ValidationException::withMessages(['fields.payment' => $ex->getMessage()]);
         }
     }
 
@@ -326,15 +263,18 @@ public function onConfirm()
     public function onChoosePayment($code)
     {
         throw_unless($code, ValidationException::withMessages([
-            'form.payment' => lang('igniter.cart::default.checkout.error_invalid_payment'),
+            'fields.payment' => lang('igniter.cart::default.checkout.error_invalid_payment'),
         ]));
 
         throw_unless($payment = $this->orderManager->getPayment($code), ValidationException::withMessages([
-            'form.payment' => lang('igniter.cart::default.checkout.error_invalid_payment'),
+            'fields.payment' => lang('igniter.cart::default.checkout.error_invalid_payment'),
         ]));
 
-        $this->form->payment = $code;
+        $this->fields['payment'] = $code;
+        $this->checkoutForm->getField('payment')->value = $code;
         $this->orderManager->applyCurrentPaymentFee($payment->code);
+
+        $this->order = null;
     }
 
     #[On('checkout::delete-payment-profile')]
@@ -344,11 +284,11 @@ public function onDeletePaymentProfile($code)
         $payment = $this->orderManager->getPayment($code);
 
         throw_if(!$payment, ValidationException::withMessages([
-            'form.payment' => lang('igniter.cart::default.checkout.error_invalid_payment'),
+            'fields.payment' => lang('igniter.cart::default.checkout.error_invalid_payment'),
         ]));
 
         throw_if(!$payment->paymentProfileExists($customer), ValidationException::withMessages([
-            'form.payment' => lang('igniter.cart::default.checkout.error_payment_profile_not_found'),
+            'fields.payment' => lang('igniter.cart::default.checkout.error_payment_profile_not_found'),
         ]));
 
         $payment->deletePaymentProfile($customer);
@@ -385,7 +325,7 @@ protected function checkCheckoutSecurity()
                 return true;
             }
 
-            Event::dispatch('igniter.orange.checkCheckoutSecurity', [$this]);
+            Event::dispatch('igniter.orange.checkCheckoutSecurity');
         } catch (Exception $ex) {
             flash()->warning($ex->getMessage())->now();
 
@@ -395,29 +335,40 @@ protected function checkCheckoutSecurity()
 
     protected function validateCheckout(Order $order)
     {
-        $this->form->requiresAddress = $order->isDeliveryType();
-        $this->form->telephoneIsRequired = $this->telephoneIsRequired;
+        $rules = $this->checkoutForm->validationRules();
+        $messages = $this->checkoutForm->validationMessages();
+        $attributes = $this->checkoutForm->validationAttributes();
 
-        $this->form->withValidator(function($validator) use ($order) {
+        if (!$this->agreeTermsSlug || ($this->isTwoPageCheckout && $this->checkoutStep !== self::STEP_PAY)) {
+            $rules = array_except($rules, ['fields.termsAgreed']);
+        }
+
+        $this->withValidator(function($validator) use ($order) {
             $validator->after(function($validator) use ($order) {
                 if ($order->isDeliveryType()) {
                     rescue(function() {
-                        $this->orderManager->validateDeliveryAddress($this->form->toArray());
+                        $this->orderManager->validateDeliveryAddress(array_only($this->fields, [
+                            'address_1', 'city', 'state', 'postcode', 'country',
+                        ]));
                     }, function(\Exception $ex) use ($validator) {
-                        $validator->errors()->add('address_1', $ex->getMessage());
+                        $validator->errors()->add('delivery_address', $ex->getMessage());
                     });
                 }
 
-                if ($this->form->payment && !$this->orderManager->getPayment($this->form->payment)) {
+                if ($this->fields['payment'] && !$this->orderManager->getPayment($this->fields['payment'])) {
                     $validator->errors()->add('payment', lang('igniter.cart::default.checkout.error_invalid_payment'));
                 }
             });
         });
 
-        $data = $this->form->validate();
-        $data = array_merge(array_pull($data, 'payment_fields', []), $data);
+        $data = $this->validate($rules, $messages, $attributes);
+        $data = array_merge(
+            array_pull($data, 'fields.payment_fields', []),
+            array_pull($data, 'fields', []),
+            $data
+        );
 
-        $this->orderManager->applyCurrentPaymentFee($this->form->payment);
+        $this->orderManager->applyCurrentPaymentFee($this->fields['payment']);
 
         Event::dispatch('igniter.orange.validateCheckout', [$data, $order]);
 
@@ -436,32 +387,55 @@ protected function isOrderMarkedAsProcessed()
 
     protected function prepareDeliveryAddress()
     {
-        if (!$this->form->requiresAddress) {
+        if (!$this->getOrder()->isDeliveryType()) {
             return;
         }
 
-        if ($address = $this->getSelectedAddress()) {
-            $this->form->address_1 = $address->address_1;
-            $this->form->address_2 = $address->address_2;
-            $this->form->city = $address->city;
-            $this->form->state = $address->state;
-            $this->form->postcode = $address->postcode;
-        } elseif ($userPosition = Location::userPosition()) {
-            $this->form->address_1 = $userPosition->getStreetNumber().' '.$userPosition->getStreetName();
-            $this->form->city = $userPosition->getSubLocality();
-            $this->form->state = $userPosition->getLocality();
-            $this->form->postcode = $userPosition->getPostalCode();
+        $userPosition = Location::userPosition();
+        if ($userPosition && $userPosition->isValid()) {
+            $this->fields['address_1'] = $userPosition->getStreetNumber().' '.$userPosition->getStreetName();
+            $this->fields['city'] = $userPosition->getSubLocality();
+            $this->fields['state'] = $userPosition->getLocality();
+            $this->fields['postcode'] = $userPosition->getPostalCode();
+        }
+    }
+
+    protected function formExtendFieldsBefore(CheckoutForm $checkoutForm)
+    {
+        if ($this->agreeTermsSlug) {
+            $checkoutForm->fields['termsAgreed']['placeholder'] = sprintf(
+                lang('igniter.cart::default.checkout.label_terms'), url($this->agreeTermsSlug)
+            );
+        } else {
+            unset($checkoutForm->fields['termsAgreed']);
+        }
+
+        if ($this->hideTelephoneField) {
+            unset($checkoutForm->fields['telephone']);
         }
 
-        if (!isset($this->form->country_id)) {
-            $this->form->country_id = Country::getDefaultKey();
+        if ($this->hideCommentField) {
+            unset($checkoutForm->fields['comment']);
+        }
+
+        if ($this->hideDeliveryCommentField) {
+            unset($checkoutForm->fields['delivery_comment']);
         }
     }
 
-    protected function getSelectedAddress()
+    protected function initForm(): void
     {
-        return $this->form->address_id
-            ? $this->orderManager->findDeliveryAddress($this->form->address_id)
-            : null;
+        $config = File::getRequire(
+            File::symbolizePath('igniter-orange::/models/checkoutfields.php')
+        );
+
+        $this->checkoutForm = resolve(CheckoutForm::class, ['config' => $config]);
+        $this->checkoutForm->model = $this->getOrder();
+
+        $this->checkoutForm->bindEvent('form.extendFieldsBefore', function() {
+            $this->formExtendFieldsBefore($this->checkoutForm);
+        });
+
+        $this->checkoutForm->initialize();
     }
 }
diff --git a/src/Livewire/Forms/CheckoutForm.php b/src/Livewire/Forms/CheckoutForm.php
deleted file mode 100644
index c1297da..0000000
--- a/src/Livewire/Forms/CheckoutForm.php
+++ /dev/null
@@ -1,92 +0,0 @@
-<?php
-
-namespace Igniter\Orange\Livewire\Forms;
-
-use Igniter\User\Facades\Auth;
-use Illuminate\Validation\Rule;
-use Livewire\Form;
-
-class CheckoutForm extends Form
-{
-    public ?string $first_name = null;
-
-    public ?string $last_name = null;
-
-    public ?string $email = null;
-
-    public ?string $telephone = null;
-
-    public ?string $comment = null;
-
-    public ?string $delivery_comment = null;
-
-    public ?string $address_id = null;
-
-    public ?string $address_1 = null;
-
-    public ?string $address_2 = null;
-
-    public ?string $city = null;
-
-    public ?string $state = null;
-
-    public ?string $postcode = null;
-
-    public ?string $country_id = null;
-
-    public ?string $payment = null;
-
-    public array $payment_fields = [];
-
-    public bool $termsAgreed = false;
-
-    public ?bool $requiresAddress = null;
-
-    public bool $telephoneIsRequired = true;
-
-    public function validationAttributes()
-    {
-        return [
-            'firstName' => lang('igniter.cart::default.checkout.label_first_name'),
-            'lastName' => lang('igniter.cart::default.checkout.label_last_name'),
-            'email' => lang('igniter.cart::default.checkout.label_email'),
-            'telephone' => lang('igniter.cart::default.checkout.label_telephone'),
-            'comment' => lang('igniter.cart::default.checkout.label_comment'),
-            'deliveryComment' => lang('igniter.cart::default.checkout.label_delivery_comment'),
-            'address_id' => lang('igniter.cart::default.checkout.label_address_id'),
-            'address_1' => lang('igniter.cart::default.checkout.label_address_1'),
-            'address_2' => lang('igniter.cart::default.checkout.label_address_2'),
-            'city' => lang('igniter.cart::default.checkout.label_city'),
-            'state' => lang('igniter.cart::default.checkout.label_state'),
-            'country_id' => lang('igniter.cart::default.checkout.label_country'),
-            'postcode' => lang('igniter.cart::default.checkout.label_postcode'),
-            'payment' => lang('igniter.cart::default.checkout.label_payment_method'),
-            'termsAgreed' => lang('igniter.cart::default.checkout.text_checkout_terms'),
-        ];
-    }
-
-    public function rules()
-    {
-        return [
-            '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', $this->telephoneIsRequired ? 'required' : '', 'regex:/^([0-9\s\-\+\(\)]*)$/i'],
-            'comment' => ['max:500'],
-            'delivery_comment' => ['max:500'],
-            'address_id' => ['exclude_unless:requiresAddress,true', 'nullable', 'integer'],
-            'address_1' => ['exclude_unless:requiresAddress,true', 'required', 'min:3', 'max:128'],
-            'address_2' => ['exclude_unless:requiresAddress,true', 'nullable', 'min:3', 'max:128'],
-            'city' => ['exclude_unless:requiresAddress,true', 'nullable', 'min:2', 'max:128'],
-            'state' => ['exclude_unless:requiresAddress,true', 'nullable', 'max:128'],
-            'postcode' => ['exclude_unless:requiresAddress,true', 'nullable', 'string'],
-            'country_id' => ['exclude_unless:requiresAddress,true', 'nullable', 'integer'],
-            'payment' => ['nullable', 'alpha_dash'],
-            'termsAgreed' => ['accepted'],
-            'payment_fields' => ['sometimes', 'array'],
-            'payment_fields.*' => ['sometimes'],
-            'payment_fields.pay_from_profile' => ['sometimes', 'integer'],
-            'payment_fields.create_payment_profile' => ['sometimes', 'integer'],
-        ];
-    }
-}
diff --git a/src/Livewire/FulfillmentModal.php b/src/Livewire/FulfillmentModal.php
index e873526..754ff39 100644
--- a/src/Livewire/FulfillmentModal.php
+++ b/src/Livewire/FulfillmentModal.php
@@ -8,6 +8,7 @@
 use Igniter\Orange\Livewire\Concerns\SearchesNearby;
 use Igniter\System\Facades\Assets;
 use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Event;
 use Illuminate\Validation\ValidationException;
 use Livewire\Attributes\Session;
 use Livewire\Livewire;
@@ -35,6 +36,8 @@ class FulfillmentModal extends \Livewire\Component
 
     public ?bool $hideDeliveryAddress = null;
 
+    public ?bool $previewMode = false;
+
     #[Session]
     public ?string $newSearchQuery = null;
 
@@ -55,6 +58,10 @@ public static function componentMeta(): array
     public function defineProperties()
     {
         return array_merge([
+            'previewMode' => [
+                'label' => 'Render the component in preview mode to avoid making changes to order fulfillment.',
+                'type' => 'switch',
+            ],
             'defaultOrderType' => [
                 'label' => 'The default selected order type.',
                 'type' => 'select',
@@ -95,6 +102,10 @@ public function updating($name, $value)
             'orderType' => lang('igniter.local::default.alert_location_required'),
         ]));
 
+        throw_if($this->previewMode, ValidationException::withMessages([
+            'orderType' => lang('igniter.orange::default.alert_preview_mode'),
+        ]));
+
         if ($name == 'orderType') {
             $this->orderType = $value;
             $this->updateOrderType();
@@ -112,6 +123,10 @@ public function onConfirm()
             'searchQuery' => ['required_if:showAddressPicker,1'],
         ]);
 
+        throw_if($this->previewMode, ValidationException::withMessages([
+            'orderType' => lang('igniter.orange::default.alert_preview_mode'),
+        ]));
+
         throw_unless($this->location->current(), ValidationException::withMessages([
             'orderType' => lang('igniter.local::default.alert_location_required'),
         ]));
@@ -135,6 +150,8 @@ public function onConfirm()
 
         $this->showAddressPicker = false;
 
+        Event::dispatch('igniter.orange.fulfilmentUpdated');
+
         return $this->redirect(Livewire::originalUrl(), navigate: true);
     }
 
diff --git a/src/View/Components/Fulfillment.php b/src/View/Components/Fulfillment.php
index 99e7f20..b207634 100644
--- a/src/View/Components/Fulfillment.php
+++ b/src/View/Components/Fulfillment.php
@@ -9,6 +9,10 @@
 class Fulfillment extends Component
 {
     use ConfigurableComponent;
+    
+    public function __construct(
+        public bool $previewMode = false,
+    ) {}
 
     public static function componentMeta(): array
     {
@@ -19,6 +23,16 @@ public static function componentMeta(): array
         ];
     }
 
+    public function defineProperties()
+    {
+        return [
+            'previewMode' => [
+                'label' => 'Render the component in preview mode',
+                'type' => 'switch',
+            ],
+        ];
+    }
+
     public function render()
     {
         return view('igniter-orange::components.fulfillment', [