Move order options to the OrderForm, fix missing tooltip props, update tooltip contents

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

sass/css/_shop.scss

@@ -385,9 +385,9 @@ button {
         }
 
         .order-bar {
-            width: 100%;
+            width: 90%;
             font-size: 0.9rem;
-            padding: 0.75rem 1.25rem;
+            padding: 0;
             input[type="text"] {
                 padding: 0;
                 font-size: 0.9rem;
@@ -395,7 +395,7 @@ button {
             }
 
             .options-group {
-                margin-top: 1rem;
+                margin-bottom: 1rem;
                 padding: 0.5rem;
             }
 

static/css/order-hardware.css

@@ -136,7 +136,8 @@
     font-size: 1rem;
   }
 
-  #root-shop .panel .summary>.summary-form form {
+  #root-shop .panel .summary>.summary-form form,
+  #root-shop .panel .summary>.summary-form .order-bar {
     width: 100%;
   }
 
@@ -229,7 +230,8 @@
     font-size: .7rem;
   }
 
-  #root-shop .panel .summary>.summary-form form {
+  #root-shop .panel .summary>.summary-form form,
+  #root-shop .panel .summary>.summary-form .order-bar  {
     width: 100%;
   }
 
@@ -346,7 +348,8 @@
     font-size: .7rem;
   }
 
-  #root-shop .panel .summary>.summary-form form {
+  #root-shop .panel .summary>.summary-form form,
+  #root-shop .panel .summary>.summary-form .order-bar {
     width: 100%;
   }
 
@@ -611,7 +614,8 @@
     font-size: .7rem;
   }
 
-  #root-shop .panel .summary>.summary-form form {
+  #root-shop .panel .summary>.summary-form form,
+  #root-shop .panel .summary>.summary-form .order-bar {
     width: 100%;
   }
 

static/js/shop/OrderForm.jsx

@@ -5,6 +5,7 @@ import {ShowJSON} from "./ShowJSON";
 
 // #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
+import {OrderOptions} from "./OrderOptions";
 
 
 /**
@@ -29,6 +30,8 @@ export function OrderForm() {
     return (
         <div className="summary-form">
 
+            <OrderOptions/>
+
             <form onSubmit={submitForm} noValidate>
 
                 <input

static/js/shop/OrderPanel.jsx

@@ -47,11 +47,8 @@ export function OrderPanel({title, description}) {
 
         <CrateList/>
 
-        <OrderOptions/>
-
         <section className="summary">
             <SummaryOrder/>
-
             <OrderForm/>
         </section>
 

static/js/shop/ProductItem.jsx

@@ -62,7 +62,7 @@ export function ProductItem({card_index}) {
                     <img src="/images/shop/icon-add.svg" alt="add"/>
                 </button>
 
-                <Draggable draggableId={card.id} index={card_index}>
+                <Draggable draggableId={card.id + card_index} index={card_index}>
                     {(provided, snapshot) => (
                         <React.Fragment>
                             <img

static/js/shop/Shop.jsx

@@ -27,6 +27,7 @@ export function Shop() {
     const handleOnDragEnd = (drop_result, _provided) => {
         if (!drop_result.destination) {
             console.warn("No drop destination");
+            console.log(drop_result)
             return;
         }
         if (drop_result.source.droppableId === "backlog")

static/js/shop/options/Notification.jsx

@@ -21,7 +21,7 @@ export function Notification({id, tip, content, sideMenuIsOpen}) {
                 style={{display: 'inline'}}
                 show={show}
                 onToggle={() => setShow(false)}
-                overlay={<Tooltip id={id}>{tip}</Tooltip>}
+                overlay={props => <Tooltip id={id} {...props}>{tip}</Tooltip>}
                 rootClose={!sideMenuIsOpen}
             >
                 {content}

static/js/shop/options/components/Label.jsx

@@ -2,9 +2,9 @@ import React from "react";
 import {apply as json_logic_apply, add_operation as json_add_operation} from "json-logic-js";
 
 
-json_add_operation("lower", (some_str) => some_str.toLowerCase(some_str));
+json_add_operation("lower", (some_str) => some_str && some_str.toLowerCase(some_str));
-json_add_operation("upper", (some_str) => some_str.toUpperCase(some_str));
+json_add_operation("upper", (some_str) => some_str && some_str.toUpperCase(some_str));
-json_add_operation("capitalize", (some_str) => some_str.capitalizeFirstLetter(some_str));
+json_add_operation("capitalize", (some_str) => some_str && some_str.capitalizeFirstLetter(some_str));
 
 export function Label(target, id, data, {content}) {
     const resulting_string = json_logic_apply(content, data).flat().join("");

static/js/shop/options/components/Radio.jsx

@@ -41,22 +41,24 @@ class Radio extends Component {
                     {this.props.title}
                 </div>
                 {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
-                {this.props.variants.map((variant, _) => (
+                <div className="d-block">
-                    <div className={`form-check shop-radio-variant ${this.props.classes}`} key={key + variant}>
+                    {this.props.variants.map((variant, _) => (
-                        <input
+                        <div className={`form-check shop-radio-variant ${this.props.classes}`} key={key + variant}>
-                            className="form-check-input"
+                            <input
-                            type="radio"
+                                className="form-check-input"
-                            name={key}
+                                type="radio"
-                            id={key + variant}
+                                name={key}
-                            checked={this.state.variant === variant}
+                                id={key + variant}
-                            onClick={() => this.handleClick(variant)}
+                                checked={this.state.variant === variant}
-                            onChange={() => this.handleClick(variant)}
+                                onClick={() => this.handleClick(variant)}
-                        />
+                                onChange={() => this.handleClick(variant)}
-                        <label className="form-check-label" htmlFor={key + variant}>
+                            />
-                            {variant}
+                            <label className="form-check-label" htmlFor={key + variant}>
-                        </label>
+                                {variant}
-                    </div>
+                            </label>
-                ))}
+                        </div>
+                    ))}
+                </div>
             </div>
         );
     }

static/js/shop/options/components/Tip.jsx

@@ -7,7 +7,7 @@ export function Tip({id, tip}) {
             placement="auto"
             trigger={['click', 'hover', 'focus']}
             style={{display: 'inline'}}
-            overlay={<Tooltip id={id}>{tip}</Tooltip>}
+            overlay={props => <Tooltip id={id} {...props}>{tip}</Tooltip>}
             rootClose
         >
             <img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>

static/js/shop_data.js

@@ -67,7 +67,6 @@ const shop_data = {
                   title: "Desktop Environment",
                   outvar: "nuc_desktop",
                   variants: ["Gnome", "KDE"],
-                  tip: "Gnome has clean and minimalist design. KDE has more feature-rich and classic interface.",
                   fallback: 0,
                   classes: "form-check-inline ms-4"
                 }
@@ -79,7 +78,7 @@ const shop_data = {
                 {type: "Switch", args: {
                     title: "Include promotional USB stick",
                     outvar: "include_usb_stick_nuc",
-                    tip: "Choose if you need a USB stick and wish to receive configuration files via other electronic means (e.g. email or cloud).",
+                    tip: "Choose if you need a USB stick with device database and other relevant files. Alternative is to to receive them via other electronic means (e.g. email or cloud).",
                     fallback: false,
                   }}
               ]},
@@ -89,7 +88,7 @@ const shop_data = {
               {type: "Switch", args: {
                   title: "Include promotional USB stick",
                   outvar: "include_usb_stick",
-                  tip: "Choose if you need a USB stick and wish to receive configuration files via other electronic means (e.g. email or cloud).",
+                  tip: "Choose if you need a USB stick with device database and other relevant files. Alternative is to to receive them via other electronic means (e.g. email or cloud).",
                   fallback: true,
               }}
             ]},
@@ -203,8 +202,8 @@ const shop_data = {
                 {type: "Switch", args: {title: "Optical fiber", outvar: "optics", tip: "Use optical fiber instead of direct attach copper cable"}},
                 {"if": [
                   {"var": "optics"},
-                  {type: "Radio", args: {title: "Fiber cable length", outvar: "cable_len", variants: ["1 M", "3 M", "5 M"], tip: "The desired length of the optical fiber cable", fallback: 1}},
+                  {type: "Radio", args: {title: "Fiber cable length", outvar: "fiber_cable_len", variants: ["1 M", "3 M", "5 M"], tip: "The desired length of the optical fiber cable", fallback: 1}},
-                  {type: "Radio", args: {title: "Copper cable length", outvar: "cable_len", variants: ["0.5 M", "1 M", "2 M"], tip: "The desired length of the direct attach copper cable", fallback: 0}},
+                  {type: "Radio", args: {title: "Copper cable length", outvar: "copper_cable_len", variants: ["0.5 M", "1 M", "2 M"], tip: "The desired length of the direct attach copper cable", fallback: 0}},
                 ]}
               ]
             ]
@@ -271,8 +270,8 @@ const shop_data = {
               {type: "Switch", args: {title: "Optical fiber", outvar: "optics", tip: "Use optical fiber instead of direct attach copper cable"}},
               {"if": [
                 {"var": "optics"},
-                {type: "Radio", args: {title: "Fiber cable length", outvar: "cable_len", variants: ["1 M", "3 M", "5 M"], tip: "The desired length of the optical fiber cable", fallback: 1}},
+                {type: "Radio", args: {title: "Fiber cable length", outvar: "fiber_cable_len", variants: ["1 M", "3 M", "5 M"], tip: "The desired length of the optical fiber cable", fallback: 1}},
-                {type: "Radio", args: {title: "Copper cable length", outvar: "cable_len", variants: ["0.5 M", "1 M", "2 M"], tip: "The desired length of the direct attach copper cable", fallback: 0}},
+                {type: "Radio", args: {title: "Copper cable length", outvar: "copper_cable_len", variants: ["0.5 M", "1 M", "2 M"], tip: "The desired length of the direct attach copper cable", fallback: 0}},
               ]}
             ]
           ]
@@ -884,7 +883,7 @@ const shop_data = {
       size: 'small',
       type: 'hd68',
       options: [
-        {type: "Radio", args: {title: "Cable length", outvar: "cable_len", variants: ["1 M", "2 M", "3 M"], tip: "The desired length of the HD68 cable", fallback: 1}},
+        {type: "Radio", args: {title: "Cable length", outvar: "hd68_cable_len", variants: ["1 M", "2 M", "3 M"], tip: "The desired length of the HD68 cable", fallback: 1}},
       ],
       options_class: "hd68-idc",
       warnings: [