Add more order options and enhance the look of them

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

sass/css/_shop.scss

@@ -393,6 +393,15 @@ button {
                 font-size: 0.9rem;
                 line-height: 1.1;
             }
+
+            .options-group {
+                margin-top: 1rem;
+                padding: 0.5rem;
+            }
+
+            .shop-radio-label {
+                font-weight: bold;
+            }
         }
 
         .crate {

static/js/shop/OrderOptions.jsx

@@ -31,7 +31,7 @@ export function OrderOptions() {
     });
 
     return (
-        <div className="order-bar border rounded">
+        <div className="order-bar">
             {options}
         </div>
     )

static/js/shop/options/Options.jsx

@@ -24,7 +24,7 @@ export function ProcessOptions({options, data, target, id}) {
                 return componentsList[options.type](target, id + options.type, data, options.args);
             } else if (options.type === "Group") {
                 return (
-                    <div className="border rounded" key={id + "group"}>
+                    <div className="border rounded options-group" key={id + "group"}>
                         {ProcessOptions({
                             options: json_logic_apply(options.items, data),
                             data: data,

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

@@ -36,13 +36,13 @@ class Radio extends Component {
         let key = this.props.id + this.props.outvar;
         return (
             <div className="shop-radio" key={this.props.id}>
-                <div style={{"display": "inline"}}>
+                <div style={{"display": "inline"}} className="shop-radio-label">
                     {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
                     {this.props.title}
                 </div>
                 {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
                 {this.props.variants.map((variant, _) => (
-                    <div className="form-check" key={key + variant}>
+                    <div className="form-check shop-radio-variant" key={key + variant}>
                         <input
                             className="form-check-input"
                             type="radio"

static/js/shop_data.js

@@ -48,42 +48,81 @@ const shop_data = {
 
   orderOptions: {
     options: [
-      {type: "Switch", args: {
+      {"type": "Group", items:[
-        title: "Include optional pre-installed Intel® NUC mini-computer",
+        {type: "Switch", args: {
+          title: "Include optional pre-installed Intel® NUC mini-computer",
           outvar: "nuc",
           tip: "OS: latest stable NixOS with Gnome or KDE with pre-installed ARTIQ software. " +
                "Hardware (other choices available): Intel® NUC 13 Pro Kit NUC13ANKi7, i7-1360P CPU, " +
                "32GB RAM from reputable vendor, 1TB M.2 NVM Express SSD from reputable vendor.",
           fallback: true,
-      }},
+        }},
-      {
+        {
-        "if": [
+          "if": [
-          {"var": "nuc"},
+            {"var": "nuc"},
-          [
+            [
-            {
+              {
-              type: "Radio",
+                type: "Radio",
-              args: {
+                args: {
-                title: "Desktop Environment",
+                  title: "Desktop Environment",
-                outvar: "nuc_desktop",
+                  outvar: "nuc_desktop",
-                variants: ["Gnome", "KDE"],
+                  variants: ["Gnome", "KDE"],
-                tip: "Gnome has clean and minimalist design. KDE has more feature-rich and classic interface.",
+                  tip: "Gnome has clean and minimalist design. KDE has more feature-rich and classic interface.",
-                fallback: 0
+                  fallback: 0
-              }
+                }
-            },
+              },
-            {type: "Line", args: {title: "Additional software to be pre-installed", outvar: "software", fallback: "",
+              {type: "Line", args: {title: "Additional software to be pre-installed", outvar: "software", fallback: "",
-                tip: "Pre-install additional software, if needed."}},
+                  tip: "Pre-install additional software, if needed."}},
-          ],
+            ],
-          {"if": [
+            {"if": [
-              {"var": "ext_data.has_crate"},
+                {"var": "ext_data.has_crate"},
-              {type: "Switch", args: {
+                {type: "Switch", args: {
-                  title: "Opt-out from promotional USB stick",
+                    title: "Opt-out from promotional USB stick",
-                  outvar: "usb_stick_opt_out",
+                    outvar: "usb_stick_opt_out",
-                  tip: "Choose if you don't need a USB stick and wish to receive configuration files via other electronic means (e.g. email or cloud).",
+                    tip: "Choose if you don't need a USB stick and wish to receive configuration files via other electronic means (e.g. email or cloud).",
-                  fallback: false,
+                    fallback: false,
-              }}
+                }}
-          ]},
+            ]},
-        ]
+          ]
-      },
+        },
+      ]},
+      {"type": "Group", items: [
+        {
+          type: "Radio",
+          args: {
+            title: "Shipping options",
+            outvar: "shipping",
+            variants: [
+              "Incoterms 2020 FCA",
+              "Incoterms 2020 DAP",
+              "Prepay and add shipping (only available to credit customers)"
+            ],
+            fallback: 0
+          }
+        },
+        {"if": [
+            {"==": [{"var": "shipping"}, "Incoterms 2020 FCA"]},
+            {type: "Line", args: {title: "Please provide your carrier account information and/or other shipping instructions",
+                outvar: "shipping_instructions", fallback: ""}}
+        ]},
+        {"if": [
+            {"==": [{"var": "shipping"}, "Incoterms 2020 DAP"]},
+            {type: "Line", args: {title: "Please provide delivery address",
+                outvar: "shipping_instructions", fallback: "",
+                tip: "Additional customs fees may be charged to you by the carrier at the time of delivery."}}
+        ]},
+        {"if": [
+            {"==": [{"var": "shipping"}, "Prepay and add shipping (only available to credit customers)"]},
+            [{type: "Radio", args: {title: "In case of additional customs fees",
+                outvar: "prepay_fees_handling", fallback: 0,
+                variants: [
+                  "Add to your final invoice",
+                  "Carrier bills you directly"
+            ]}},
+            {type: "Line", args: {title: "Please provide delivery address",
+                outvar: "shipping_instructions", fallback: "",}}],
+        ]},
+      ]}
     ],
 
     prices: [{