hooks#useProvider JavaScript Examples

Setup = ({ route }) => {
    const provider = useProvider();
    const router = useRouter();

    useEffectOnce(async () => {
        if (provider.data !== null && provider.data.submittedAt)
            router.navigateToUrl('/provider/schedule');
        if (provider.keyPairs === null) await provider.initialize();
        if (Object.keys(route.hashParams).length > 0)
            provider.data = route.hashParams; // pre-filled data
    });

    return (
        <React.Fragment>
            <Wizard
                route={route}
                page={route.handler.props.page || 'hi'}
                status={route.handler.props.status}
            />
        </React.Fragment>
    );
}

Dashboard = ({
    route: {
        handler: {
            props: { tab, action, secondaryAction, id },
        },
    },
    route,
}) => {
    const provider = useProvider();

    useInterval(async () => {
        const response = await provider.checkData().get();
    }, 10000);

    let content;

    switch (tab) {
        case 'settings':
            content = <Settings key="settings" action={action} />;
            break;
        case 'schedule':
            content = (
                <Schedule
                    action={action}
                    route={route}
                    secondaryAction={secondaryAction}
                    id={id}
                    key="schedule"
                />
            );
            break;
    }

    let invalidKeyMessage;

    if (provider.verifiedData === null) {
        invalidKeyMessage = (
            <Message waiting type="warning">
                <T t={t} k="invalid-key" />
            </Message>
        );
    }

    return (
        <CenteredCard size="fullwidth" tight>
            <CardHeader>
                <Tabs>
                    <Tab active={tab === 'schedule'} href="/provider/schedule">
                        <T t={t} k="schedule.title" />
                    </Tab>
                    <Tab active={tab === 'settings'} href="/provider/settings">
                        <T t={t} k="settings.title" />
                    </Tab>
                    <Tab
                        last
                        icon={<Icon icon="sign-out-alt" />}
                        active={tab === 'log-out'}
                        href="/provider/settings/logout"
                    >
                        <T t={t} k="log-out" />
                    </Tab>
                </Tabs>
            </CardHeader>
            {invalidKeyMessage}
            {content}
        </CenteredCard>
    );
}

Schedule = ({ action, secondaryAction, id, route }) => {
    const [view, setView] = useState('calendar');
    const [lastUpdated, setLastUpdated] = useState(new Date().toLocaleString());
    const provider = useProvider();

    let startDate;

    if (action !== undefined) {
        const result = /^(\d{4})-(\d{2})-(\d{2})$/.exec(action);
        if (result) {
            const [, year, month, day] = result;
            startDate = getMonday(
                new Date(Number(year), Number(month) - 1, Number(day))
            );
        }
    }

    if (startDate === undefined)
        startDate = getMonday(new Date().setHours(0, 0, 0, 0));

    useEffectOnce(async () => {
        const endDate = new Date(startDate);
        endDate.setUTCDate(endDate.getUTCDate() + 7);
        // we load all the necessary data
        const response = await provider
            .appointments()
            .get({ from: startDate.toISOString(), to: endDate.toISOString() });
        console.log(response);
    });

    if (action === undefined) {
        action = formatDate(startDate);
    }

    const dateString = formatDate(startDate);

    const render = () => {
        let newAppointmentModal;
        let content;
        const appointments = provider.appointments().result().data;
        switch (view) {
            case 'calendar':
                content = (
                    <WeekCalendar
                        startDate={startDate}
                        action={action}
                        secondaryAction={secondaryAction}
                        id={id}
                        appointments={appointments}
                    />
                );
                break;
            case 'booking-list':
                content = (
                    <AppointmentsList
                        startDate={startDate}
                        id={id}
                        action={action}
                        secondaryAction={secondaryAction}
                        appointments={appointments}
                    />
                );
                break;
        }

        if (secondaryAction === 'new' || secondaryAction === 'edit')
            newAppointmentModal = (
                <NewAppointment
                    route={route}
                    appointments={appointments}
                    action={action}
                    id={id}
                />
            );

        return (
            <div className="kip-schedule">
                <CardContent>
                    <div className="kip-non-printable">
                        {newAppointmentModal}
                        <Button href={`/provider/schedule/${dateString}/new`}>
                            <T t={t} k="schedule.appointment.add" />
                        </Button>
                        &nbsp;
                        <DropdownMenu
                            title={
                                <>
                                    <Icon icon="calendar" />{' '}
                                    <T t={t} k={`schedule.${view}`} />
                                </>
                            }
                        >
                            <DropdownMenuItem
                                icon="calendar"
                                onClick={() => setView('calendar')}
                            >
                                <T t={t} k={`schedule.calendar`} />
                            </DropdownMenuItem>
                            <DropdownMenuItem
                                icon="list"
                                onClick={() => setView('booking-list')}
                            >
                                <T t={t} k={`schedule.booking-list`} />
                            </DropdownMenuItem>
                        </DropdownMenu>
                        <hr />
                    </div>
                    {content}
                </CardContent>
                <Message type="info" waiting>
                    <T t={t} k="schedule.updating" lastUpdated={lastUpdated} />
                </Message>
            </div>
        );
    };

    // we wait until all resources have been loaded before we display the form
    return (
        <WithLoader
            resources={[provider.appointments().result()]}
            renderLoaded={render}
        />
    );
}

BaseProviderData = ({
    embedded,
    form: { set, data, error, valid, reset },
}) => {
    const [modified, setModified] = useState(false);

    const router = useRouter();
    const provider = useProvider();

    const onSubmit = () => {
        if (!valid) return;
        provider.data = data;
        // we redirect to the 'verify' step
        router.navigateToUrl(`/provider/setup/verify`);
    };

    useEffectOnce(() => {
        reset(provider.data || {});
        setModified(false);
    });

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

    const controls = (
        <React.Fragment>
            <ErrorFor error={error} field="name" />
            <RetractingLabelInput
                value={data.name || ''}
                onChange={(value) => setAndMarkModified('name', value)}
                label={<T t={t} k="provider-data.name" />}
            />
            <ErrorFor error={error} field="street" />
            <RetractingLabelInput
                value={data.street || ''}
                onChange={(value) => setAndMarkModified('street', value)}
                label={<T t={t} k="provider-data.street" />}
            />
            <ErrorFor error={error} field="zipCode" />
            <RetractingLabelInput
                value={data.zipCode || ''}
                onChange={(value) => setAndMarkModified('zipCode', value)}
                label={<T t={t} k="provider-data.zip-code" />}
            />
            <ErrorFor error={error} field="city" />
            <RetractingLabelInput
                value={data.city || ''}
                onChange={(value) => setAndMarkModified('city', value)}
                label={<T t={t} k="provider-data.city" />}
            />
            <ErrorFor error={error} field="website" />
            <RetractingLabelInput
                value={data.website || ''}
                onChange={(value) => setAndMarkModified('website', value)}
                label={<T t={t} k="provider-data.website" />}
            />
            <ErrorFor error={error} field="description" />
            <label htmlFor="description">
                <T t={t} k="provider-data.description" />
            </label>
            <textarea
                id="description"
                className="bulma-textarea"
                value={data.description || ''}
                onChange={(e) =>
                    setAndMarkModified('description', e.target.value)
                }
            />
            <h3>
                <T t={t} k="provider-data.for-mediator" />
            </h3>
            <ErrorFor error={error} field="phone" />
            <RetractingLabelInput
                value={data.phone || ''}
                onChange={(value) => setAndMarkModified('phone', value)}
                label={<T t={t} k="provider-data.phone" />}
            />
            <ErrorFor error={error} field="email" />
            <RetractingLabelInput
                value={data.email || ''}
                onChange={(value) => setAndMarkModified('email', value)}
                label={<T t={t} k="provider-data.email" />}
            />
            <hr />
            <ErrorFor error={error} field="code" />
            <RetractingLabelInput
                value={data.code || ''}
                onChange={(value) => setAndMarkModified('code', value)}
                description={
                    <T t={t} k="provider-data.access-code.description" />
                }
                label={<T t={t} k="provider-data.access-code.label" />}
            />
            <hr />
            <ul className="kip-properties">
                <li className="kip-property">
                    <Switch
                        id="accessible"
                        checked={
                            data.accessible !== undefined
                                ? data.accessible
                                : false
                        }
                        onChange={(value) =>
                            setAndMarkModified('accessible', value)
                        }
                    >
                        &nbsp;
                    </Switch>

                    <label htmlFor="accessible">
                        <T t={t} k="provider-data.accessible" />
                    </label>
                </li>
            </ul>
        </React.Fragment>
    );

    return (
        <React.Fragment>
            <div className="kip-provider-data">
                <FormComponent onSubmit={onSubmit}>
                    <FieldSet>
                        <CardContent>{controls}</CardContent>
                        <CardFooter>
                            <SubmitField
                                disabled={!valid || embedded & !modified}
                                type={'success'}
                                onClick={onSubmit}
                                title={
                                    <T
                                        t={t}
                                        k="provider-data.save-and-continue"
                                    />
                                }
                            />
                        </CardFooter>
                    </FieldSet>
                </FormComponent>
            </div>
        </React.Fragment>
    );
}

ProviderData = ({ changeHref, verified }) => {
    const provider = useProvider({ name: 'main', attributes: ['data'] });

    let data;
    if (verified) {
        if (provider.data === null)
            return (
                <p>
                    <T t={t} k="provider-data.not-verified-yet" />
                </p>
            );
        data = provider.verifiedData;
    } else data = provider.data;
    return (
        <>
            <div
                className={classNames('kip-provider-data', 'kip-is-box', {
                    'kip-is-verified': verified,
                })}
            >
                <ul>
                    <li>
                        <span>
                            <T t={t} k="provider-data.name" />
                        </span>{' '}
                        {data.name}
                    </li>
                    <li>
                        <span>
                            <T t={t} k="provider-data.street" />
                        </span>{' '}
                        {data.street}
                    </li>
                    <li>
                        <span>
                            <T t={t} k="provider-data.zip-code" /> &
                            <T t={t} k="provider-data.city" />
                        </span>{' '}
                        {data.zipCode} - &nbsp;
                        {data.city}
                    </li>
                    <li>
                        <span>
                            <T t={t} k="provider-data.website" />
                        </span>{' '}
                        {data.website}
                    </li>
                    <li>
                        <span>
                            <T t={t} k="provider-data.description" />
                        </span>{' '}
                        {data.description || (
                            <T t={t} k="provider-data.not-given" />
                        )}
                    </li>
                    <li>
                        <span>
                            <T t={t} k="provider-data.phone" />
                        </span>{' '}
                        {data.phone || <T t={t} k="provider-data.not-given" />}
                    </li>
                    <li>
                        <span>
                            <T t={t} k="provider-data.email" />
                        </span>{' '}
                        {data.email || <T t={t} k="provider-data.not-given" />}
                    </li>
                    <li>
                        <span>
                            <T t={t} k="provider-data.access-code.label" />
                        </span>{' '}
                        {data.code || <T t={t} k="provider-data.not-given" />}
                    </li>
                </ul>
                <hr />
                <ul className="kip-properties">
                    <li className="kip-property">
                        <Switch
                            id="accessible"
                            checked={data.accessible || false}
                            onChange={() => false}
                        >
                            &nbsp;
                        </Switch>

                        <label htmlFor="accessible">
                            <T t={t} k="provider-data.accessible" />
                        </label>
                    </li>
                </ul>
            </div>
            <div className="kip-provider-data-links">
                <A
                    className="bulma-button bulma-is-small"
                    href={changeHref || '/provider/setup/enter-provider-data'}
                >
                    <T t={t} k="provider-data.change" />
                </A>
            </div>
        </>
    );
}

Verify = () => {
    const router = useRouter();
    const settings = useSettings();
    const provider = useProvider();

    const [submitting, setSubmitting] = useState(false);
    const [response, setResponse] = useState(null);

    const submit = async () => {
        if (submitting) return;

        setSubmitting(true);
        const response = await provider.storeData();
        setSubmitting(false);

        setResponse(response);

        if (response.status === Status.Succeeded)
            router.navigateToUrl('/provider/setup/store-secrets');
    };

    let failedMessage;
    let failed;

    if (response && response.status === Status.Failed) {
        console.log(response);
        failed = true;
        if (
            response.error.error !== undefined &&
            response.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 (
        <>
            <CardContent>
                {failedMessage}
                <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>
                <ProviderData />
            </CardContent>
            <CardFooter>
                <Button
                    type={failed ? 'danger' : 'success'}
                    disabled={submitting}
                    onClick={submit}
                >
                    <T
                        t={t}
                        k={
                            failed
                                ? 'wizard.failed.title'
                                : submitting
                                ? 'wizard.please-wait'
                                : 'wizard.continue'
                        }
                    />
                </Button>
            </CardFooter>
        </>
    );
}