@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/Payment/PaymentDetailsCard.js

@@ -0,0 +1,359 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React__default from "react";
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+import { InfoIcon } from "../InfoIcon/InfoIcon.js";
+import { ArrowSimple } from "../icons/ArrowSimple.js";
+import { formatCurrencyValue, getCurrencyIcon } from "../../utils/formatCurrencyValue.js";
+import externalLinkIcon from "../../static/images/external-link-icon.svg.js";
+const CardContainer = styled.div`
+  background: ${colors.white};
+  border-radius: 10px;
+  border: 1px solid ${colors.lightGrey};
+  padding: 20px 32px;
+`;
+const CardTitle = styled.div`
+  font-size: 10px;
+  letter-spacing: 1.12px;
+  font-weight: 500;
+  color: ${colors.white};
+  background: ${colors.futureBlack};
+  padding: 12px 24px;
+  margin: -20px -32px 20px -32px;
+  border-radius: 9px 9px 0 0;
+  // border-bottom: 1px solid ${colors.lightGrey};
+  text-align: start;
+  text-transform: uppercase;
+`;
+const AmountSection = styled.div``;
+const AmountLabel = styled.div`
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 20px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin-bottom: 8px;
+  color: ${colors.grayBlue};
+  text-align: start;
+`;
+const AmountSubtitle = styled.div`
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.6px;
+  color: #90a1b9;
+  margin-top: 8px;
+  text-align: start;
+`;
+const AmountDisplay = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`;
+const AmountLeft = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+`;
+const CurrencyTicker = styled.div`
+  font-size: 22px;
+  font-weight: 300;
+  color: #90a1b9;
+  letter-spacing: 0.8px;
+  line-height: 28px;
+  flex-shrink: 0;
+  margin-left: auto;
+`;
+const CurrencyLogo = styled.div.withConfig({
+  shouldForwardProp: (props) => !["color"].includes(props)
+})`
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: ${(props) => props.color || colors.black};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: ${colors.white};
+  font-size: 14px;
+  font-weight: 600;
+  overflow: hidden;
+`;
+const CurrencyIcon = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;
+const AmountValue = styled.div`
+  font-size: 34px;
+  font-weight: 300;
+  text-transform: uppercase;
+  line-height: 40px;
+  letter-spacing: 1.5px;
+  word-wrap: break-word;
+  color: ${colors.futureBlack};
+`;
+const Separator = styled.hr`
+  border: none;
+  border-top: 1px solid #e2e8f0;
+  margin: 20px 0px;
+`;
+const ArrowSeparatorWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: #e2e8f0;
+  }
+`;
+const ArrowCircle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 16px;
+  height: 0;
+  color: #cbd5e1;
+`;
+const SectionHeader = styled.div`
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 20px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  color: ${colors.grayBlue};
+  text-align: start;
+  margin-bottom: 4px;
+`;
+const DetailsSection = styled.div.withConfig({
+  shouldForwardProp: (props) => !["noMargin"].includes(props)
+})`
+  margin-bottom: ${(props) => props.noMargin ? "0" : "24px"};
+`;
+const DetailRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 6px 0;
+
+  &:first-child {
+    padding-top: 0;
+  }
+
+  &:last-child {
+    padding: 6px 0 0 0;
+  }
+`;
+const DetailLabel = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  color: #56606f;
+
+  i {
+    font-size: 14px;
+  }
+`;
+const DetailValue = styled.div`
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  word-wrap: break-word;
+  text-align: right;
+  max-width: 60%;
+  color: ${colors.futureBlack};
+`;
+const PlaceholderValue = styled.span`
+  color: ${colors.grayBlue};
+  font-weight: 300;
+  font-size: 14px;
+  letter-spacing: 0.5px;
+`;
+const ExternalLink = styled.a`
+  color: ${colors.futureBlack};
+  text-decoration: underline;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
+    flex-shrink: 0;
+  }
+`;
+const InfoSectionContainer = styled.div`
+  margin-top: 24px;
+`;
+const BannerSlot = styled.div`
+  margin-top: 8px;
+`;
+const ExternalLinkIconImg = styled.img`
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+`;
+const DetailItem = ({ label, value, tooltip, placeholder, isCustom, href, target }) => {
+  const renderValue = () => {
+    if (isCustom && value) {
+      return value;
+    }
+    if (href) {
+      return /* @__PURE__ */ jsxs(ExternalLink, { href, target: target || "_blank", rel: "noopener noreferrer", children: [
+        /* @__PURE__ */ jsx(ExternalLinkIconImg, { src: externalLinkIcon, alt: "" }),
+        value || placeholder || "-"
+      ] });
+    }
+    if (value !== void 0 && value !== null && value !== "") {
+      return value;
+    }
+    if (placeholder) {
+      return /* @__PURE__ */ jsx(PlaceholderValue, { children: placeholder });
+    }
+    return "-";
+  };
+  return /* @__PURE__ */ jsxs(DetailRow, { children: [
+    /* @__PURE__ */ jsxs(DetailLabel, { children: [
+      label,
+      tooltip && /* @__PURE__ */ jsx(InfoIcon, { containerStyle: { width: 14, height: 14 }, title: tooltip, noMargin: true })
+    ] }),
+    /* @__PURE__ */ jsx(DetailValue, { children: renderValue() })
+  ] });
+};
+const AmountBlock = ({ config }) => {
+  if (!config) return null;
+  if (React__default.isValidElement(config)) {
+    return config;
+  }
+  const { label = "Amount", subtitle, amount, currency, currencyColor, icon, showTicker = true, banner } = config;
+  const formattedAmount = amount !== void 0 && amount !== null && amount !== "" ? formatCurrencyValue(currency, amount, 2, { valueFirst: true }) : null;
+  const currencyIcon = getCurrencyIcon(currency, icon);
+  const logoColor = currencyColor || colors.black;
+  const ticker = showTicker ? (currency || "").toUpperCase() : null;
+  const displayValue = formattedAmount ? formattedAmount.replace(/\s*\S+$/, "") : null;
+  const renderCurrencyLogo = () => {
+    if (currencyIcon) {
+      return /* @__PURE__ */ jsx(CurrencyLogo, { color: "transparent", children: /* @__PURE__ */ jsx(CurrencyIcon, { src: currencyIcon, alt: currency || "currency" }) });
+    }
+    return /* @__PURE__ */ jsx(CurrencyLogo, { color: logoColor });
+  };
+  return /* @__PURE__ */ jsxs(AmountSection, { children: [
+    /* @__PURE__ */ jsx(AmountLabel, { hasSubtitle: !!subtitle, children: label }),
+    /* @__PURE__ */ jsxs(AmountDisplay, { children: [
+      /* @__PURE__ */ jsxs(AmountLeft, { children: [
+        renderCurrencyLogo(),
+        /* @__PURE__ */ jsx(AmountValue, { children: displayValue !== null ? displayValue : "-" })
+      ] }),
+      ticker && /* @__PURE__ */ jsx(CurrencyTicker, { children: ticker })
+    ] }),
+    subtitle && /* @__PURE__ */ jsx(AmountSubtitle, { children: subtitle }),
+    banner && /* @__PURE__ */ jsx(BannerSlot, { children: banner })
+  ] });
+};
+const DetailGroup = ({ group, isLast }) => {
+  const { sectionTitle, items } = group;
+  return /* @__PURE__ */ jsxs(DetailsSection, { noMargin: isLast, children: [
+    sectionTitle && /* @__PURE__ */ jsx(SectionHeader, { children: sectionTitle }),
+    items.map((detail, index) => /* @__PURE__ */ jsx(
+      DetailItem,
+      {
+        label: detail.label,
+        value: detail.value,
+        tooltip: detail.tooltip,
+        placeholder: detail.placeholder,
+        isCustom: detail.isCustom,
+        href: detail.href,
+        target: detail.target
+      },
+      detail.key || index
+    ))
+  ] });
+};
+const PaymentDetailsCard = ({
+  title,
+  amountSection,
+  amountSections,
+  details,
+  detailGroups,
+  infoSection,
+  showSeparators = true,
+  showArrowSeparator = false,
+  containerStyle
+}) => {
+  const allAmountSections = amountSections || (amountSection ? [amountSection] : []);
+  const renderAmountSections = () => {
+    if (allAmountSections.length === 0) return null;
+    return allAmountSections.map((section, index) => {
+      const isLast = index === allAmountSections.length - 1;
+      const useArrow = showArrowSeparator && !isLast && allAmountSections.length > 1;
+      return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsx(AmountBlock, { config: section }),
+        showSeparators && !isLast && (useArrow ? /* @__PURE__ */ jsx(ArrowSeparatorWrapper, { children: /* @__PURE__ */ jsx(ArrowCircle, { children: /* @__PURE__ */ jsx(ArrowSimple, { direction: "bottom" }) }) }) : /* @__PURE__ */ jsx(Separator, {})),
+        showSeparators && isLast && (detailGroups || details) && /* @__PURE__ */ jsx(Separator, {})
+      ] }, index.toString() + section.label);
+    });
+  };
+  const renderDetails = () => {
+    if (detailGroups && detailGroups.length > 0) {
+      return detailGroups.map((group, index) => {
+        const isLast = index === detailGroups.length - 1 && !infoSection;
+        return /* @__PURE__ */ jsx(React__default.Fragment, { children: /* @__PURE__ */ jsx(DetailGroup, { group, isLast }) }, group.key || index);
+      });
+    }
+    if (details && details.length > 0) {
+      return /* @__PURE__ */ jsx(DetailsSection, { noMargin: !infoSection, children: details.map((detail, index) => /* @__PURE__ */ jsx(
+        DetailItem,
+        {
+          label: detail.label,
+          value: detail.value,
+          tooltip: detail.tooltip,
+          placeholder: detail.placeholder,
+          isCustom: detail.isCustom,
+          href: detail.href,
+          target: detail.target
+        },
+        detail.key || index
+      )) });
+    }
+    return null;
+  };
+  const renderInfoSection = () => {
+    if (!infoSection) return null;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      showSeparators && /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx(InfoSectionContainer, { children: infoSection })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(CardContainer, { style: containerStyle, children: [
+    title && /* @__PURE__ */ jsx(CardTitle, { children: title }),
+    renderAmountSections(),
+    renderDetails(),
+    renderInfoSection()
+  ] });
+};
+export {
+  CurrencyLogo,
+  DetailItem,
+  DetailsSection,
+  PaymentDetailsCard
+};

package/dist/components/Payment/PaymentDisplay.js

@@ -0,0 +1,199 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import styled from "styled-components";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { Text } from "../Text/Text.styles.js";
+import { colors } from "../../styles/colors.js";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { Tooltip } from "react-tippy";
+import { CopyToClipboardButton } from "../CryptoAddress/CryptoAddress.styles.js";
+import stdin_default from "../QRCode/QRCode.js";
+import { SectionTitle } from "../SectionTitle/SectionTitle.styles.js";
+import { FlexContainer } from "../Grid/Grid.styles.js";
+import rwd from "../../styles/rwd.js";
+import { getCurrencyIcon } from "../../utils/formatCurrencyValue.js";
+const CodeWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["maxWidth"].includes(props)
+})`
+  background: ${colors.grey3};
+  border: 1px solid ${colors.grey3};
+  box-shadow: 2px 4px 14px 0px rgb(196, 196, 196, 0.25);
+  border-radius: 5px;
+  padding: 32px 64px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  margin: auto;
+  max-width: ${(props) => props.maxWidth || "550px"};
+`;
+const AmountSection = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin: 14px 0 8px 0;
+
+  > :nth-child(3) {
+    margin-left: -8px;
+  }
+
+  span {
+    font-weight: 400;
+    text-transform: uppercase;
+    line-height: 28px;
+    font-size: 18px;
+    letter-spacing: 0.8px;
+
+    ${rwd.XLarge`
+    font-size: 22px;
+  `}
+  }
+`;
+const AmountText = styled(Text)`
+  font-size: 24px;
+  font-weight: 800;
+  text-transform: uppercase;
+  line-height: 40px;
+  letter-spacing: 1.5px;
+  word-wrap: break-word;
+
+  ${rwd.XLarge`
+    font-size: 34px;
+  `}
+`;
+const AmountIcon = styled.img`
+  width: 24px;
+  height: 24px;
+
+  ${rwd.XLarge`
+    width:32px;
+    height:32px;
+  `}
+`;
+const AddressText = styled.p`
+  letter-spacing: 0.6%;
+  word-break: break-all;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0.1;
+  margin: 0;
+  margin-top: 14px;
+`;
+const AddressDescription = styled.p`
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  margin: 0;
+`;
+const CopyToClipBoardTooltip = ({ value, buttonStyle, onCopy }) => {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    setCopied(true);
+    if (onCopy) onCopy(value);
+  };
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      position: "top",
+      title: copied ? "Copied to clipboard!" : "Click to copy to clipboard",
+      theme: "light",
+      arrow: true,
+      hideOnClick: false,
+      onHidden: () => setCopied(false),
+      duration: 200,
+      children: /* @__PURE__ */ jsx(CopyToClipboard, { text: value, onCopy: handleCopy, children: /* @__PURE__ */ jsx(CopyToClipboardButton, { style: buttonStyle }) })
+    }
+  );
+};
+const PaymentDisplay = ({
+  amount,
+  currency = "BTC",
+  address,
+  showQRCode = true,
+  showCopyIcons = true,
+  showAddress = true,
+  qrCodeValue,
+  amountTitle = "Transfer amount",
+  addressTitle = "address",
+  addressDescription = "",
+  qrCodeSize = 200,
+  qrCodeStyle,
+  // Style props
+  containerStyle,
+  codeWrapperStyle,
+  amountSectionStyle,
+  amountTextStyle,
+  amountIconStyle,
+  addressTextStyle,
+  addressDescriptionStyle,
+  addressSectionStyle,
+  // Other customization props
+  maxWidth,
+  className,
+  codeWrapperClassName,
+  customCurrencyIcon,
+  onAmountCopy,
+  onAddressCopy,
+  copyButtonStyle
+}) => {
+  const defaultQRCodeStyle = {
+    backgroundColor: "#000000",
+    padding: 18,
+    borderRadius: 8,
+    margin: "16px 0"
+  };
+  return /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, center: true, style: containerStyle, className, children: /* @__PURE__ */ jsxs(CodeWrapper, { style: codeWrapperStyle, maxWidth, className: codeWrapperClassName, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(SectionTitle, { children: amountTitle }),
+      /* @__PURE__ */ jsxs(AmountSection, { style: amountSectionStyle, children: [
+        /* @__PURE__ */ jsx(AmountIcon, { src: getCurrencyIcon(currency, customCurrencyIcon), style: amountIconStyle, alt: currency }),
+        /* @__PURE__ */ jsx(AmountText, { style: amountTextStyle, children: amount }),
+        /* @__PURE__ */ jsxs(AmountText, { style: amountTextStyle, children: [
+          " ",
+          currency
+        ] }),
+        showCopyIcons && /* @__PURE__ */ jsx(
+          CopyToClipBoardTooltip,
+          {
+            value: amount.toString(),
+            buttonStyle: copyButtonStyle || { height: 18, width: 18 },
+            onCopy: onAmountCopy
+          }
+        )
+      ] })
+    ] }),
+    showQRCode && qrCodeValue && /* @__PURE__ */ jsx(
+      stdin_default,
+      {
+        size: qrCodeSize,
+        bgColor: "#000000",
+        fgColor: "#ffffff",
+        style: qrCodeStyle || defaultQRCodeStyle,
+        value: qrCodeValue
+      }
+    ),
+    showAddress && address && /* @__PURE__ */ jsxs("div", { style: addressSectionStyle, children: [
+      /* @__PURE__ */ jsx(SectionTitle, { children: addressTitle }),
+      /* @__PURE__ */ jsxs(FlexContainer, { style: { gap: 16, margin: "12px 0" }, children: [
+        /* @__PURE__ */ jsx(AddressText, { style: addressTextStyle, children: address }),
+        showCopyIcons && /* @__PURE__ */ jsx(
+          CopyToClipBoardTooltip,
+          {
+            value: address,
+            buttonStyle: copyButtonStyle || { height: 16, width: 16, marginTop: 4 },
+            onCopy: onAddressCopy
+          }
+        )
+      ] }),
+      addressDescription && /* @__PURE__ */ jsx(AddressDescription, { style: addressDescriptionStyle, children: addressDescription })
+    ] })
+  ] }) });
+};
+export {
+  CodeWrapper,
+  PaymentDisplay
+};

package/dist/components/Payment/TimerComponent.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { memo } from "react";
+import { useTimer } from "../../hooks/useTimer.js";
+import { format } from "date-fns-tz";
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+import { Text } from "../Text/Text.styles.js";
+import { Icon, iconsMap } from "../Icon/Icon.style.js";
+import { FlexContainer } from "../Grid/Grid.styles.js";
+import rwd from "../../styles/rwd.js";
+const TimerBlock = styled.div.withConfig({
+  shouldForwardProp: (props) => !["maxWidth", "red"].includes(props)
+})`
+  background-color: ${colors.grey3};
+  padding: 24px 27px;
+  text-align: start;
+  max-width: ${(props) => props.maxWidth || "550px"};
+  margin: auto;
+
+  strong {
+    font-weight: 600;
+  }
+
+  p {
+    font-size: 14px !important;
+    margin: 0 !important;
+  }
+
+  ${rwd.Medium`
+    p {
+      font-size: 16px !important;
+    }
+  `}
+
+  ${Text}:first-child {
+    margin-bottom: 16px;
+  }
+
+  ${(props) => props.red && `
+    #timer-text {
+      color: ${colors.darkRed};
+    }
+  `}
+`;
+const TimerComponent = memo(
+  ({
+    timerId,
+    onTimerExpired,
+    warningThreshold = 60 * 5,
+    // 5 minutes
+    // Customizable text props
+    title = "This offer is time-limited",
+    description = "Please note that this offer is valid only for a limited period and will expire in",
+    // Style props
+    containerStyle,
+    timerBlockStyle,
+    className,
+    maxWidth,
+    // Icon props
+    icon = iconsMap.inProgress,
+    iconSize = 16,
+    showIcon = true
+  }) => {
+    const { secondsRemaining, hasTimerFinished, stopTimer } = useTimer(timerId);
+    React__default.useEffect(() => {
+      if (hasTimerFinished) {
+        stopTimer();
+        if (onTimerExpired) {
+          onTimerExpired();
+        }
+      }
+    }, [hasTimerFinished, onTimerExpired, stopTimer]);
+    const isWarning = secondsRemaining < warningThreshold;
+    const formattedTime = format(new Date(secondsRemaining * 1e3), "HH:mm:ss", { timeZone: "UTC" });
+    return /* @__PURE__ */ jsx(TimerBlock, { red: isWarning, maxWidth, style: timerBlockStyle, className, children: /* @__PURE__ */ jsxs("div", { style: containerStyle, children: [
+      /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsxs(FlexContainer, { itemsCenter: true, style: { gap: 8 }, children: [
+        showIcon && /* @__PURE__ */ jsx(Icon, { icon, size: iconSize }),
+        /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: title }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsxs("p", { children: [
+        description,
+        " ",
+        /* @__PURE__ */ jsx("strong", { id: "timer-text", children: formattedTime })
+      ] }) })
+    ] }) });
+  }
+);
+TimerComponent.displayName = "TimerComponent";
+export {
+  TimerBlock,
+  TimerComponent
+};