react-intl#FormattedNumber JavaScript Examples

LeaseRow = React.memo(
  function MemoLeaseRow({ lease }) {
    const classes = useStyles();
    return (
      <TableRow>
        <TableCell component="th" scope="row">
          <StatusPill state={lease.state} size="small" />
        </TableCell>
        <TableCell>
          <Link to={UrlService.deploymentDetails(lease.dseq)}>{lease.dseq}</Link>
        </TableCell>
        <TableCell>
          <div className={classes.flexCenter}>
            <PricePerMonth perBlockValue={uaktToAKT(lease.price.amount, 6)} />
            <PriceEstimateTooltip value={uaktToAKT(lease.price.amount, 6)} />
            <span className={classes.monthlyCost}>
              <FormattedNumber value={lease.price.amount} maximumSignificantDigits={18} />
              uakt ({`~${getAvgCostPerMonth(lease.price.amount)}akt/month`})
            </span>
          </div>
        </TableCell>
      </TableRow>
    );
  },
  (prevProps, nextProps) => {
    return isEqual(prevProps, nextProps);
  }
)

PriceValue = ({ value, showLt }) => {
  const { priceData, isLoadingPriceData } = usePrice();
  const _value = parseFloat(value) * priceData?.price;
  const computedValue = _value > 0 ? ceilDecimal(_value) : 0;

  return (
    <>
      {isLoadingPriceData && !priceData?.price && <CircularProgress size=".8rem" />}
      {showLt && priceData?.price && _value !== computedValue && "< "}
      {priceData?.price && (
        <FormattedNumber
          value={computedValue}
          // eslint-disable-next-line react/style-prop-object
          style="currency"
          currency="USD"
        />
      )}
    </>
  );
}

Basic = () => {
    return (
        <RainbowFirebaseApp app={firebase}>
            <UniversalForm
                initialValues={initialValues}
                onSubmit={(value) => {
                    // eslint-disable-next-line no-alert
                    alert(JSON.stringify(value));
                }}
            >
                <Table data={data} keyField="title" variant="listview">
                    <Column
                        header="title"
                        field="title"
                        name={({ index }) => `data[${index}].title`}
                        isEditable={isEditableColumn}
                        component={FormFieldColumn}
                    />
                    <Column
                        header="cost"
                        field="cost"
                        name={({ index }) => `data[${index}].cost[0].amount`}
                        type="number"
                        isEditable={isEditableColumn}
                        component={FormFieldColumn}
                        cellAlignment="right"
                        cellComponent={({ value }) => {
                            return (
                                // eslint-disable-next-line react/style-prop-object
                                <FormattedNumber value={value} style="currency" currency="usd" />
                            );
                        }}
                        format={(value) => value / 100}
                        parse={(value) => value * 100}
                    />
                    <Column
                        header="Five Stars"
                        field="fiveStarsPercent"
                        name={({ index }) => `data[${index}].fiveStarsPercent`}
                        type="number"
                        isEditable={isEditableColumn}
                        component={FormFieldColumn}
                        cellAlignment="right"
                        cellComponent={({ value }) => {
                            // eslint-disable-next-line react/style-prop-object
                            return <FormattedNumber value={value / 100} style="percent" />;
                        }}
                        format={(value) => value * 100}
                        parse={(value) => value / 100}
                    />
                </Table>
                <Button className="rainbow-m-top_medium" type="submit" label="Submit" />
            </UniversalForm>
        </RainbowFirebaseApp>
    );
}

export function BidRow({ bid, selectedBid, handleBidSelected, disabled, provider }) {
  const classes = useStyles();
  const [isViewingDetail, setIsViewingDetail] = useState(false);
  const { favoriteProviders, updateFavoriteProviders } = useLocalNotes();
  const isFavorite = favoriteProviders.some((x) => provider.owner === x);
  const {
    data: providerStatus,
    isLoading: isLoadingStatus,
    refetch: fetchProviderStatus,
    error
  } = useProviderStatus(provider?.host_uri, {
    enabled: false,
    retry: false
  });

  const onStarClick = () => {
    const newFavorites = isFavorite ? favoriteProviders.filter((x) => x !== provider.owner) : favoriteProviders.concat([provider.owner]);

    updateFavoriteProviders(newFavorites);
  };

  useEffect(() => {
    if (provider) {
      fetchProviderStatus();
    }
  }, [provider, fetchProviderStatus]);

  return (
    <ListItem disabled={bid.state !== "open" || disabled} dense>
      <ListItemIcon>
        <Radio
          checked={selectedBid?.id === bid.id}
          onChange={() => handleBidSelected(bid)}
          value={bid.id}
          name="radio-button-demo"
          disabled={bid.state !== "open" || disabled}
          size="medium"
        />
      </ListItemIcon>

      <ListItemText
        id={`checkbox-list-label-${bid.id}`}
        classes={{ secondary: classes.secondaryText }}
        primaryTypographyProps={{
          component: "div"
        }}
        secondaryTypographyProps={{
          component: "div"
        }}
        primary={
          <>
            <PricePerMonth perBlockValue={uaktToAKT(bid.price.amount, 6)} className={classes.pricePerMonth} />

            <div className={clsx(classes.flexCenter, classes.bidState)}>
              <Chip
                label={bid.state}
                size="small"
                color={bid.state === "open" ? "primary" : bid.state === "active" ? "primary" : "secondary"}
                classes={{ root: classes.chip }}
              />
              <Box component="span" marginLeft=".5rem">
                <FormattedNumber value={bid.price.amount} maximumFractionDigits={18} /> uakt / block
              </Box>
              <Box className={classes.priceTooltip}>
                <PriceEstimateTooltip value={uaktToAKT(bid.price.amount, 6)} />
              </Box>
            </div>
          </>
        }
        secondary={
          <div>
            {isLoadingStatus && <CircularProgress size="1rem" />}

            {providerStatus && (
              <Typography variant="body2" color="textSecondary">
                {providerStatus?.name}
              </Typography>
            )}

            {error && (
              <div className={clsx(classes.flexCenter, classes.providerOffline)}>
                <CloudOffIcon className={clsx(classes.stateIcon, classes.stateInactive)} fontSize="small" />
                <strong>OFFLINE</strong>
              </div>
            )}

            {providerStatus && (
              <div className={classes.flexCenter}>
                <FavoriteButton isFavorite={isFavorite} onClick={onStarClick} />

                {provider.isAudited && (
                  <Box marginLeft=".5rem">
                    <AuditorButton provider={provider} />
                  </Box>
                )}

                <Box marginLeft=".5rem" display="flex">
                  <LinkTo onClick={() => setIsViewingDetail(true)}>View details</LinkTo>
                </Box>
              </div>
            )}
          </div>
        }
      />

      {provider && <ProviderAttributes provider={provider} />}
      {isViewingDetail && provider && providerStatus && (
        <ProviderDetailModal provider={{ ...provider, ...providerStatus }} address={bid.provider} onClose={() => setIsViewingDetail(false)} />
      )}
    </ListItem>
  );
}

LeaseRow = React.forwardRef(({ lease, setActiveTab, deploymentManifest, dseq, providers, loadDeploymentDetail }, ref) => {
  const { enqueueSnackbar } = useSnackbar();
  const providerInfo = providers?.find((p) => p.owner === lease?.provider);
  const { localCert } = useCertificate();
  const isLeaseActive = lease.state === "active";
  const [isServicesAvailable, setIsServicesAvailable] = useState(false);
  const { favoriteProviders, updateFavoriteProviders } = useLocalNotes();
  const [isViewingProviderDetail, setIsViewingProviderDetail] = useState(false);
  const isFavorite = favoriteProviders.some((x) => lease?.provider === x);
  const {
    data: leaseStatus,
    error,
    refetch: getLeaseStatus,
    isLoading: isLoadingLeaseStatus
  } = useLeaseStatus(providerInfo?.host_uri, lease, {
    enabled: isLeaseActive && !isServicesAvailable && !!providerInfo?.host_uri && !!localCert,
    refetchInterval: 10_000,
    onSuccess: (leaseStatus) => {
      if (leaseStatus) {
        checkIfServicesAreAvailable(leaseStatus);
      }
    }
  });
  const {
    data: providerStatus,
    isLoading: isLoadingProviderStatus,
    refetch: getProviderStatus
  } = useProviderStatus(providerInfo?.host_uri, {
    enabled: false,
    retry: false
  });
  const isLeaseNotFound = error && error.includes && error.includes("lease not found") && isLeaseActive;
  const servicesNames = leaseStatus ? Object.keys(leaseStatus.services) : [];
  const classes = useStyles();
  const [isSendingManifest, setIsSendingManifest] = useState(false);

  React.useImperativeHandle(ref, () => ({
    getLeaseStatus: loadLeaseStatus
  }));

  const loadLeaseStatus = useCallback(() => {
    if (isLeaseActive && providerInfo && localCert) {
      getLeaseStatus();
      getProviderStatus();
    }
  }, [isLeaseActive, providerInfo, localCert, getLeaseStatus, getProviderStatus]);

  const checkIfServicesAreAvailable = (leaseStatus) => {
    const servicesNames = leaseStatus ? Object.keys(leaseStatus.services) : [];
    const isServicesAvailable =
      servicesNames.length > 0
        ? servicesNames
            .map((n) => leaseStatus.services[n])
            .every((service, i) => {
              return service.available > 0;
            })
        : false;
    setIsServicesAvailable(isServicesAvailable);
  };

  useEffect(() => {
    loadLeaseStatus();
  }, [lease, providerInfo, localCert, loadLeaseStatus]);

  function handleExternalUrlClick(ev, externalUrl) {
    ev.preventDefault();

    window.electron.openUrl("http://" + externalUrl);
  }

  function handleEditManifestClick(ev) {
    ev.preventDefault();
    setActiveTab("EDIT");
  }

  async function sendManifest() {
    setIsSendingManifest(true);
    try {
      const doc = yaml.load(deploymentManifest);
      const manifest = deploymentData.Manifest(doc);

      await sendManifestToProvider(providerInfo, manifest, dseq, localCert);

      enqueueSnackbar(<Snackbar title="Manifest sent!" iconVariant="success" />, { variant: "success", autoHideDuration: 10_000 });

      loadDeploymentDetail();
    } catch (err) {
      enqueueSnackbar(<ManifestErrorSnackbar err={err} iconVariant="error" />, { variant: "error", autoHideDuration: null });
    }
    setIsSendingManifest(false);
  }

  const onStarClick = (event) => {
    event.preventDefault();
    event.stopPropagation();

    const newFavorites = isFavorite ? favoriteProviders.filter((x) => x !== lease.provider) : favoriteProviders.concat([lease.provider]);

    updateFavoriteProviders(newFavorites);
  };

  return (
    <>
      {isViewingProviderDetail && (
        <ProviderDetailModal provider={{ ...providerStatus, ...providerInfo }} onClose={() => setIsViewingProviderDetail(false)} address={lease.provider} />
      )}

      <Card className={classes.root} elevation={4}>
        <CardHeader
          classes={{ title: classes.cardHeaderTitle, root: classes.cardHeader }}
          title={
            <Box display="flex">
              <LabelValue
                label="Status:"
                value={
                  <>
                    <div>{lease.state}</div>
                    <StatusPill state={lease.state} size="small" />
                  </>
                }
              />
              <LabelValue label="GSEQ:" value={lease.gseq} marginLeft="1rem" fontSize="1rem" />
              <LabelValue label="OSEQ:" value={lease.oseq} marginLeft="1rem" fontSize="1rem" />

              {isLeaseActive && (
                <Box marginLeft="1rem" display="inline-flex">
                  <LinkTo onClick={() => setActiveTab("LOGS")}>View logs</LinkTo>
                </Box>
              )}
            </Box>
          }
        />
        <CardContent>
          <Box display="flex">
            <Box>
              <Box paddingBottom="1rem">
                <SpecDetail
                  cpuAmount={lease.cpuAmount}
                  memoryAmount={lease.memoryAmount}
                  storageAmount={lease.storageAmount}
                  color={isLeaseActive ? "primary" : "default"}
                />
              </Box>
              <LabelValue
                label="Price:"
                value={
                  <>
                    <PricePerMonth perBlockValue={uaktToAKT(lease.price.amount, 6)} />
                    <PriceEstimateTooltip value={uaktToAKT(lease.price.amount, 6)} />
                    <Box component="span" marginLeft=".5rem">
                      <FormattedNumber value={lease.price.amount} maximumSignificantDigits={18} />
                      uakt ({`~${getAvgCostPerMonth(lease.price.amount)}akt/month`})
                    </Box>
                  </>
                }
              />

              {isLeaseActive && (
                <LabelValue
                  label="Provider:"
                  value={
                    <>
                      {isLoadingProviderStatus && <CircularProgress size="1rem" />}
                      {providerStatus && (
                        <>
                          <Link to={UrlService.providerDetail(lease.provider)}>{providerStatus.name}</Link>

                          <Box display="flex" alignItems="center" marginLeft={1}>
                            <FavoriteButton isFavorite={isFavorite} onClick={onStarClick} />

                            {providerInfo.isAudited && (
                              <Box marginLeft=".5rem">
                                <AuditorButton provider={providerInfo} />
                              </Box>
                            )}

                            <Box marginLeft=".5rem" display="flex">
                              <LinkTo onClick={() => setIsViewingProviderDetail(true)}>View details</LinkTo>
                            </Box>
                          </Box>
                        </>
                      )}
                    </>
                  }
                  marginTop="5px"
                  marginBottom=".5rem"
                />
              )}
            </Box>

            {providerInfo && (
              <Box paddingLeft="1rem" flexGrow={1}>
                <ProviderAttributes provider={providerInfo} />
              </Box>
            )}
          </Box>

          {isLeaseNotFound && (
            <Alert severity="warning">
              The lease was not found on this provider. This can happen if no manifest was sent to the provider. To send one you can update your deployment in
              the <LinkTo onClick={handleEditManifestClick}>VIEW / EDIT MANIFEST</LinkTo> tab.
              {deploymentManifest && (
                <>
                  <Box margin="1rem 0">
                    <strong>OR</strong>
                  </Box>
                  <Button variant="contained" color="primary" disabled={isSendingManifest} onClick={sendManifest} size="small">
                    {isSendingManifest ? <CircularProgress size="1.5rem" /> : <span>Send manifest manually</span>}
                  </Button>
                </>
              )}
            </Alert>
          )}

          {!leaseStatus && isLoadingLeaseStatus && <CircularProgress size="1rem" />}

          {isLeaseActive &&
            leaseStatus &&
            leaseStatus.services &&
            servicesNames
              .map((n) => leaseStatus.services[n])
              .map((service, i) => (
                <Box mb={1} key={`${service.name}_${i}`}>
                  <Box display="flex" alignItems="center">
                    <LabelValue label="Group:" value={service.name} fontSize="1rem" />
                    {isLoadingLeaseStatus || !isServicesAvailable ? (
                      <Box display="inline-flex" marginLeft="1rem">
                        <CircularProgress size="1rem" />
                      </Box>
                    ) : (
                      <Box display="inline-flex" marginLeft=".5rem">
                        <Tooltip
                          classes={{ tooltip: classes.tooltip }}
                          arrow
                          interactive
                          title={
                            <>
                              Workloads can take some time to spin up. If you see an error when browsing the uri, it is recommended to refresh and wait a bit.
                              Check the{" "}
                              <LinkTo onClick={() => setActiveTab("LOGS")} className={classes.whiteLink}>
                                logs
                              </LinkTo>{" "}
                              for more information.
                            </>
                          }
                        >
                          <InfoIcon className={classes.tooltipIcon} fontSize="small" />
                        </Tooltip>
                      </Box>
                    )}
                  </Box>

                  <Box display="flex" alignItems="center" marginTop="2px">
                    <Box display="flex" alignItems="center">
                      <Typography variant="caption">Available:&nbsp;</Typography>
                      <Chip label={service.available} size="small" color={service.available > 0 ? "primary" : "default"} className={classes.serviceChip} />
                    </Box>
                    <Box display="flex" alignItems="center">
                      <Typography variant="caption" className={classes.marginLeft}>
                        Ready Replicas:&nbsp;
                      </Typography>
                      <Chip
                        label={service.ready_replicas}
                        size="small"
                        color={service.ready_replicas > 0 ? "primary" : "default"}
                        className={classes.serviceChip}
                      />
                    </Box>
                    <Box display="flex" alignItems="center">
                      <Typography variant="caption" className={classes.marginLeft}>
                        Total:&nbsp;
                      </Typography>
                      <Chip label={service.total} size="small" color="primary" className={classes.serviceChip} />
                    </Box>
                  </Box>

                  {leaseStatus.forwarded_ports && leaseStatus.forwarded_ports[service.name]?.length > 0 && (
                    <Box marginTop="4px">
                      <LabelValue
                        label="Forwarded Ports:"
                        value={leaseStatus.forwarded_ports[service.name].map((p) => (
                          <Box key={"port_" + p.externalPort} display="inline" mr={0.5}>
                            <LinkTo label={``} disabled={p.available < 1} onClick={(ev) => handleExternalUrlClick(ev, `${p.host}:${p.externalPort}`)}>
                              {p.externalPort}:{p.port}
                            </LinkTo>
                          </Box>
                        ))}
                      />
                    </Box>
                  )}

                  {service.uris?.length > 0 && (
                    <>
                      <Box marginTop=".5rem">
                        <LabelValue label="Uris:" />
                        <List dense>
                          {service.uris.map((uri) => {
                            return (
                              <ListItem key={uri} className={classes.listItem}>
                                <ListItemText
                                  primary={
                                    <LinkTo className={classes.link} onClick={(ev) => handleExternalUrlClick(ev, uri)}>
                                      {uri} <LaunchIcon fontSize="small" />
                                    </LinkTo>
                                  }
                                />
                                <ListItemSecondaryAction>
                                  <IconButton
                                    edge="end"
                                    aria-label="uri"
                                    size="small"
                                    onClick={(ev) => {
                                      copyTextToClipboard(uri);
                                      enqueueSnackbar(<Snackbar title="Uri copied to clipboard!" iconVariant="success" />, {
                                        variant: "success",
                                        autoHideDuration: 2000
                                      });
                                    }}
                                  >
                                    <FileCopyIcon fontSize="small" />
                                  </IconButton>
                                </ListItemSecondaryAction>
                              </ListItem>
                            );
                          })}
                        </List>
                      </Box>
                    </>
                  )}
                </Box>
              ))}
        </CardContent>
      </Card>
    </>
  );
})

render() {
    const { contracts, intl, user } = this.props;
    const { contractUuid } = this.props.match.params;

    const { claims } = Array.isArray(contracts) ?
      contracts.find(c => c.uuid == contractUuid) || {} : {};

    if (!user) {
      return (
        <Redirect to='/self-service' />
      );
    }

    function formatStatus(claim) {
      if (!claim) {
        return null;
      }
      let message, messageId, reimbursable;
      switch (claim.status) {
        case 'N':
          messageId = claim.isTheft ? 'Expecting confirmation from police'
            : 'Being Processed';
          break;
        case 'R':
          messageId = claim.repaired ? 'Repaired' : 'To be repaired';
          break;
        case 'F':
          messageId = 'Reimbursement';
          reimbursable = <span>
            , <FormattedNumber style='currency'
              currency={intl.formatMessage({ id: 'currency code' })}
              value={claim.reimbursable} minimumFractionDigits={2} />
          </span>;
          break;
        case 'P':
          messageId = 'Theft confirmed by police';
          break;
        case 'J':
          messageId = 'Rejected';
          break;
        default:
          messageId = 'Unknown';
      }
      if (messageId) {
        message = <FormattedMessage id={messageId} />;
      }
      let fileReference;
      if (claim.isTheft && claim.fileReference) {
        fileReference = (
          <span>
            , <FormattedMessage id='File Reference' />: {claim.fileReference}
          </span>
        );
      }
      return (
        <span>{message}{fileReference}{reimbursable}</span>
      );
    }
    const cards = Array.isArray(claims) ? claims.map((claim, index) => (
      <div key={index} className='ibm-col-5-2 ibm-col-medium-6-2'>
        <div className='ibm-card ibm-border-gray-50'>
          <div className='ibm-card__content'>
            <h4 className='ibm-bold ibm-h4'>{claim.description}</h4>
            <div style={{ wordWrap: 'break-word' }}>
              <FormattedMessage id='Creation Date' />:
              <FormattedDate value={claim.date} /> <br />
              <FormattedMessage id='Theft' />:
              <input type='checkbox' ref='theftField'
                className='ibm-styled-checkbox' checked={claim.isTheft} />
              <label className='ibm-field-label' htmlFor='theftField' /><br />
              <FormattedMessage id='Description' />: {claim.description}<br />
              <FormattedMessage id='Status' />: {formatStatus(claim)}
            </div>
            <br />
          </div>
        </div>
      </div>
    )) : (
        <div className='ibm-col-5-5 ibm-col-medium-6-6'>
          <FormattedMessage id={`You haven't filed any claims yet.`} />
        </div>
      );
    return (
      <div style={{ minHeight: '30vh' }}>
        <div className='ibm-columns'>
          <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
            <h3 className='ibm-h3'>
              <FormattedMessage id='Claims to Selected Contract' />
            </h3>
          </div>
        </div>
        <div className='ibm-columns ibm-cards' data-widget='masonry'
          data-items='.ibm-col-5-1'>
          {cards}
        </div>
      </div>
    );
  }

render() {
    let paymentStatus;

    const { intl, productInfo, contractInfo } = this.props;
    const { redirectToNext } = this.state;

    const startDate = moment(new Date(contractInfo.startDate));
    const endDate = moment(new Date(contractInfo.endDate));
    const dateDiff = moment.duration(endDate.diff(startDate)).asDays();

    const insurancePrice = dateDiff * (
      contractInfo.formulaPerDay(productInfo.price));
    const total = productInfo.price + insurancePrice;

    if (redirectToNext) {
      return (
        <Redirect to='/summary' />
      );
    }

    if (!productInfo) {
      return (
        <Redirect to='/' />
      );
    }

    return (
      <Loading hidden={!this.state.loading} text={intl.formatMessage({
        id: 'Processing Transaction...'
      })}>
        <div>
          <div className='ibm-columns'>
            <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
              <h3 className='ibm-h3'>
                <FormattedMessage id='Payment' />
              </h3>
            </div>
          </div>
          <div className='ibm-columns'>
            <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
              <table cols='2' style={{ width: '100%' }}>
                <tbody>
                  <tr>
                    <td style={{ padding: '.3em' }} colSpan='2'
                      className='ibm-background-blue-20'>
                      <h4 className='ibm-h4'>
                        <FormattedMessage id='Product' />
                      </h4>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      {productInfo.brand}
                      <br />
                      {productInfo.model}
                      <br />
                      <FormattedMessage id='Serial No.' />: {productInfo.serialNo}
                    </td>
                    <td className='ibm-right'>
                      <FormattedNumber style='currency'
                        currency={intl.formatMessage({ id: 'currency code' })}
                        value={productInfo.price} minimumFractionDigits={2} />
                    </td>
                  </tr>
                  <tr>
                    <td style={{ padding: '.3em' }} colSpan='2'
                      className='ibm-background-blue-20'>
                      <h4 className='ibm-h4'>
                        <FormattedMessage id='Services' />
                      </h4>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <FormattedMessage id='Insurance' />
                    </td>
                    <td className='ibm-right'>
                      <FormattedNumber style='currency'
                        currency={intl.formatMessage({ id: 'currency code' })}
                        value={insurancePrice} minimumFractionDigits={2} />
                    </td>
                  </tr>
                  <tr>
                    <td className='ibm-background-gray-10'
                      style={{ padding: '.3em' }}>
                      <h3 className='ibm-h3'>
                        <FormattedMessage id='Total' />
                      </h3>
                    </td>
                    <td className='ibm-background-gray-10 ibm-right'>
                      <h3 className='ibm-h3'>
                        <FormattedNumber style='currency'
                          currency={intl.formatMessage({ id: 'currency code' })}
                          value={total} minimumFractionDigits={2} />
                      </h3>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div className='ibm-columns'>
            <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1 ibm-right'>
              <button type='button' className='ibm-btn-pri ibm-btn-blue-50'
                onClick={this.order}><FormattedMessage id='Order' /></button>
            </div>
          </div>
        </div>
      </Loading>
    );
  }