Add more order options and enhance the look of them

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-01-31 11:40:33 +08:00
parent bcc8db6819
commit 0b5797b1ba
6 changed files with 84 additions and 36 deletions

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

@ -48,6 +48,7 @@ const shop_data = {
orderOptions: { orderOptions: {
options: [ options: [
{"type": "Group", items:[
{type: "Switch", args: { {type: "Switch", args: {
title: "Include optional pre-installed Intel® NUC mini-computer", title: "Include optional pre-installed Intel® NUC mini-computer",
outvar: "nuc", outvar: "nuc",
@ -84,6 +85,44 @@ const shop_data = {
]}, ]},
] ]
}, },
]},
{"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: [{ prices: [{