reactstrap#Alert TypeScript Examples

function createNoticeArea(notice: Payload['notice']) {
  return (
    <EmptyRowCol>
      <Alert color="secondary" role="alert" className="mt-3">
        {notice.icon ? <FontAwesomeIcon className="mr-2" icon={notice.icon} /> : ''}
        {notice.title}
      </Alert>
    </EmptyRowCol>
  );
}

FileErrorStyled = styled(Alert)`
  display: flex;
  text-align: left;
  box-shadow: ${(props) => props.theme.shadows.slight};
`

FileErrorStyled = styled(Alert)`
  display: flex;
  text-align: left;
  margin: 5px auto;
  max-width: 600px;
  box-shadow: ${(props) => props.theme.shadows.slight};
`

function ConfirmationDetails({ orderId }: OrderDetailsProps) {
  const { t } = useTranslation(["order", "layout"]);
  const [order, setOrder] = useState<Order | undefined | null>();

  useEffect(() => {
    let isOutdated = false;

    const fetchOrder = async () => {
      try {
        const fetched = await new BackendClient().getOrderDetails(orderId);

        if (!isOutdated) {
          setOrder(fetched);
        }
      } catch (e) {
        console.error("Unexpected error", e);
      }
    };

    // noinspection JSIgnoredPromiseFromCall
    fetchOrder();

    return () => {
      isOutdated = true;
    };
  }, [orderId]);

  const cashOut = async () => {
    const client = new BackendClient();
    await client.payout(order!.vaspPaymentRef);
    const fetched = await new BackendClient().getOrderDetails(orderId);
    if (fetched) {
      setOrder(fetched);
    }
  };

  // Show spinner if order is undefined - it is being loaded
  let orderInfo = (
    <div className="d-flex justify-content-center">
      <Spinner color="primary" />
    </div>
  );

  if (order !== undefined) {
    if (order === null) {
      // There is no order with this ID
      orderInfo = (
        <Alert color="danger">
          <i className="fa fa-close" /> {t("unknown")}
        </Alert>
      );
    } else {
      orderInfo = (
        <>
          <div style={{ display: "flex", alignItems: "center" }}>
            <i className="fa fa-check-circle fa-4x" style={{ color: "#59a559" }} />
            <div style={{ marginLeft: 20, fontSize: 20, fontWeight: 500, color: "black" }}>
              {t("order_on_the_way")}
            </div>
          </div>
          <div className="h5 mt-4 mb-4 font-weight-normal text-body">
            {t("got_your_order")} <br />
            {t("order_summary")}
          </div>
          <Row style={{ alignItems: "center" }}>
            <Col xs={3}>
              <img
                src={order.products[0].product.image_url}
                width="75"
                height="75"
                alt={"product image"}
              />
            </Col>
            <Col>{order.products[0].product.name}</Col>
            <Col style={{ textAlign: "right" }}>
              {t("qty")}. {order.products[0].quantity}
            </Col>
          </Row>
          <Row className="mt-4">
            <Col xs={8}>{t("items_Total")}</Col>
            <Col xs={4} style={{ textAlign: "right" }}>
              {order.totalPrice / 1000000} XUS
            </Col>
          </Row>
          <Row className="mt-1">
            <Col xs={9}>{t("shipping")}</Col>
            <Col xs={3} className="pl-2">
              {t("free")}
            </Col>
          </Row>
          <Row className="mt-1">
            <Col xs={9}>{t("duties_taxes")}</Col>
            <Col xs={3} className="pl-2">
              {t("free")}
            </Col>
          </Row>
          <Row className="mt-1">
            <Col xs={8} className="font-weight-bold">
              {t("total_order")}
            </Col>
            <Col xs={4} style={{ textAlign: "right" }} className="font-weight-bold">
              {order.totalPrice / 1000000} XUS
            </Col>
          </Row>
        </>
      );
    }
  }

  return (
    <>
      <TestnetWarning />
      <Container className="container-very-narrow pt-5">
        <div className="text-center">
          <div className="h2">{t("layout:name")}</div>
        </div>
        <div className="d-flex flex-column justify-content-center m-3">{orderInfo}</div>
      </Container>
    </>
  );
}

function OrderDetails({ orderId }: OrderDetailsProps) {
  const { t } = useTranslation("order");
  const [order, setOrder] = useState<Order | undefined | null>();

  const tx =
    order && order.paymentStatus.blockchainTxs.length > 0
      ? order.paymentStatus.blockchainTxs[0]
      : null;
  const refundTx =
    order &&
    order.paymentStatus.blockchainTxs.length > 1 &&
    order.paymentStatus.blockchainTxs[1].isRefund
      ? order.paymentStatus.blockchainTxs[1]
      : null;

  useEffect(() => {
    let isOutdated = false;

    const fetchOrder = async () => {
      try {
        const fetched = await new BackendClient().getOrderDetails(orderId);

        if (!isOutdated) {
          setOrder(fetched);
        }
      } catch (e) {
        console.error("Unexpected error", e);
      }
    };

    // noinspection JSIgnoredPromiseFromCall
    fetchOrder();

    return () => {
      isOutdated = true;
    };
  }, [orderId]);

  const cashOut = async () => {
    const client = new BackendClient();
    await client.payout(order!.vaspPaymentRef);
    const fetched = await new BackendClient().getOrderDetails(orderId);
    if (fetched) {
      setOrder(fetched);
    }
  };

  const refund = async () => {
    const client = new BackendClient();
    await client.refund(order!.vaspPaymentRef);
    const fetched = await new BackendClient().getOrderDetails(orderId);
    if (fetched) {
      setOrder(fetched);
    }
  };

  // Show spinner if order is undefined - it is being loaded
  let orderInfo = (
    <div className="d-flex justify-content-center">
      <Spinner color="primary" />
    </div>
  );

  if (order !== undefined) {
    if (order === null) {
      // There is no order with this ID
      orderInfo = (
        <Alert color="danger">
          <i className="fa fa-close" /> {t("unknown")}
        </Alert>
      );
    } else {
      orderInfo = (
        <>
          <InfoField caption="Order ID" value={orderId.toUpperCase()} />
          <InfoField caption="Creation time" value={order.createdAt.toLocaleString()} />
          <InfoField caption="Current status" value={t(`status.${order?.paymentStatus.status}`)} />

          <div className="mt-5">
            <OrderProducts
              productOrders={order.products}
              total={order.totalPrice}
              currency={order.currency}
            />
          </div>

          <div className="mt-5">
            <h2 className="h5 font-weight-normal text-body">Payment details</h2>

            <InfoField caption="Payment ID" value={order.vaspPaymentRef.toUpperCase()} />
            <InfoField caption="Payment type" value="Direct" />
            <InfoField
              caption="Merchant Diem address"
              value={order.paymentStatus.merchantAddress}
            />
            <InfoField caption="Payer Diem address" value={tx ? tx.senderAddress : "N/A"} />
            <InfoField caption="Payer wallet type" value="Non-hosted" />
            <InfoField
              caption="Diem amount"
              value={tx ? `${tx.amount / 1000000} ${tx.currency}` : "N/A"}
            />

            <LinkField
              caption="Diem transaction ID"
              text={tx ? `${tx.transactionId}` : undefined}
              url={`https://diemexplorer.com/testnet/version/${tx?.transactionId}`}
              external
            />

            {refundTx && (
              <LinkField
                caption="Diem refund transaction ID"
                text={`${refundTx.transactionId}`}
                url={`https://diemexplorer.com/testnet/version/${refundTx.transactionId}`}
                external
              />
            )}

            <div className="mt-4">Payment events</div>
            <div className="mt-3">
              <PaymentEvents events={order.paymentStatus.events} />
            </div>

            <div className="d-flex justify-content-center m-2">
              <Button
                disabled={!order.paymentStatus.canCashOut}
                onClick={cashOut}
                className="m-2"
                color="primary"
              >
                Cash out
              </Button>
              <Button
                disabled={!order.paymentStatus.canRefund}
                onClick={refund}
                className="m-2"
                color="primary"
              >
                Refund
              </Button>
            </div>

            <div className="d-flex justify-content-center mt-5">
              <a href={`admin/order/${orderId}`} target="_blank" rel="noopener noreferrer">
                #permalink
              </a>
            </div>
          </div>
        </>
      );
    }
  }

  return (
    <Container className="container-narrow pt-5">
      <div className="text-center">
        <div className="h2">{t("title")}</div>
      </div>

      <div className="d-flex flex-column justify-content-center m-5">{orderInfo}</div>
    </Container>
  );
}

export function SystemSettings() {
  const { t } = useTranslationSafe()

  const [numThreads, setNumThreads] = useRecoilState(numThreadsAtom)
  const resetNumThreads = useResetRecoilState(numThreadsAtom)
  const guess = useGuessNumThreads(numThreads)
  const handleValidate = useCallback((values: SettingsFormValues): FormikErrors<SettingsFormValues> => {
    const errors: FormikErrors<SettingsFormValues> = {}
    const { numThreads } = values
    if (!Number.isInteger(numThreads) || numThreads < 0 || numThreads > 1000) {
      errors.numThreads = 'Should be a positive integer from 1 to 1000'
    }
    return errors
  }, [])

  const setNumThreadsDebounced = useMemo(
    () => debounce(setNumThreads, 500, { leading: false, trailing: true }), // prettier-ignore
    [setNumThreads],
  )

  const handleSubmit = useCallback(
    (values: SettingsFormValues, { setSubmitting }: FormikHelpers<SettingsFormValues>) => {
      setNumThreadsDebounced(values.numThreads)
      setSubmitting(false)
    },
    [setNumThreadsDebounced],
  )

  const initialValues = useMemo(() => ({ numThreads }), [numThreads])
  const onReset = useCallback(() => ({ numThreads }), [numThreads])

  const memoryAvailable = useMemo(() => {
    return guess.memoryAvailable ? prettyBytes.format(guess.memoryAvailable) : t('unsupported')
  }, [guess.memoryAvailable, t])

  const memoryAvailablePerThread = useMemo(() => {
    return guess.memoryAvailable ? prettyBytes.format(guess.memoryAvailable / numThreads) : t('unsupported')
  }, [guess.memoryAvailable, numThreads, t])

  return (
    <Formik initialValues={initialValues} validate={handleValidate} onSubmit={handleSubmit} onReset={onReset}>
      {({ values, errors, touched, handleChange, handleBlur, resetForm }) => (
        <Form>
          <FormikAutoSubmit />

          <FormGroup>
            <Label className="d-block w-100">
              <NumericInput
                id="numThreads"
                min={1}
                max={1000}
                className={classNames('d-inline', errors?.numThreads && 'border-danger')}
                type="number"
                identifier="settings-num-threads-input"
                value={values.numThreads}
                onChange={handleChange}
                onBlur={handleBlur}
              />
              <span className="d-inline">
                <span className="mx-3">{t('Number of CPU threads')}</span>
                <span className="mx-auto">
                  <ButtonTransparent
                    className="my-0"
                    type="button"
                    title={t('Reset to default')}
                    // eslint-disable-next-line react-perf/jsx-no-new-function-as-prop
                    onClick={() => {
                      resetNumThreads()
                      resetForm()
                    }}
                  >
                    <MdRefresh /> {t('Reset')}
                  </ButtonTransparent>
                </span>
              </span>
              {touched.numThreads && errors?.numThreads && <p className="text-danger">{errors.numThreads}</p>}
              {guess.numThreads && guess.memoryAvailable && (
                <Alert className="mt-2 p-1" color="primary" isOpen fade={false}>
                  <TableSlim borderless className="small mb-1">
                    <tbody>
                      <tr>
                        <td>{t('Memory available*')}</td>
                        <td>{memoryAvailable}</td>
                      </tr>

                      <tr>
                        <td>{t('Memory per CPU thread')}</td>
                        <td>{memoryAvailablePerThread}</td>
                      </tr>

                      <tr>
                        <td>{t('Recommended number of CPU threads**')}</td>
                        <td>{guess.numThreads ?? t('unsupported')}</td>
                      </tr>

                      <tr>
                        <td colSpan={2} className="small">
                          {t('* Current value. This amount can change depending on load')}
                        </td>
                      </tr>

                      <tr>
                        <td colSpan={2} className="small">
                          {t('** {{appName}} requires at least {{memoryRequired}} of memory per thread', {
                            appName: PROJECT_NAME,
                            memoryRequired: prettyBytes.format(MEMORY_BYTES_PER_THREAD_MINIMUM),
                          })}
                        </td>
                      </tr>
                    </tbody>
                  </TableSlim>
                </Alert>
              )}
            </Label>
          </FormGroup>
        </Form>
      )}
    </Formik>
  )
}