components#withSettings JavaScript Examples

Hi = withSettings(({ settings }) => (
    <React.Fragment>
        <CardContent>
            <p>
                <T
                    t={t}
                    k="wizard.hi"
                    link={
                        <A
                            key="letUsKnow"
                            external
                            href={settings.get('supportEmail')}
                        >
                            <T t={t} k="wizard.letUsKnow" key="letUsKnow" />
                        </A>
                    }
                />
            </p>
        </CardContent>
        <CardFooter>
            <Button type="success" href={`/provider/setup/enter-provider-data`}>
                <T t={t} k="wizard.continue" />
            </Button>
        </CardFooter>
    </React.Fragment>
))

PropertyTag = withSettings(({ settings, property }) => {
    const lang = settings.get('lang');
    const properties = settings.get('appointmentProperties');
    for (const [category, values] of Object.entries(properties)) {
        const prop = values.values[property];
        if (prop !== undefined) {
            return (
                <span key={property} className={`kip-tag kip-is-${property}`}>
                    {prop[lang]}
                </span>
            );
        }
    }
})

Hi = withSettings(({ settings }) => (
    <React.Fragment>
        <CardContent>
            <p>
                <T
                    t={t}
                    k="wizard.hi"
                    link={
                        <A
                            key="letUsKnow"
                            external
                            href={settings.get('supportEmail')}
                        >
                            <T t={t} k="wizard.letUsKnow" key="letUsKnow" />
                        </A>
                    }
                />
            </p>
        </CardContent>
        <CardFooter>
            <Button type="success" href={`/user/setup/enter-contact-data`}>
                <T t={t} k="wizard.continue" />
            </Button>
        </CardFooter>
    </React.Fragment>
))

Settings = withActions(withRouter(withSettings(BaseSettings)), [])

DataSecret = withSettings(
    ({ settings, secret, embedded, hideNotice }) => {
        const [succeeded, setSucceeded] = useState(false);
        const [failed, setFailed] = useState(false);

        const chunks = secret.match(/.{1,4}/g);

        const fragments = [];
        for (let i = 0; i < chunks.length; i++) {
            fragments.push(<F key={`${i}-main`}>{chunks[i]}</F>);
            if (i < chunks.length - 1)
                fragments.push(
                    <strong key={`${i}-dot`} style={{ userSelect: 'none' }}>
                        ·
                    </strong>
                );
        }

        const copy = () => {
            if (!copyToClipboard(secret)) setFailed(true);
            else setSucceeded(true);
        };

        return (
            <React.Fragment>
                {!embedded && (
                    <p className="kip-secrets-notice">
                        <T t={t} k="store-secrets.online.text" safe />
                    </p>
                )}
                <div
                    className={
                        'kip-secrets-box' + (embedded ? ' kip-is-embedded' : '')
                    }
                >
                    {
                        <React.Fragment>
                            <div className="kip-uid">
                                {!hideNotice && (
                                    <span>
                                        <T t={t} k="store-secrets.secret" />
                                    </span>
                                )}
                                <code>{fragments}</code>
                            </div>
                        </React.Fragment>
                    }
                </div>
                {!embedded && (
                    <div className="kip-secrets-links">
                        <Button
                            type={
                                failed ? 'danger' : succeeded ? '' : 'primary'
                            }
                            disabled={failed}
                            className="bulma-button bulma-is-small"
                            onClick={copy}
                        >
                            <T
                                t={t}
                                k={
                                    failed
                                        ? 'store-secrets.copy-failed'
                                        : succeeded
                                        ? 'store-secrets.copy-succeeded'
                                        : 'store-secrets.copy'
                                }
                            />
                        </Button>
                    </div>
                )}
            </React.Fragment>
        );
    }
)

BackupDataLink = withSettings(
    withActions(
        ({
            onSuccess,
            settings,
            keyPairs,
            downloadText,
            providerData,
            keyPairsAction,
            providerSecret,
            providerSecretAction,
            backupData,
            backupDataAction,
        }) => {
            const [initialized, setInitialized] = useState(false);

            let providerName;

            try {
                providerName = providerData.data.data.name
                    .replaceAll(' ', '-')
                    .replaceAll('.', '-')
                    .toLowerCase();
            } catch (e) {}

            useEffect(() => {
                if (initialized) return;
                setInitialized(true);
                keyPairsAction().then((kp) =>
                    providerSecretAction().then((ps) =>
                        backupDataAction(kp.data, ps.data)
                    )
                );
            });

            let blob;

            if (backupData !== undefined && backupData.status === 'succeeded') {
                blob = new Blob([str2ab(JSON.stringify(backupData.data))], {
                    type: 'application/octet-stream',
                });
            }

            const title = settings.get('title').toLowerCase();

            const dateString = formatDate(new Date());

            const filename = `${title}-backup-${dateString}-${providerName}.enc`;

            if (blob !== undefined)
                return (
                    <a
                        onClick={onSuccess}
                        className="bulma-button bulma-is-success"
                        download={filename}
                        href={URL.createObjectURL(blob)}
                        type="success"
                    >
                        {downloadText || (
                            <T t={t} k="wizard.download-backup-data" />
                        )}
                    </a>
                );

            return (
                <Message waiting type="warning">
                    <T t={t} k="wizard.generating-backup-data" />
                </Message>
            );
        },
        []
    )
)

Verify = withSettings(
    withActions(({ settings, contactData, contactDataAction }) => {
        const [initialized, setInitialized] = useState(false);

        useEffect(() => {
            if (initialized) return;
            contactDataAction();
            setInitialized(true);
        });

        const render = () => (
            <React.Fragment>
                <CardContent>
                    <p className="kip-verify-notice">
                        <T
                            t={t}
                            k="verify.text"
                            link={
                                <A
                                    key="letUsKnow"
                                    external
                                    href={settings.get('supportEmail')}
                                >
                                    <T
                                        t={t}
                                        k="wizard.letUsKnow"
                                        key="letUsKnow"
                                    />
                                </A>
                            }
                        />
                    </p>
                    <div className="kip-contact-data-box">
                        <ul>
                            <li>
                                <span>
                                    <T t={t} k="contact-data.email.label" />
                                </span>{' '}
                                {contactData.data.email || (
                                    <T t={t} k="contact-data.not-given" />
                                )}
                            </li>
                        </ul>
                    </div>
                    <div className="kip-contact-data-links">
                        <A
                            className="bulma-button bulma-is-small"
                            href="/user/setup/enter-contact-data"
                        >
                            <T t={t} k="contact-data.change" />
                        </A>
                    </div>
                </CardContent>
                <CardFooter>
                    <Button type="success" href={`/user/setup/finalize`}>
                        <T t={t} k="wizard.continue" />
                    </Button>
                </CardFooter>
            </React.Fragment>
        );
        return <WithLoader resources={[contactData]} renderLoaded={render} />;
    }, [])
)

Settings = withActions(
    withRouter(
        withSettings(
            ({
                action,
                type,
                settings,
                keys,
                keysAction,
                keyPairs,
                keyPairsAction,
                providerSecret,
                providerSecretAction,
                backupData,
                backupDataAction,
                providerData,
                providerDataAction,
                verifiedProviderData,
                verifiedProviderDataAction,
                router,
            }) => {
                const [deleting, setDeleting] = useState(false);
                const [loggingOut, setLoggingOut] = useState(false);
                const [initialized, setInitialized] = useState(false);
                const [view, setView] = useState('verified');

                // we load all the resources we need
                useEffect(() => {
                    if (initialized) return;

                    keysAction();
                    verifiedProviderDataAction();
                    providerDataAction();

                    setInitialized(true);
                });

                let modal;

                const title = settings.get('title').toLowerCase();

                const cancel = () => {
                    router.navigateToUrl('/provider/settings');
                };

                const deleteData = () => {
                    setDeleting(true);
                    const backend = settings.get('backend');
                    backend.local.deleteAll('provider::');
                    setDeleting(false);
                    router.navigateToUrl('/provider/deleted');
                };

                const logOut = () => {
                    setLoggingOut(true);

                    const kpa = keyPairsAction('logoutKeyPairs');
                    kpa.then((kp) => {
                        const psa = providerSecretAction(
                            undefined,
                            'logoutProviderSecret'
                        );
                        psa.then((ps) => {
                            // we give the backup data action a different name to avoid it being rejected
                            // in case there's already a backup in progress... It will still be queued
                            // up to ensure no conflicts can occur.
                            const ba = backupDataAction(
                                kp.data,
                                ps.data,
                                'logout'
                            );
                            ba.then(() => {
                                const backend = settings.get('backend');
                                backend.local.deleteAll('provider::');
                                router.navigateToUrl('/provider/logged-out');
                            });
                            ba.catch(() => setLoggingOut(false));
                        });
                        psa.catch(() => setLoggingOut(false));
                    });
                    kpa.catch(() => setLoggingOut(false));
                };

                if (action === 'backup') {
                    modal = (
                        <Modal
                            onClose={cancel}
                            save="Sicherungsdatei herunterladen"
                            title={<T t={t} k="backup-modal.title" />}
                            onCancel={cancel}
                            cancel={<T t={t} k="backup-modal.close" />}
                            saveType="success"
                        >
                            <p>
                                <T t={t} k="backup-modal.text" />
                            </p>
                            <hr />
                            <DataSecret
                                secret={providerSecret.data}
                                embedded={true}
                                hideNotice={true}
                            />
                            <Button
                                style={{ marginRight: '1em' }}
                                type="success"
                                onClick={() =>
                                    copyToClipboard(providerSecret.data)
                                }
                            >
                                Datenschlüssel kopieren
                            </Button>
                            <BackupDataLink
                                downloadText={
                                    <T t={t} k="backup-modal.download-backup" />
                                }
                                onSuccess={cancel}
                            />
                        </Modal>
                    );
                } else if (action === 'delete') {
                    modal = (
                        <Modal
                            onClose={cancel}
                            save={<T t={t} k="delete" />}
                            disabled={deleting}
                            waiting={deleting}
                            title={<T t={t} k="delete-modal.title" />}
                            onCancel={cancel}
                            onSave={deleteData}
                            saveType="danger"
                        >
                            <p>
                                <T
                                    t={t}
                                    k={
                                        deleting
                                            ? 'delete-modal.deleting-text'
                                            : 'delete-modal.text'
                                    }
                                />
                            </p>
                        </Modal>
                    );
                } else if (action === 'logout') {
                    modal = (
                        <Modal
                            onClose={cancel}
                            save={<T t={t} k="log-out" />}
                            disabled={loggingOut}
                            waiting={loggingOut}
                            title={<T t={t} k="log-out-modal.title" />}
                            onCancel={cancel}
                            onSave={logOut}
                            saveType="warning"
                        >
                            <p>
                                <T
                                    t={t}
                                    k={
                                        loggingOut
                                            ? 'log-out-modal.logging-out'
                                            : 'log-out-modal.text'
                                    }
                                />
                            </p>
                            <hr />
                            <DataSecret
                                secret={providerSecret.data}
                                embedded={true}
                                hideNotice={true}
                            />
                            <Button
                                style={{ marginRight: '1em' }}
                                type="success"
                                onClick={() =>
                                    copyToClipboard(providerSecret.data)
                                }
                            >
                                Datenschlüssel kopieren
                            </Button>
                            <BackupDataLink
                                downloadText={
                                    <T t={t} k="backup-modal.download-backup" />
                                }
                            />
                        </Modal>
                    );
                }

                const render = () => {
                    return (
                        <div className="kip-provider-settings">
                            {modal}
                            <CardContent>
                                <h2>
                                    <T t={t} k="provider-data.title" />
                                </h2>

                                <p style={{ marginBottom: '1em' }}>
                                    <T
                                        t={t}
                                        k="provider-data.verified-vs-unverifired-desc"
                                    />
                                </p>

                                <DropdownMenu
                                    title={
                                        <F>
                                            <Icon icon="calendar" />{' '}
                                            <T t={t} k={`settings.${view}`} />
                                        </F>
                                    }
                                >
                                    <DropdownMenuItem
                                        icon="calendar"
                                        onClick={() => setView('verified')}
                                    >
                                        <T t={t} k={`settings.verified`} />
                                    </DropdownMenuItem>
                                    <DropdownMenuItem
                                        icon="list"
                                        onClick={() => setView('local')}
                                    >
                                        <T t={t} k={`settings.local`} />
                                    </DropdownMenuItem>
                                </DropdownMenu>
                                <ProviderData
                                    providerData={
                                        view === 'verified'
                                            ? verifiedProviderData
                                            : providerData
                                    }
                                    verified={view === 'verified'}
                                />
                            </CardContent>
                            <CardFooter>
                                <div className="kip-buttons">
                                    <Button
                                        type="success"
                                        href="/provider/settings/backup"
                                    >
                                        <T t={t} k="backup" />
                                    </Button>
                                    <Button
                                        type="warning"
                                        href="/provider/settings/logout"
                                    >
                                        <T t={t} k="log-out" />
                                    </Button>
                                    {false && (
                                        <Button
                                            type="danger"
                                            href="/provider/settings/delete"
                                        >
                                            <T t={t} k="delete" />
                                        </Button>
                                    )}
                                </div>
                            </CardFooter>
                        </div>
                    );
                };

                // we wait until all resources have been loaded before we display the form
                return (
                    <WithLoader
                        resources={[
                            keyPairs,
                            providerData,
                            verifiedProviderData,
                        ]}
                        renderLoaded={render}
                    />
                );
            }
        )
    ),
    []
)

Settings = withActions(
    withSettings(
        withRouter(
            ({ settings, action, router, userSecret, backupDataAction }) => {
                const [loggingOut, setLoggingOut] = useState(false);

                let logOutModal;

                const cancel = () => {
                    router.navigateToUrl('/user/settings');
                };

                const logOut = () => {
                    setLoggingOut(true);
                    const backend = settings.get('backend');
                    // we perform a backup before logging the user out...
                    backupDataAction(userSecret.data, 'logout').then(() => {
                        backend.local.deleteAll('user::');
                        setLoggingOut(false);
                        router.navigateToUrl('/user/logged-out');
                    });
                };

                if (action === 'logout') {
                    logOutModal = (
                        <Modal
                            onClose={cancel}
                            save={<T t={t} k="log-out" />}
                            disabled={loggingOut}
                            waiting={loggingOut}
                            title={<T t={t} k="log-out-modal.title" />}
                            onCancel={cancel}
                            onSave={logOut}
                            saveType="warning"
                        >
                            <p>
                                <T
                                    t={t}
                                    k={
                                        loggingOut
                                            ? 'log-out-modal.logging-out'
                                            : 'log-out-modal.text'
                                    }
                                />
                            </p>
                            <hr />
                            {userSecret !== undefined && (
                                <StoreOnline
                                    secret={userSecret.data}
                                    embedded={true}
                                    hideNotice={true}
                                />
                            )}
                        </Modal>
                    );
                }

                return (
                    <F>
                        <CardContent>
                            <div className="kip-user-settings">
                                {logOutModal}
                                <h2>
                                    <T t={t} k="user-data.title" />
                                </h2>
                                <p>
                                    <T t={t} k="user-data.notice" />
                                </p>
                            </div>
                        </CardContent>
                        <CardFooter>
                            <div className="kip-buttons">
                                <Button
                                    type="warning"
                                    href="/user/settings/logout"
                                >
                                    <T t={t} k="log-out" />
                                </Button>
                            </div>
                        </CardFooter>
                    </F>
                );
            }
        )
    ),
    []
)

Finalize = withForm(
    withSettings(
        withRouter(
            ({
                settings,
                router,
                form: { set, data, error, valid, reset },
            }) => {
                const [initialized, setInitialized] = useState(false);
                const [modified, setModified] = useState(false);
                const [submitting, setSubmitting] = useState(false);
                const [tv, setTV] = useState(0);
                const user = useUser();
                useEffect(async () => {
                    if (initialized) return;
                    setInitialized(true);

                    await user.initialize();

                    const initialData = {
                        distance: 5,
                    };
                    for (const [k, v] of Object.entries(
                        t['contact-data'].properties
                    )) {
                        for (const [kv, vv] of Object.entries(v.values)) {
                            initialData[kv] = vv._default;
                        }
                    }
                    reset(user.queueData || initialData);
                });

                const submit = async () => {
                    setSubmitting(true);

                    // we store the queue data
                    user.queueData = data;

                    const result = await user.getToken({});

                    setSubmitting(false);

                    if (result.status === Status.Failed) return;

                    await user.backupData();

                    router.navigateToUrl('/user/setup/store-secrets');
                };

                const setAndMarkModified = (key, value) => {
                    setModified(true);
                    set(key, value);
                };

                const properties = Object.entries(
                    t['contact-data'].properties
                ).map(([k, v]) => {
                    const items = Object.entries(v.values).map(([kv, vv]) => (
                        <li key={kv}>
                            <Switch
                                id={kv}
                                checked={data[kv] || false}
                                onChange={(value) =>
                                    setAndMarkModified(kv, value)
                                }
                            >
                                &nbsp;
                            </Switch>

                            <label htmlFor={kv}>
                                <T
                                    t={t}
                                    k={`contact-data.properties.${k}.values.${kv}`}
                                />
                            </label>
                        </li>
                    ));

                    return (
                        <F key={k}>
                            <h2>
                                <T
                                    t={t}
                                    k={`contact-data.properties.${k}.title`}
                                />
                            </h2>
                            <ul className="kip-properties">{items}</ul>
                        </F>
                    );
                });

                const render = () => {
                    let failedMessage;
                    let failed;

                    if (
                        getToken !== undefined &&
                        getToken.status === 'failed'
                    ) {
                        failed = true;
                        if (getToken.error.error.code === 401) {
                            failedMessage = (
                                <Message type="danger">
                                    <T t={t} k="wizard.failed.invalid-code" />
                                </Message>
                            );
                        }
                    }

                    if (failed && !failedMessage)
                        failedMessage = (
                            <Message type="danger">
                                <T t={t} k="wizard.failed.notice" />
                            </Message>
                        );

                    return (
                        <React.Fragment>
                            <CardContent>
                                {failedMessage}
                                <div className="kip-finalize-fields">
                                    <ErrorFor error={error} field="zipCode" />
                                    <RetractingLabelInput
                                        value={data.zipCode || ''}
                                        onChange={(value) =>
                                            setAndMarkModified('zipCode', value)
                                        }
                                        label={
                                            <T
                                                t={t}
                                                k="contact-data.zip-code"
                                            />
                                        }
                                    />
                                    <label
                                        className="kip-control-label"
                                        htmlFor="distance"
                                    >
                                        <T
                                            t={t}
                                            k="contact-data.distance.label"
                                        />
                                        <span className="kip-control-notice">
                                            <T
                                                t={t}
                                                k="contact-data.distance.notice"
                                            />
                                        </span>
                                    </label>
                                    <ErrorFor error={error} field="distance" />
                                    <RichSelect
                                        id="distance"
                                        value={data.distance || 5}
                                        onChange={(value) =>
                                            setAndMarkModified(
                                                'distance',
                                                value.value
                                            )
                                        }
                                        options={[
                                            {
                                                value: 5,
                                                description: (
                                                    <T
                                                        t={t}
                                                        k="contact-data.distance.option"
                                                        distance={5}
                                                    />
                                                ),
                                            },
                                            {
                                                value: 10,
                                                description: (
                                                    <T
                                                        t={t}
                                                        k="contact-data.distance.option"
                                                        distance={10}
                                                    />
                                                ),
                                            },
                                            {
                                                value: 20,
                                                description: (
                                                    <T
                                                        t={t}
                                                        k="contact-data.distance.option"
                                                        distance={20}
                                                    />
                                                ),
                                            },
                                            {
                                                value: 30,
                                                description: (
                                                    <T
                                                        t={t}
                                                        k="contact-data.distance.option"
                                                        distance={30}
                                                    />
                                                ),
                                            },
                                            {
                                                value: 40,
                                                description: (
                                                    <T
                                                        t={t}
                                                        k="contact-data.distance.option"
                                                        distance={40}
                                                    />
                                                ),
                                            },
                                            {
                                                value: 50,
                                                description: (
                                                    <T
                                                        t={t}
                                                        k="contact-data.distance.option"
                                                        distance={50}
                                                    />
                                                ),
                                            },
                                        ]}
                                    />
                                    {properties}
                                </div>
                            </CardContent>
                            <CardFooter>
                                <Button
                                    waiting={submitting}
                                    type={failed ? 'danger' : 'success'}
                                    onClick={submit}
                                    disabled={submitting || !valid}
                                >
                                    <T
                                        t={t}
                                        k={
                                            failed
                                                ? 'wizard.failed.title'
                                                : submitting
                                                ? 'wizard.please-wait'
                                                : 'wizard.continue'
                                        }
                                    />
                                </Button>
                            </CardFooter>
                        </React.Fragment>
                    );
                };
                return <WithLoader resources={[]} renderLoaded={render} />;
            }
        )
    ),
    FinalizeForm,
    'form'
)