components#A 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>
))

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>
))

render() {
        const { href, onToggle } = this.props;
        return (
            <li className="kip-nav-item">
                <A href={href} onClick={onToggle}>
                    {this.props.children}
                </A>
            </li>
        );
    }

render() {
        const { href, onToggle } = this.props;
        return (
            <li className="kip-nav-item">
                <A href={href} onClick={onToggle}>
                    {this.props.children}
                </A>
            </li>
        );
    }

render() {
        const { title, items, user } = this.props;
        const navItems = items
            .filter((item) => {
                if (item.show !== undefined && item.show(user.user) === false)
                    return false;
                return true;
            })
            .map((item, i) => {
                let href;
                if (item.route !== undefined) href = '/' + item.route;
                return (
                    <DropdownItem
                        key={i}
                        href={href}
                        onToggle={(e) => this.props.onToggle(e)}
                    >
                        {item.title}
                    </DropdownItem>
                );
            });
        let subMenu;
        if (this.isActive()) {
            subMenu = <ul>{navItems}</ul>;
        }
        return (
            <li className="kip-nav-item" ref={this.self}>
                <A
                    className={this.isActive() ? 'is-active' : ''}
                    onClick={this.toggleActive}
                >
                    {title}
                </A>
                {subMenu}
            </li>
        );
    }

function Icons({ ...props }) {
  return (
    <Grid container>
      <ItemGrid xs={12} sm={12} md={12}>
        <RegularCard
          plainCard
          cardTitle="Material Design Icons"
          cardSubtitle={
            <P>
              Handcrafted by our friends from{" "}
              <A
                href="https://design.google.com/icons/"
                target="_blank"
                rel="noopener noreferrer"
              >
                Google
              </A>
            </P>
          }
          content={
            <div>
              <Hidden only={["sm", "xs"]}>
                <iframe
                  className={props.classes.iframe}
                  src="https://material.io/icons/"
                  title="Icons iframe"
                >
                  <p>Your browser does not support iframes.</p>
                </iframe>
              </Hidden>
              <Hidden only={["lg", "md"]}>
                <ItemGrid xs={12} sm={12} md={6}>
                  <h5>
                    The icons are visible on Desktop mode inside an iframe.
                    Since the iframe is not working on Mobile and Tablets please
                    visit the icons on their original page on Google. Check the
                    <a
                      href="https://design.google.com/icons/"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      Material Icons
                    </a>
                  </h5>
                </ItemGrid>
              </Hidden>
            </div>
          }
        />
      </ItemGrid>
    </Grid>
  );
}

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} />;
    }, [])
)

render() {
    return (
      <RegularCard
        cardTitle="Notifications"
        cardSubtitle={
          <P>
            Handcrafted by our friends from{" "}
            <A target="_blank" href="https://material-ui-next.com/">
              Material UI
            </A>{" "}
            and styled by{" "}
            <A target="_blank" href="https://www.creative-tim.com/">
              Creative Tim
            </A>. Please checkout the{" "}
            <A href="#pablo" target="_blank">
              full documentation
            </A>.
          </P>
        }
        content={
          <div>
            <Grid container>
              <ItemGrid xs={12} sm={12} md={6}>
                <h5>Notifications Style</h5>
                <br />
                <SnackbarContent message={"This is a plain notification"} />
                <br />
                <SnackbarContent
                  message={"This is a notification with close button."}
                  close
                />
                <br />
                <SnackbarContent
                  message={"This is a notification with close button and icon."}
                  close
                  icon={AddAlert}
                />
                <br />
                <SnackbarContent
                  message={
                    "This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style."
                  }
                  close
                  icon={AddAlert}
                />
                <br />
              </ItemGrid>
              <ItemGrid xs={12} sm={12} md={6}>
                <h5>Notifications States</h5>
                <br />
                <SnackbarContent
                  message={
                    'INFO - This is a regular notification made with color="info"'
                  }
                  close
                  color="info"
                />
                <br />
                <SnackbarContent
                  message={
                    'SUCCESS - This is a regular notification made with color="success"'
                  }
                  close
                  color="success"
                />
                <br />
                <SnackbarContent
                  message={
                    'WARNING - This is a regular notification made with color="warning"'
                  }
                  close
                  color="warning"
                />
                <br />
                <SnackbarContent
                  message={
                    'DANGER - This is a regular notification made with color="danger"'
                  }
                  close
                  color="danger"
                />
                <br />
                <SnackbarContent
                  message={
                    'PRIMARY - This is a regular notification made with color="primary"'
                  }
                  close
                  color="primary"
                />
                <br />
              </ItemGrid>
            </Grid>
            <br />
            <br />
            <Grid container justify="center">
              <ItemGrid xs={12} sm={12} md={6} style={{ textAlign: "center" }}>
                <h5>
                  Notifications Places
                  <Small>Click to view notifications</Small>
                </h5>
              </ItemGrid>
            </Grid>
            <Grid container justify="center">
              <ItemGrid xs={12} sm={12} md={10} lg={8}>
                <Grid container>
                  <ItemGrid xs={12} sm={12} md={4}>
                    <Button
                      fullWidth
                      color="primary"
                      onClick={() => this.showNotification("tl")}
                    >
                      Top Left
                    </Button>
                    <Snackbar
                      place="tl"
                      color="info"
                      icon={AddAlert}
                      message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
                      open={this.state.tl}
                      closeNotification={() => this.setState({ tl: false })}
                      close
                    />
                  </ItemGrid>
                  <ItemGrid xs={12} sm={12} md={4}>
                    <Button
                      fullWidth
                      color="primary"
                      onClick={() => this.showNotification("tc")}
                    >
                      Top Center
                    </Button>
                    <Snackbar
                      place="tc"
                      color="info"
                      icon={AddAlert}
                      message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
                      open={this.state.tc}
                      closeNotification={() => this.setState({ tc: false })}
                      close
                    />
                  </ItemGrid>
                  <ItemGrid xs={12} sm={12} md={4}>
                    <Button
                      fullWidth
                      color="primary"
                      onClick={() => this.showNotification("tr")}
                    >
                      Top Right
                    </Button>
                    <Snackbar
                      place="tr"
                      color="info"
                      icon={AddAlert}
                      message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
                      open={this.state.tr}
                      closeNotification={() => this.setState({ tr: false })}
                      close
                    />
                  </ItemGrid>
                </Grid>
              </ItemGrid>
            </Grid>
            <Grid container justify={"center"}>
              <ItemGrid xs={12} sm={12} md={10} lg={8}>
                <Grid container>
                  <ItemGrid xs={12} sm={12} md={4}>
                    <Button
                      fullWidth
                      color="primary"
                      onClick={() => this.showNotification("bl")}
                    >
                      Bottom Left
                    </Button>
                    <Snackbar
                      place="bl"
                      color="info"
                      icon={AddAlert}
                      message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
                      open={this.state.bl}
                      closeNotification={() => this.setState({ bl: false })}
                      close
                    />
                  </ItemGrid>
                  <ItemGrid xs={12} sm={12} md={4}>
                    <Button
                      fullWidth
                      color="primary"
                      onClick={() => this.showNotification("bc")}
                    >
                      Bottom Center
                    </Button>
                    <Snackbar
                      place="bc"
                      color="info"
                      icon={AddAlert}
                      message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
                      open={this.state.bc}
                      closeNotification={() => this.setState({ bc: false })}
                      close
                    />
                  </ItemGrid>
                  <ItemGrid xs={12} sm={12} md={4}>
                    <Button
                      fullWidth
                      color="primary"
                      onClick={() => this.showNotification("br")}
                    >
                      Bottom Right
                    </Button>
                    <Snackbar
                      place="br"
                      color="info"
                      icon={AddAlert}
                      message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
                      open={this.state.br}
                      closeNotification={() => this.setState({ br: false })}
                      close
                    />
                  </ItemGrid>
                </Grid>
              </ItemGrid>
            </Grid>
          </div>
        }
      />
    );
  }

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>
        </>
    );
}

StoreOnline = ({ secret, embedded, hideNotice }) => {
    const [bookmarkModal, setBookmarkModal] = useState(false);
    const [copyModal, setCopyModal] = useState(false);
    const settings = useSettings();
    const user = useUser();

    let modal;

    const showBookmarkModal = () => {
        history.pushState(
            {},
            settings.t(t, 'store-secrets.restore.title'),
            `/user/restore#${user.secret}`
        );
        setBookmarkModal(true);
    };

    const hideBookmarkModal = () => {
        history.back();
        setBookmarkModal(false);
    };

    if (bookmarkModal)
        modal = (
            <Modal
                title={<T t={t} k="store-secrets.bookmark-modal.title" />}
                onClose={hideBookmarkModal}
            >
                <T t={t} k="store-secrets.bookmark-modal.text" />
            </Modal>
        );

    const chunks = user.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>
            );
    }

    return (
        <F>
            {modal}
            {!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' : '')
                }
            >
                {
                    <F>
                        <div className="kip-uid">
                            {!hideNotice && (
                                <span>
                                    <T t={t} k="store-secrets.secret" />
                                </span>
                            )}
                            <code>{fragments}</code>
                        </div>
                    </F>
                }
            </div>
            {!embedded && (
                <div className="kip-secrets-links">
                    <A
                        className="bulma-button bulma-is-small"
                        onClick={showBookmarkModal}
                    >
                        <T t={t} k="store-secrets.bookmark" />
                    </A>
                </div>
            )}
        </F>
    );
}