Revert "Merge branch 'main' into furnisettingeditor-pr"

This reverts commit dfbfb1c2c1, reversing
changes made to 07702c44d0.

src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx

@@ -1,8 +1,7 @@
-import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { FC, useEffect, useRef } from 'react';
 import { IPurchasableOffer, ProductTypeEnum } from '../../../../../api';
 import { AutoGrid, AutoGridProps } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
-import { useCatalogAdmin } from '../../../CatalogAdminContext';
 import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
 
 interface CatalogItemGridWidgetViewProps extends AutoGridProps
@@ -14,11 +13,7 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
 {
     const { columnCount = 5, children = null, ...rest } = props;
     const { currentOffer = null, setCurrentOffer = null, currentPage = null, setPurchaseOptions = null } = useCatalog();
-    const catalogAdmin = useCatalogAdmin();
-    const adminMode = catalogAdmin?.adminMode ?? false;
     const elementRef = useRef<HTMLDivElement>();
-    const [ dragIndex, setDragIndex ] = useState<number | null>(null);
-    const [ dropIndex, setDropIndex ] = useState<number | null>(null);
 
     useEffect(() =>
     {
@@ -48,66 +43,9 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
         }
     };
 
-    const handleDragStart = useCallback((index: number) =>
-    {
-        setDragIndex(index);
-    }, []);
-
-    const handleDragOver = useCallback((e: React.DragEvent, index: number) =>
-    {
-        e.preventDefault();
-        setDropIndex(index);
-    }, []);
-
-    const handleDrop = useCallback((index: number) =>
-    {
-        if(dragIndex !== null && dragIndex !== index && currentPage?.offers)
-        {
-            const offers = [ ...currentPage.offers ];
-            const [ moved ] = offers.splice(dragIndex, 1);
-
-            offers.splice(index, 0, moved);
-
-            const orders = offers.map((o, i) => ({ id: o.offerId, orderNumber: i }));
-
-            catalogAdmin?.reorderOffers(orders);
-        }
-
-        setDragIndex(null);
-        setDropIndex(null);
-    }, [ dragIndex, currentPage, catalogAdmin ]);
-
-    const handleDragEnd = useCallback(() =>
-    {
-        setDragIndex(null);
-        setDropIndex(null);
-    }, []);
-
     return (
         <AutoGrid columnCount={ columnCount } innerRef={ elementRef } { ...rest }>
-            { currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) =>
-            {
-                const isDragging = dragIndex === index;
-                const isDropTarget = dropIndex === index && dragIndex !== index;
-
-                return (
-                    <div
-                        key={ index }
-                        className={ `${ isDragging ? 'opacity-40' : '' } ${ isDropTarget ? 'ring-2 ring-primary ring-offset-1 rounded' : '' }` }
-                        draggable={ adminMode }
-                        onDragEnd={ adminMode ? handleDragEnd : undefined }
-                        onDragOver={ adminMode ? (e) => handleDragOver(e, index) : undefined }
-                        onDragStart={ adminMode ? () => handleDragStart(index) : undefined }
-                        onDrop={ adminMode ? () => handleDrop(index) : undefined }
-                    >
-                        <CatalogGridOfferView
-                            itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) }
-                            offer={ offer }
-                            selectOffer={ selectOffer }
-                        />
-                    </div>
-                );
-            }) }
+            { currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) } offer={ offer } selectOffer={ selectOffer } />) }
             { children }
         </AutoGrid>
     );

src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx

@@ -19,19 +19,19 @@ export const CatalogPriceDisplayWidgetView: FC<CatalogPriceDisplayWidgetViewProp
     if(!offer) return null;
 
     return (
-        <div className="flex items-center gap-1.5">
+        <>
             { (offer.priceInCredits > 0) &&
-                <div className="flex items-center gap-1 bg-warning/15 border border-warning/40 rounded-full px-2 py-0.5">
-                    <Text className="text-[11px]! font-bold text-dark">{ (offer.priceInCredits * quantity) }</Text>
+                <div className="flex items-center gap-1">
+                    <Text bold>{ (offer.priceInCredits * quantity) }</Text>
                     <LayoutCurrencyIcon type={ -1 } />
                 </div> }
             { separator && (offer.priceInCredits > 0) && (offer.priceInActivityPoints > 0) &&
-                <FaPlus className="text-[7px] text-muted" /> }
+                <FaPlus className="fa-icon" color="black" size="xs" /> }
             { (offer.priceInActivityPoints > 0) &&
-                <div className="flex items-center gap-1 bg-purple/15 border border-purple/40 rounded-full px-2 py-0.5">
-                    <Text className="text-[11px]! font-bold text-dark">{ (offer.priceInActivityPoints * quantity) }</Text>
+                <div className="flex items-center gap-1">
+                    <Text bold>{ (offer.priceInActivityPoints * quantity) }</Text>
                     <LayoutCurrencyIcon type={ offer.activityPointType } />
                 </div> }
-        </div>
+        </>
     );
 };

src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx

@@ -1,10 +1,11 @@
 import { FC } from 'react';
-import { FaMinus, FaPlus } from 'react-icons/fa';
+import { FaCaretLeft, FaCaretRight } from 'react-icons/fa';
 import { LocalizeText } from '../../../../../api';
+import { Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 
 const MIN_VALUE: number = 1;
-const MAX_VALUE: number = 99;
+const MAX_VALUE: number = 100;
 
 export const CatalogSpinnerWidgetView: FC<{}> = props =>
 {
@@ -33,28 +34,13 @@ export const CatalogSpinnerWidgetView: FC<{}> = props =>
     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>
+        <>
+            <Text>{ LocalizeText('catalog.bundlewidget.spinner.select.amount') }</Text>
+            <div className="flex items-center gap-1">
+                <FaCaretLeft className="text-black cursor-pointer fa-icon" onClick={ event => updateQuantity(quantity - 1) } />
+                <input className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none min-h-[17px] h-[17px] w-[28px] px-[4px] py-0 text-right  rounded-[.2rem]" type="number" value={ quantity } onChange={ event => updateQuantity(event.target.valueAsNumber) } />
+                <FaCaretRight className="text-black cursor-pointer fa-icon" onClick={ event => updateQuantity(quantity + 1) } />
             </div>
-        </div>
+        </>
     );
 };