@instockng/storefront-ui 1.0.23 → 1.0.24

package/src/components/Checkout.tsx

@@ -638,6 +638,8 @@ export function Checkout({
     );
   }
 
+  const shownDeliveryWarnings = selectedDeliveryZone && (currentStep === 'delivery' || currentStep === 'payment') && (selectedDeliveryZone.waybillOnly || !selectedDeliveryZone?.allowCOD);
+
   return (
     <Modal
       isOpen={isOpen}
@@ -656,7 +658,7 @@ export function Checkout({
           {/* Sliding Steps Container */}
           <div className="relative w-full">
             {/* Delivery Zone Notices */}
-            {selectedDeliveryZone && (currentStep === 'delivery' || currentStep === 'payment') && (
+            {shownDeliveryWarnings && (
               <div className="space-y-3 p-4 pb-0">
                 {/* Waybill Delivery Notice */}
                 {selectedDeliveryZone.waybillOnly && (
@@ -839,6 +841,55 @@ export function Checkout({
               {/* Step 3: Payment Method */}
               <div className="w-full min-w-full flex-shrink-0 p-4">
                 <div className="space-y-6">
+                  {/* Refund Policy Accordion */}
+                  {refundPolicy && (
+                    <div className={`border border-gray-200 rounded-lg ${shownDeliveryWarnings ? 'mt-4' : ''}`}>
+                      <button
+                        type="button"
+                        onClick={() => setIsRefundAccordionOpen(!isRefundAccordionOpen)}
+                        className="overflow-hidden w-full flex items-center overflow-hidden rounded-lg rounded-b-none justify-between p-4 text-left hover:bg-gray-50 transition-colors"
+                      >
+                        <span className="text-sm font-bold text-accent-700">
+                          {refundPolicy.title || '🤔 Curious about Refunds?'}
+                        </span>
+                        <ChevronDown
+                          size={16}
+                          className={cn(
+                            'transform transition-transform duration-200 text-gray-500',
+                            isRefundAccordionOpen && 'rotate-180'
+                          )}
+                        />
+                      </button>
+                      <div
+                        className={cn(
+                          'overflow-hidden transition-all duration-300 ease-in-out',
+                          isRefundAccordionOpen
+                            ? 'max-h-96 opacity-100'
+                            : 'max-h-0 opacity-0'
+                        )}
+                      >
+                        <div className="px-4 pb-4 border-t border-gray-100">
+                          <div className="text-sm text-gray-600 space-y-3 pt-4">
+                            {refundPolicy.policies && (
+                              <div>
+                                <h4 className="font-bold text-gray-800 mb-2">
+                                  Our Refund Policy
+                                </h4>
+                                <ul className="space-y-1">
+                                  {refundPolicy.policies.map((policy, idx) => (
+                                    <li key={idx} className="flex items-start">
+                                      <span className="text-green-600 mr-2">✓</span>
+                                      <span>{policy}</span>
+                                    </li>
+                                  ))}
+                                </ul>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
                   <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                     {/* Online Payment */}
                     <div className="relative">
@@ -943,56 +994,6 @@ export function Checkout({
                   {formErrors.paymentMethod && (
                     <p className="text-red-600 text-sm">{formErrors.paymentMethod}</p>
                   )}
-
-                  {/* Refund Policy Accordion */}
-                  {refundPolicy && (
-                    <div className="border border-gray-200 rounded-lg">
-                      <button
-                        type="button"
-                        onClick={() => setIsRefundAccordionOpen(!isRefundAccordionOpen)}
-                        className="overflow-hidden w-full flex items-center overflow-hidden rounded-lg rounded-b-none justify-between p-4 text-left hover:bg-gray-50 transition-colors"
-                      >
-                        <span className="text-sm font-medium text-gray-700">
-                          {refundPolicy.title || '🤔 Curious about Refunds?'}
-                        </span>
-                        <ChevronDown
-                          size={16}
-                          className={cn(
-                            'transform transition-transform duration-200 text-gray-500',
-                            isRefundAccordionOpen && 'rotate-180'
-                          )}
-                        />
-                      </button>
-                      <div
-                        className={cn(
-                          'overflow-hidden transition-all duration-300 ease-in-out',
-                          isRefundAccordionOpen
-                            ? 'max-h-96 opacity-100'
-                            : 'max-h-0 opacity-0'
-                        )}
-                      >
-                        <div className="px-4 pb-4 border-t border-gray-100">
-                          <div className="text-sm text-gray-600 space-y-3 pt-4">
-                            {refundPolicy.policies && (
-                              <div>
-                                <h4 className="font-bold text-gray-800 mb-2">
-                                  Our Refund Policy
-                                </h4>
-                                <ul className="space-y-1 ml-4">
-                                  {refundPolicy.policies.map((policy, idx) => (
-                                    <li key={idx} className="flex items-start">
-                                      <span className="text-green-600 mr-2">✓</span>
-                                      <span>{policy}</span>
-                                    </li>
-                                  ))}
-                                </ul>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  )}
                 </div>
               </div>
             </div>

package/src/components/ShoppingCart.tsx

@@ -50,7 +50,7 @@ export function ShoppingCart({
   onContinueShopping,
   className,
   showDiscountCode = true,
-  checkoutButtonText = 'Checkout',
+  checkoutButtonText = 'Complete Purchase',
   continueShoppingText = 'Continue Shopping',
   checkoutButtonClassName,
   continueShoppingButtonClassName,
@@ -260,6 +260,16 @@ export function ShoppingCart({
         isOpen={isCheckoutOpen}
         onSuccess={() => onClose()}
         onClose={() => setIsCheckoutOpen(false)}
+        refundPolicy={{
+          title: '🤔 Curious about refunds',
+          policies: [
+            '2 day return window from delivery date',
+            'Items must be unused and in original packaging',
+            'Refunds processed as soon as item is received',
+            'Refunds issued to original payment method',
+            'Contact hello@instock.ng to initiate a refund'
+          ]
+        }}
       />
     </>
   );