Add more order options and enhance the look of them
Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
parent
bcc8db6819
commit
0b5797b1ba
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -31,7 +31,7 @@ export function OrderOptions() {
|
|||
});
|
||||
|
||||
return (
|
||||
<div className="order-bar border rounded">
|
||||
<div className="order-bar">
|
||||
{options}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -48,42 +48,81 @@ const shop_data = {
|
|||
|
||||
orderOptions: {
|
||||
options: [
|
||||
{type: "Switch", args: {
|
||||
title: "Include optional pre-installed Intel® NUC mini-computer",
|
||||
{"type": "Group", items:[
|
||||
{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": [
|
||||
{"var": "nuc"},
|
||||
[
|
||||
{
|
||||
type: "Radio",
|
||||
args: {
|
||||
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
|
||||
}
|
||||
},
|
||||
{type: "Line", args: {title: "Additional software to be pre-installed", outvar: "software", fallback: "",
|
||||
tip: "Pre-install additional software, if needed."}},
|
||||
],
|
||||
{"if": [
|
||||
{"var": "ext_data.has_crate"},
|
||||
{type: "Switch", args: {
|
||||
title: "Opt-out from promotional USB stick",
|
||||
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).",
|
||||
fallback: false,
|
||||
}}
|
||||
]},
|
||||
]
|
||||
},
|
||||
}},
|
||||
{
|
||||
"if": [
|
||||
{"var": "nuc"},
|
||||
[
|
||||
{
|
||||
type: "Radio",
|
||||
args: {
|
||||
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
|
||||
}
|
||||
},
|
||||
{type: "Line", args: {title: "Additional software to be pre-installed", outvar: "software", fallback: "",
|
||||
tip: "Pre-install additional software, if needed."}},
|
||||
],
|
||||
{"if": [
|
||||
{"var": "ext_data.has_crate"},
|
||||
{type: "Switch", args: {
|
||||
title: "Opt-out from promotional USB stick",
|
||||
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).",
|
||||
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: [{
|
||||
|
|
|
|||
Loading…
Reference in New Issue