@daimo/pay 1.1.4 → 1.2.0

package/build/src/components/Pages/WaitingOther/index.js

@@ -1,91 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import { usePayContext, ROUTES } from '../../DaimoPay.js';
-import { PageContent, ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
-import { motion, AnimatePresence } from 'framer-motion';
-import { css } from 'styled-components';
-import { ExternalLinkIcon } from '../../../assets/icons.js';
-import styled from '../../../styles/styled/index.js';
-import Button from '../../Common/Button/index.js';
-import CircleSpinner from '../../Spinners/CircleSpinner/index.js';
-import SquircleSpinner from '../../Spinners/SquircleSpinner/index.js';
-
-const WaitingOther = () => {
-    const context = usePayContext();
-    const { triggerResize, paymentState, setRoute } = context;
-    const trpc = context.trpc;
-    const { selectedExternalOption, payWithExternal, paymentWaitingMessage, daimoPayOrder, } = paymentState;
-    const [externalURL, setExternalURL] = useState(null);
-    useEffect(() => {
-        const checkForSourcePayment = async () => {
-            if (!daimoPayOrder)
-                return;
-            const found = await trpc.findSourcePayment.query({
-                orderId: daimoPayOrder.id.toString(),
-            });
-            if (found) {
-                setRoute(ROUTES.CONFIRMATION);
-            }
-        };
-        const interval = setInterval(checkForSourcePayment, 1000);
-        return () => clearInterval(interval);
-    }, [daimoPayOrder?.id]);
-    useEffect(() => {
-        if (!selectedExternalOption)
-            return;
-        payWithExternal(selectedExternalOption.id).then((url) => {
-            setExternalURL(url);
-            setTimeout(() => {
-                window.open(url, "_blank");
-            });
-        });
-    }, [selectedExternalOption]);
-    const waitingMessageLength = paymentWaitingMessage?.length;
-    useEffect(() => {
-        triggerResize();
-    }, [waitingMessageLength, externalURL]);
-    if (!selectedExternalOption) {
-        return jsx(PageContent, {});
-    }
-    const optionSpinner = (() => {
-        if (selectedExternalOption.logoShape === "circle") {
-            return (jsx(CircleSpinner, { logo: jsx("img", { src: selectedExternalOption.logoURI }), loading: true, unavailable: false }));
-        }
-        else {
-            return (jsx(SquircleSpinner, { logo: jsx("img", { src: selectedExternalOption.logoURI }), loading: true }));
-        }
-    })();
-    return (jsxs(PageContent, { children: [jsx(LoadingContainer, { children: jsx(AnimationContainer, { "$circle": selectedExternalOption.logoShape === "circle", children: jsx(AnimatePresence, { children: optionSpinner }) }) }), jsxs(ModalContent, { style: { marginLeft: 24, marginRight: 24 }, children: [jsx(ModalH1, { children: "Waiting for Payment" }), paymentWaitingMessage && (jsx(ModalBody, { style: { marginTop: 12, marginBottom: 12 }, children: paymentWaitingMessage }))] }), jsx(Button, { icon: jsx(ExternalLinkIcon, {}), onClick: () => {
-                    if (externalURL)
-                        window.open(externalURL, "_blank");
-                }, children: "Open in New Tab" })] }));
-};
-const LoadingContainer = styled(motion.div) `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 10px auto 16px;
-  height: 120px;
-`;
-const AnimationContainer = styled(motion.div) `
-  user-select: none;
-  position: relative;
-  --spinner-error-opacity: 0;
-  &:before {
-    content: "";
-    position: absolute;
-    inset: 1px;
-    opacity: 0;
-    background: var(--ck-body-color-danger);
-    ${(props) => props.$circle &&
-    css `
-        inset: -5px;
-        border-radius: 50%;
-        background: none;
-        box-shadow: inset 0 0 0 3.5px var(--ck-body-color-danger);
-      `}
-  }
-`;
-
-export { LoadingContainer, WaitingOther as default };
-//# sourceMappingURL=index.js.map