@instockng/storefront-ui 1.0.95 → 1.0.96

package/src/components/AddOnsDiscountScreen.tsx

@@ -77,10 +77,10 @@ export function AddOnsDiscountScreen({
       let fullProduct: any = null;
       let fullVariant: any = null;
       for (const group of displayAddons || []) {
-        const found = group.addons.find((a: any) => a.id === product.id);
+        const found = group.addons.find((a) => a.id === product.id);
         if (found) {
           fullProduct = found;
-          fullVariant = found.variants.find((v: any) => v.id === variant.id);
+          fullVariant = found.variants.find((v) => v.id === variant.id);
           break;
         }
       }
@@ -134,105 +134,86 @@ export function AddOnsDiscountScreen({
             </p>
           </div>
 
-          {/* Group by parent product */}
-          <div className="space-y-6">
-            {(displayAddons || []).map((group: any) => (
-              <div key={group.productId}>
-                {/* Parent product header */}
-                <div className="flex items-center gap-2 mb-3">
-                  {group.productThumbnailUrl && (
-                    <img
-                      src={group.productThumbnailUrl}
-                      alt={group.productName}
-                      className="w-8 h-8 rounded-full object-cover flex-shrink-0"
-                    />
-                  )}
-                  <p className="text-sm font-medium text-gray-600">
-                    Goes great with {group.productName}
-                  </p>
-                </div>
-
-                {/* Horizontal scrollable add-on cards */}
-                <div className="flex gap-3 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-hide">
-                  {group.addons.map((addon: any) => {
-                    const firstVariant = addon.variants[0];
-                    if (!firstVariant) return null;
-
-                    const isAdding = addingProductIds.includes(addon.id);
-                    const isAdded = addedProductIds.includes(addon.id);
-                    const discountedPrice = Math.round(firstVariant.price * (1 - addon.discountPercent / 100));
-
-                    return (
-                      <div
-                        key={addon.id}
-                        className="flex-shrink-0 w-36 flex flex-col bg-white border border-gray-200 rounded-lg overflow-hidden"
-                      >
-                        {/* Product Image + Badge */}
-                        <div className="relative aspect-square bg-gray-100 overflow-hidden">
-                          {addon.thumbnailUrl ? (
-                            <img
-                              src={addon.thumbnailUrl}
-                              alt={addon.name}
-                              className="absolute inset-0 w-full h-full object-cover"
-                            />
-                          ) : (
-                            <div className="absolute inset-0 w-full h-full flex items-center justify-center">
-                              <Package className="h-8 w-8 text-gray-300" />
-                            </div>
-                          )}
-                          {/* Discount badge */}
-                          <div className="absolute top-1 left-1 bg-red-500 text-white text-xs font-bold px-1.5 py-0.5 rounded">
-                            {addon.discountPercent}% OFF
-                          </div>
-                        </div>
-
-                        {/* Product Info */}
-                        <div className="p-2 flex flex-col flex-1">
-                          <h4 className="text-xs font-medium text-gray-900 line-clamp-2 leading-tight min-h-[2.5em]">
-                            {addon.name}
-                          </h4>
-                          <div className="mt-1">
-                            <span className="text-xs text-gray-400 line-through mr-1">
-                              {formatCurrency(firstVariant.price)}
-                            </span>
-                            <span className="text-sm font-bold text-red-600">
-                              {formatCurrency(discountedPrice)}
-                            </span>
-                          </div>
-
-                          {/* Add / Added Button */}
-                          <Button
-                            size="sm"
-                            onClick={() => handleAddClick(addon, addon.discountPercent)}
-                            disabled={isAdding || isAdded}
-                            className={cn(
-                              'w-full text-xs h-7 mt-2',
-                              isAdded
-                                ? 'bg-green-500 hover:bg-green-500 text-white !opacity-100'
-                                : 'bg-red-500 hover:bg-red-600 text-white'
-                            )}
-                          >
-                            {isAdding ? (
-                              <>
-                                <Loader2 className="h-3 w-3 animate-spin" />
-                                Adding...
-                              </>
-                            ) : isAdded ? (
-                              <>
-                                <Check className="h-3 w-3" />
-                                Added
-                              </>
-                            ) : (
-                              'Add'
-                            )}
-                          </Button>
+          {/* All add-ons in a 2-column grid */}
+          <div className="grid grid-cols-2 gap-3">
+            {(displayAddons || []).flatMap((group) =>
+              group.addons.map((addon) => {
+                const firstVariant = addon.variants[0];
+                if (!firstVariant) return null;
+
+                const isAdding = addingProductIds.includes(addon.id);
+                const isAdded = addedProductIds.includes(addon.id);
+                const discountedPrice = Math.round(firstVariant.price * (1 - addon.discountPercent / 100));
+
+                return (
+                  <div
+                    key={addon.id}
+                    className="flex flex-col bg-white border border-gray-200 rounded-lg overflow-hidden"
+                  >
+                    {/* Product Image + Badge */}
+                    <div className="relative aspect-square bg-gray-100 overflow-hidden">
+                      {addon.thumbnailUrl ? (
+                        <img
+                          src={addon.thumbnailUrl}
+                          alt={addon.name}
+                          className="absolute inset-0 w-full h-full object-cover"
+                        />
+                      ) : (
+                        <div className="absolute inset-0 w-full h-full flex items-center justify-center">
+                          <Package className="h-8 w-8 text-gray-300" />
                         </div>
+                      )}
+                      {/* Discount badge */}
+                      <div className="absolute top-1 left-1 bg-red-500 text-white text-xs font-bold px-1.5 py-0.5 rounded">
+                        {addon.discountPercent}% OFF
+                      </div>
+                    </div>
+
+                    {/* Product Info */}
+                    <div className="p-2 flex flex-col flex-1">
+                      <h4 className="text-xs font-medium text-gray-900 line-clamp-2 leading-tight min-h-[2.5em]">
+                        {addon.name}
+                      </h4>
+                      <div className="mt-1">
+                        <span className="text-xs text-gray-400 line-through mr-1">
+                          {formatCurrency(firstVariant.price)}
+                        </span>
+                        <span className="text-sm font-bold text-red-600">
+                          {formatCurrency(discountedPrice)}
+                        </span>
                       </div>
-                    );
-                  })}
-                </div>
-              </div>
-            ))}
+
+                      {/* Add / Added Button */}
+                      <Button
+                        size="sm"
+                        onClick={() => handleAddClick(addon, addon.discountPercent)}
+                        disabled={isAdding || isAdded}
+                        className={cn(
+                          'w-full text-xs h-7 mt-2',
+                          isAdded
+                            ? 'bg-green-500 hover:bg-green-500 text-white !opacity-100'
+                            : 'bg-red-500 hover:bg-red-600 text-white'
+                        )}
+                      >
+                        {isAdding ? (
+                          <>
+                            <Loader2 className="h-3 w-3 animate-spin" />
+                            Adding...
+                          </>
+                        ) : isAdded ? (
+                          <>
+                            <Check className="h-3 w-3" />
+                            Added
+                          </>
+                        ) : (
+                          'Add'
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })
+            )}
           </div>
         </div>