Modal Wizard

1
import {useSelector, useDispatch} from 'react-redux';
2
import {
3
    Button,
4
    Form,
5
    IDispatch,
6
    InputConnected,
7
    InputSelectors,
8
    PlasmaState,
9
    Label,
10
    ModalWizard,
11
    openModal,
12
    Radio,
13
    RadioSelectConnected,
14
    RadioSelectSelectors,
15
} from '@coveord/plasma-react';
16

17
const containsCoveo = (str: string) => str.trim().toLowerCase().includes('coveo');
18

19
const Demo = () => {
20
    const selectedPath = useSelector((state: PlasmaState) =>
21
        RadioSelectSelectors.getValue(state, {id: 'radio-step-1'})
22
    );
23
    const inputTwoValue = useSelector(
24
        (state: PlasmaState) => InputSelectors.getValue(state, {id: 'input-step-2'}) || ''
25
    );
26
    const dispatch: IDispatch = useDispatch();
27

28
    const validateStep = (currentStep: number, numberOfSteps: number) => {
29
        if (currentStep === 0) {
30
            return {
31
                isValid: !!selectedPath,
32
                message: !selectedPath && 'Select a path to continue.',
33
            };
34
        } else if (currentStep === 1) {
35
            if (!inputTwoValue.trim()) {
36
                return {isValid: false, message: 'The input must have some value to continue.'};
37
            } else if (!containsCoveo(inputTwoValue)) {
38
                return {
39
                    isValid: true,
40
                    message: 'The value you entered is fine for now, but might cause problems later.',
41
                };
42
            } else {
43
                return {isValid: true};
44
            }
45
        } else if (currentStep === numberOfSteps - 1) {
46
            return {
47
                isValid: containsCoveo(inputTwoValue),
48
                message: !containsCoveo(inputTwoValue) && 'The input at step 2 must contain "coveo" to finish.',
49
            };
50
        }
51
        return {isValid: true};
52
    };
53

54
    return (
55
        <>
56
            <Button name="Open wizard" enabled primary onClick={() => dispatch(openModal('standard-wizard'))} />
57
            <ModalWizard
58
                id="standard-wizard"
59
                title="Wizard 🧙‍♂️"
60
                onFinish={(close) => {
61
                    alert('Congratulations! You completed the wizard');
62
                    close();
63
                }}
64
                validateStep={validateStep}
65
                isDirty={!!selectedPath || !!inputTwoValue}
66
                modalFooterChildren={(currentStep, numberOfSteps) =>
67
                    currentStep < numberOfSteps - 1 ? null : <div className="flex-auto">Last Step!</div>
68
                }
69
            >
70
                <Form title="Step 1" mods={['mod-form-top-bottom-padding', 'mod-header-padding']}>
71
                    <RadioSelectConnected id="radio-step-1">
72
                        <Radio id="path1" name="wizardPath" value="redhorn">
73
                            <Label>Pass over the mountain</Label>
74
                        </Radio>
75
                        <Radio id="path2" name="wizardPath" value="moria">
76
                            <Label>Go under the mountain through Moria</Label>
77
                        </Radio>
78
                    </RadioSelectConnected>
79
                </Form>
80
                <Form title="Step 2" mods={['mod-form-top-bottom-padding', 'mod-header-padding']}>
81
                    <InputConnected
82
                        id="input-step-2"
83
                        autoComplete="off"
84
                        validateOnChange
85
                        validate={(value: string) => !!value.trim()}
86
                        labelTitle={<Label invalidMessage="Cannot be left empty">Enter something to continue</Label>}
87
                    />
88
                </Form>
89
                {selectedPath === 'redhorn' && (
90
                    <Form title="Step 3" mods={['mod-form-top-bottom-padding', 'mod-header-padding']}>
91
                        Its longer, but we'll get there!
92
                    </Form>
93
                )}
94
                <Form
95
                    title={selectedPath === 'moria' ? 'Step 3' : 'Step 4'}
96
                    mods={['mod-form-top-bottom-padding', 'mod-header-padding']}
97
                >
98
                    Enter "coveo" at step two to finish!
99
                </Form>
100
            </ModalWizard>
101
        </>
102
    );
103
};
104
export default Demo;