Remove delete crate from spare cards and add crate numbers to the summary

Signed-off-by: Egor Savkin <es@m-labs.hk>

sass/css/_shop.scss

@@ -322,6 +322,10 @@ button {
                         height: auto;
                     }
                 }
+                span {
+                    margin-left: 16px;
+                    width: 28px;
+                }
             }
 
             > .summary-form {

static/js/shop/Crate.jsx

@@ -17,7 +17,8 @@ export function Crate({crate_index}) {
     const renderCount = useRenderCount();
 
     const crate = useShopStore((state) => state.crates[crate_index],
-        (a, b) => a.length === b.length);
+        (a, b) => a.length === b.length && a.id === b.id);
+    const modes_order = useShopStore((state) => state.modes_order);
     const onDeleteCrate = useShopStore((state) => state.delCrate);
 
     // #!render_count
@@ -25,7 +26,8 @@ export function Crate({crate_index}) {
 
     return (
         <div className="crate">
-
+            {
+                modes_order.includes(crate.crate_mode) ? (
                     <div className="crate-bar d-inline-flex justify-content-between">
                         <CrateMode crate_index={crate_index}/>
 
@@ -33,6 +35,8 @@ export function Crate({crate_index}) {
                             Delete crate <img src="/images/shop/icon-remove.svg" alt="remove"/>
                         </div>
                     </div>
+                ) : <></>
+            }
 
             <div className="crate-products">
 

static/js/shop/CrateMode.jsx

@@ -19,7 +19,7 @@ export function CrateMode({crate_index}) {
 
     // #!render_count
     console.log("CrateMode renders: ", renderCount)
-    if (modes_order.includes(crate.crate_mode)) {
+
     return (
         <div className="crate-mode">
             {modes_order.map((mode_name, _) => (
@@ -32,7 +32,4 @@ export function CrateMode({crate_index}) {
             ))}
         </div>
     );
-    } else {
-        return <div className="crate-mode"></div>
-    }
 }

static/js/shop/OrderSummary.jsx

@@ -27,7 +27,7 @@ export function OrderSummary() {
                 <thead>
                 <tr>
                     <td colSpan="2" className="summary-remove-all">
-                        <span className="item-card-name">Remove all cards</span>
+                        <span className="item-card-name">Reset the order</span>
 
                         <button onClick={clearAll}>
                             <img src="/images/shop/icon-remove.svg"/>

static/js/shop/SummaryCrateHeader.jsx

@@ -4,6 +4,7 @@ import {useShopStore} from "./shop_store";
 
 // #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
+import {CrateMode} from "./CrateMode";
 
 export function SummaryCrateHeader({crate_index}) {
     // #!render_count
@@ -16,6 +17,9 @@ export function SummaryCrateHeader({crate_index}) {
 
     const crate_mode = useShopStore((state) => state.crates[crate_index].crate_mode);
     const crate_id = useShopStore((state) => state.crates[crate_index].id);
+    const crate_name = useShopStore((state) => state.crates[crate_index].name);
+    const modes_order = useShopStore((state) => state.modes_order);
+
 
     // #!render_count
     console.log("SummaryCrateHeader renders: ", renderCount)
@@ -24,7 +28,7 @@ export function SummaryCrateHeader({crate_index}) {
 
     return (
         <tr key={"summary_crate_" + crate_id}>
-            <td className="item-card-name">{crate_type.name}</td>
+            <td className="item-card-name">{!!crate_name ? crate_name :  crate_type.name + " #" + crate_index}</td>
             <td className="price">
                 <div className="d-inline-flex">
                     {`${currency} ${formatMoney(crate_type.price)}`}
@@ -33,9 +37,14 @@ export function SummaryCrateHeader({crate_index}) {
                         <img src="/images/shop/icon-clear.svg" alt="empty crate"/>
                     </button>
 
+                    {
+                        modes_order.includes(crate_mode) ? (
                             <button onClick={() => delCrate(crate_id)}>
                                 <img src="/images/shop/icon-remove.svg" alt="remove crate"/>
                             </button>
+                        ) : <span></span>
+                    }
+
                 </div>
             </td>
         </tr>

static/js/shop/shop_store.js

@@ -238,19 +238,17 @@ const useHighlighted = ((set, get) => ({
 const useCart = ((set, get) => ({
     crates: shared_data.columns.crates,
     active_crate: "crate0",
+    _defaultCrates: Array.from(shared_data.columns.crates),
 
     _newCrate: (crate_id) => set((state) => ({
         crates: state.crates.toSpliced(-1, 0, {
+            ...state._defaultCrates[0],
             id: crate_id || "crate" + state.crates.length,
-            crate_mode: "rack",
-            items: [],
-            warnings: [],
-            occupiedHP: 0
         }),
         active_crate: crate_id || "crate" + state.crates.length
     })),
     delCrate: (id) => set(state => ({
-        crates: state.crates.filter((crate => crate.id !== id)),
+        crates: state.crates.filter((crate => crate.id !== id || !state.modes_order.includes(crate.crate_mode))),
         active_crate: state.active_crate === id ? null : state.active_crate,
     })),
     _setCrateMode: (id, mode) => set(state => ({
@@ -332,7 +330,7 @@ const useCart = ((set, get) => ({
         })
     })),
     clearAll: () => set(state => ({
-        crates: []
+        crates: state._defaultCrates
     })),
     _updateOptions: (crate_id, index, new_options) => set(state => ({
         crates: state.crates.map((crate, _i) => {