https://muj.reportermagazin.cz/layouts/reporter-magazin/sales-funn…/subscriptions/subscription-company.jsx

1const {useEffect, useState} = React;
2
3const SubscriptionCompany = () => {
4
5    const [amount, setAmount] = useState(1);
6    const [form, setForm] = useState({
7        funnel_url_key: 'pro-firmu',
8        amount: amount
9    });
10    const config = FORM_CONTRACT;
11
12    useEffect(() => {
13
14        config.user = config.user || {};
15
16    }, []);
17
18    useEffect(() => {
19        localStorage.setItem('subscription_company_form', JSON.stringify(form));
20    }, [form]);
21
22    useEffect(() => {
23        handleFieldChange('amount', amount);
24    }, [amount]);
25
26    const handleFieldChange = (key, value) => {
27
28        if (key === 'subscription_type') {
29
30            config.user = config.user || {};
31        }
32
33        setForm((prevValue) => {
34            return {
35                ...prevValue,
36                [key]: value
37            };
38        });
39    }
40
41    return (
42        <div>
43            <div className="subscription__picker">
44                <label className={"text-center d-block"}>Zvolte počet předplatných</label>
45                <div className="subscription__picker__value">
46                    <div className="value-button" id="decrease" onClick={() => setAmount(amount >= 2 ? amount - 1 : amount)}>
47                        <span>-</span>
48                    </div>
49                    <input readOnly type="number" value={amount} />
50                    <div className="value-button" id="increase" onClick={() => setAmount(amount + 1)}>
51                        <span>+</span>
52                    </div>
53                </div>
54            </div>
55            {config.form_config['subscription-types'].length > 1 && (<h2>VYBERTE SI BALÍČEK</h2>)}
56            <div className="subscription__categories">
57                <div className="row">
58                    {[['firemni-digi-mesicne', false], ['firemni-standard', true], ['firemni-premium', false]].map((type) => {
59                        return (
60                            <SubscriptionBox
61                                link="/pro-firmu"
62                                handleSubscriptionSelect={handleFieldChange}
63                                subscriptionTypeCode={type[0]}
64                                highlighted={type[1]}
65                                config={config}
66                                amount={amount}
67                            />
68                        )
69                    })}
70                </div>
71            </div>
72        </div>
73    );
74
75};