feat(catalog): catalogo modern Hippiehotel in albero separato (catalog-modern)

2026-06-20 07:26:19 +00:00 · 2026-06-07 23:00:06 +02:00
parent 3cd6c5a518
commit 21d3a62b7a
73 changed files with 6931 additions and 4 deletions
@@ -0,0 +1,61 @@
+import { FC } from 'react';
+import { FaMinus, FaPlus } from 'react-icons/fa';
+import { LocalizeText } from '../../../../../api';
+import { useCatalogData, useCatalogUiState } from '../../../../../hooks';
+
+const MIN_VALUE: number = 1;
+const MAX_VALUE: number = 99;
+
+export const CatalogSpinnerWidgetView: FC<{}> = props =>
+{
+    const { currentOffer = null } = useCatalogData();
+    const { purchaseOptions = null, setPurchaseOptions = null } = useCatalogUiState();
+    const { quantity = 1 } = purchaseOptions;
+
+    const updateQuantity = (value: number) =>
+    {
+        if(isNaN(value)) value = 1;
+
+        value = Math.max(value, MIN_VALUE);
+        value = Math.min(value, MAX_VALUE);
+
+        if(value === quantity) return;
+
+        setPurchaseOptions(prevValue =>
+        {
+            const newValue = { ...prevValue };
+
+            newValue.quantity = value;
+
+            return newValue;
+        });
+    };
+
+    if(!currentOffer || !currentOffer.bundlePurchaseAllowed) return null;
+
+    return (
+        <div className="flex items-center gap-1.5">
+            <span className="text-[10px] text-muted whitespace-nowrap">{ LocalizeText('catalog.bundlewidget.spinner.select.amount') }</span>
+            <div className="flex items-center rounded overflow-hidden border-2 border-card-grid-item-border">
+                <button
+                    className="w-[24px] h-[24px] flex items-center justify-center bg-card-grid-item hover:bg-card-grid-item-active transition-colors cursor-pointer border-r border-card-grid-item-border"
+                    onClick={ event => updateQuantity(quantity - 1) }
+                >
+                    <FaMinus className="text-[7px] text-dark" />
+                </button>
+                <input
+                    className="w-[40px] h-[24px] text-center text-[11px] font-bold bg-white border-x border-card-grid-item-border [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:outline-none"
+                    type="number"
+                    value={ quantity }
+                    onChange={ event => updateQuantity(event.target.valueAsNumber) }
+                />
+                <button
+                    className="w-[24px] h-[24px] flex items-center justify-center bg-card-grid-item hover:bg-card-grid-item-active transition-colors cursor-pointer border-l border-card-grid-item-border"
+                    onClick={ event => updateQuantity(quantity + 1) }
+                >
+                    <FaPlus className="text-[7px] text-dark" />
+                </button>
+            </div>
+        </div>
+    );
+};