Merge branch 'dev' into e2e-integrate

Author: treoden

packages/evershop/src/components/frontStore/checkout/CheckoutButton.tsx

@@ -37,10 +37,10 @@ export function CheckoutButton() {
 
   if (noShippingRequired && !billingAddress) {
     return (
-      <div className="checkout-button-section">
+      <div className="checkout-button-section mt-6">
         <button
           type="button"
-          className="w-full bg-gray-400 text-white py-3 px-4 rounded-lg font-medium cursor-not-allowed"
+          className="w-full bg-muted text-muted-foreground py-3 px-4 rounded-lg font-medium cursor-not-allowed"
           disabled
         >
           {_('Please provide billing address to proceed')}

packages/evershop/src/components/frontStore/checkout/OrderSummaryItems.tsx

@@ -18,7 +18,7 @@ const OrderSummaryItems: React.FC<{
   }
 
   return (
-    <ul className="order__item__summary__list divide-y divide-gray-200 border-b mb-3">
+    <ul className="order__item__summary__list divide-y divide-border border-b border-border mb-3">
       {items.map((item) => (
         <li key={item.uuid} className="flex items-start py-3">
           <div className="relative mr-4 self-center">
@@ -28,13 +28,13 @@ const OrderSummaryItems: React.FC<{
                 height={100}
                 src={item.thumbnail}
                 alt={item.productName}
-                className="w-16 h-16 object-cover rounded border p-2 box-border"
+                className="w-16 h-16 object-cover rounded border p-2 box-border border-border"
               />
             )}
             {!item.thumbnail && (
-              <ProductNoThumbnail className="w-16 h-16 rounded border p-2 box-border" />
+              <ProductNoThumbnail className="w-16 h-16 rounded border border-border p-2 box-border" />
             )}
-            <span className="absolute -top-2 -right-2 bg-gray-200 rounded-full w-6 h-6 flex items-center justify-center text-gray-700 text-sm">
+            <span className="absolute -top-2 -right-2 bg-muted rounded-full w-6 h-6 flex items-center justify-center text-muted-foreground text-sm">
               {item.qty}
             </span>
           </div>

packages/evershop/src/components/frontStore/checkout/payment/BillingAddress.tsx

@@ -103,7 +103,7 @@ export function BillingAddress({
               handleAddressOptionChange(value as string);
             }}
           >
-            {!noShippingRequired && (
+            {!noShippingRequired ? (
               <>
                 <Item variant={'outline'}>
                   <ItemContent>
@@ -154,6 +154,26 @@ export function BillingAddress({
                   </ItemContent>
                 </Item>
               </>
+            ) : (
+              <ItemDescription className="text-inherit mt-3">
+                <div className="text-inherit bg-white">
+                  <CustomerAddressForm
+                    areaId="checkoutBillingAddressForm"
+                    fieldNamePrefix="billingAddress"
+                    address={undefined} // Always start empty for different address
+                  />
+                  {noShippingRequired && (
+                    <Button
+                      onClick={() => handleGoToPayment()}
+                      variant="default"
+                      isLoading={addingBillingAddress}
+                      className="mt-4"
+                    >
+                      {_('Continue to payment')}
+                    </Button>
+                  )}
+                </div>
+              </ItemDescription>
             )}
           </RadioGroup>
         </ItemContent>