[Strorefront][Delivery] #1278 Implement choosing delivery service UI

storefront/modules/address/components/AddressForm.tsx

@@ -175,7 +175,7 @@ const AddressForm = ({
             </div>
           </div>
         </div>
-        <div className="row">
+        <div className="row mb-5">
           <div className="col-lg-10">
             <div className="checkout__input">
               <Input

storefront/modules/delivery/DeliveryForm.tsx

@@ -0,0 +1,146 @@
+import { useState } from 'react';
+import { FieldErrorsImpl, UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { OptionSelect } from '@/common/items/OptionSelect';
+
+type ShippingMethod = {
+  id: string;
+  name: string;
+  price: number;
+  deliveryDate: string;
+};
+
+type DeliveryProvider = {
+  id: string;
+  name: string;
+  methods: ShippingMethod[];
+};
+
+// Mock data for delivery providers and their methods
+const MOCK_DELIVERY_PROVIDERS: DeliveryProvider[] = [
+  {
+    id: 'fedex',
+    name: 'FedEx',
+    methods: [
+      { id: 'standard', name: 'Standard', price: 7.56, deliveryDate: 'Sep 21' },
+      { id: 'express', name: 'Express', price: 12.99, deliveryDate: 'Sep 19' },
+      { id: 'priority', name: 'Priority', price: 19.99, deliveryDate: 'Sep 18' },
+    ],
+  },
+  {
+    id: 'ups',
+    name: 'UPS',
+    methods: [
+      { id: 'economy', name: 'Economy', price: 4.99, deliveryDate: 'Sep 23' },
+      { id: 'express', name: 'Express', price: 10.99, deliveryDate: 'Sep 20' },
+    ],
+  },
+];
+
+type DeliveryFormProps = {
+  register: UseFormRegister<any>;
+  setValue: UseFormSetValue<any>;
+  errors: FieldErrorsImpl<any>;
+  isDisplay?: boolean;
+};
+
+const DeliveryForm = ({ register, setValue, errors, isDisplay }: DeliveryFormProps) => {
+  const [deliveryProviders] = useState(MOCK_DELIVERY_PROVIDERS);
+  const [shippingMethods, setShippingMethods] = useState<ShippingMethod[]>([]);
+  const [selectedMethodId, setSelectedMethodId] = useState<string | null>(null); // Track selected method
+
+  const onProviderChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const providerId = event.target.value;
+
+    setShippingMethods([]);
+    setValue('methodId', '');
+    setValue('methodName', '');
+    setSelectedMethodId(null);
+    setValue('providerName', event.target.selectedOptions[0]?.text || '');
+    setValue('providerId', providerId || '');
+
+    const selectedProvider = deliveryProviders.find((provider) => provider.id === providerId);
+    setShippingMethods(selectedProvider?.methods || []);
+  };
+
+  const onMethodChange = (method: ShippingMethod) => {
+    setSelectedMethodId(method.id);
+    setValue('methodName', method.name);
+    setValue('methodId', method.id);
+  };
+
+  const getErrorMessage = (error: any): string | undefined => {
+    return error?.message;
+  };
+
+  return (
+    <div className={`delivery_form_new ${isDisplay ? '' : 'd-none'}`}>
+      <div className="row mb-5">
+        {deliveryProviders.length === 0 && (
+          <div className="col-12">
+            <h3 className="text-danger-bg no-wrap">No delivery service available</h3>
+          </div>
+        )}
+
+        {deliveryProviders.length > 0 && (
+          <>
+            <div className="col-lg-4">
+              <div className="checkout__input">
+                <OptionSelect
+                  labelText="Delivery Provider"
+                  field="providerId"
+                  placeholder="Select delivery provider"
+                  options={deliveryProviders.map((provider) => ({
+                    id: provider.id,
+                    name: provider.name,
+                  }))}
+                  register={register}
+                  registerOptions={{
+                    required: { value: true, message: 'Please select a delivery provider' },
+                    onChange: onProviderChange,
+                  }}
+                  error={getErrorMessage(errors.providerId)}
+                />
+              </div>
+            </div>
+            <div className="col-lg-8">
+              <div className="checkout__input">
+                <div className="mb-2">
+                  Shipping Method<span className="text-danger ms-1">*</span>
+                </div>
+                <div className="custom-dropdown">
+                  {shippingMethods.length === 0 ? (
+                    <p className="mb-0">Select a delivery provider to see methods</p>
+                  ) : (
+                    <ul className="shipping-method-list">
+                      {shippingMethods.map((method) => (
+                        <li key={method.id}>
+                          <button
+                            type="button"
+                            className={`shipping-method-item ${
+                              selectedMethodId === method.id ? 'selected' : ''
+                            }`}
+                            onClick={() => onMethodChange(method)}
+                            onKeyDown={() => {}}
+                          >
+                            <div className="method-info">
+                              <span className="method-name">{method.name}</span>
+                              <span className="method-price">${method.price.toFixed(2)}</span>
+                              <span className="method-date">Delivery by {method.deliveryDate}</span>
+                            </div>
+                          </button>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+                <span className="text-danger">{getErrorMessage(errors.methodId)}</span>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DeliveryForm;

storefront/pages/_app.tsx

@@ -9,6 +9,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import '../styles/spinner.css';
 import '../styles/completePayment.css';
 import '../styles/MyOrder.css';
+import '../styles/DeliveryForm.css';
 import '../styles/Footer.css';
 import '../styles/Header.css';
 import '../styles/HomePage.css';

storefront/pages/checkout/[id].tsx

@@ -9,6 +9,7 @@ import { useRouter } from 'next/router';
 import { Input } from 'common/items/Input';
 import { Address } from '@/modules/address/models/AddressModel';
 import AddressForm from '@/modules/address/components/AddressForm';
+import DeliveryForm from '@/modules/delivery/DeliveryForm';
 import { createOrder, getCheckoutById } from '@/modules/order/services/OrderService';
 import * as yup from 'yup';
 import {
@@ -47,13 +48,20 @@ const Checkout = () => {
     formState: { errors },
     watch,
   } = useForm<Order>();
+
   const {
     handleSubmit: handleSubmitShippingAddress,
     register: registerShippingAddress,
     setValue: setValueShippingAddress,
     formState: { errors: errorsShippingAddress },
   } = useForm<Address>();
 
+  const {
+    register: registerDelivery,
+    setValue: setValueDelivery,
+    formState: { errors: errorsDelivery },
+  } = useForm();
+
   const {
     handleSubmit: handleSubmitBillingAddress,
     register: registerBillingAddress,
@@ -336,6 +344,14 @@ const Checkout = () => {
                     </div>
                   </div>
 
+                  <h4>Delivery Method</h4>
+                  <DeliveryForm
+                    isDisplay={true}
+                    register={registerDelivery} // Delivery-specific register
+                    setValue={setValueDelivery} // Delivery-specific setValue
+                    errors={errorsDelivery} // Delivery-specific errors
+                  />
+
                   <h4>Billing Address</h4>
                   <div className="row mb-4">
                     <div className="col-lg-6">

storefront/styles/DeliveryForm.css

@@ -0,0 +1,51 @@
+.custom-dropdown {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 0.9rem 0.75rem;
+  overflow-y: auto;
+  background: #fff;
+  max-height: 150px;
+}
+
+.shipping-method-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.shipping-method-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+  cursor: pointer;
+  width: 100%;
+}
+
+.shipping-method-item.selected {
+  background-color: #e0f7fa;
+  border: 2px solid #00796b;
+}
+
+.shipping-method-item:hover {
+  background-color: #f9f9f9;
+}
+
+.method-info {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.method-name {
+  font-weight: bold;
+}
+
+.method-price {
+  color: #28a745;
+}
+
+.method-date {
+  color: #6c757d;
+}