@daimo/pay 1.1.1 → 1.1.3

package/build/index.d.ts

@@ -345,6 +345,9 @@ type ContextValue = {
     paymentState: PaymentState;
     /** TRPC API client. Internal use only. */
     trpc: any;
+    /** Custom message to display on confirmation page. */
+    confirmationMessage?: string;
+    setConfirmationMessage: React$1.Dispatch<React$1.SetStateAction<string | undefined>>;
 } & useConnectCallbackProps;
 /** Meant for internal use. This will be non-exported in a future SDK version. */
 declare const Context: React$1.Context<ContextValue | null>;
@@ -448,6 +451,10 @@ type PayButtonCommonProps = PayButtonPaymentProps & {
     onPaymentBounced?: (event: PaymentBouncedEvent) => void;
     /** Automatically close the modal after a successful payment. */
     closeOnSuccess?: boolean;
+    /** Open the modal by default. */
+    defaultOpen?: boolean;
+    /** Custom message to display on confirmation page. */
+    confirmationMessage?: string;
 };
 type DaimoPayButtonProps = PayButtonCommonProps & {
     /** Light mode, dark mode, or auto. */

package/build/package.json.js

@@ -1,5 +1,5 @@
 var name = "@daimo/pay";
-var version = "1.1.1";
+var version = "1.1.3";
 var author = "Daimo";
 var homepage = "https://pay.daimo.com";
 var license = "BSD-2-Clause license";
@@ -38,8 +38,8 @@ var keywords = [
 	"crypto"
 ];
 var dependencies = {
-	"@daimo/common": "0.3.17",
-	"@daimo/contract": "0.3.17",
+	"@daimo/common": "0.3.18",
+	"@daimo/contract": "0.3.18",
 	"@solana/wallet-adapter-base": "^0.9.23",
 	"@solana/wallet-adapter-react": "^0.15.35",
 	"@solana/web3.js": "^1.95.4",

package/build/src/components/Common/OptionsList/index.js

@@ -69,7 +69,7 @@ const OptionItem = ({ option }) => {
             return (jsx(IconStackContainer, { children: hydratedIcons.map((icon, index) => (jsx(IconStackItem, { "$marginRight": index !== hydratedIcons.length - 1 ? -12 : 0, "$zIndex": hydratedIcons.length - index, children: icon }, index))) }));
         }
     })();
-    return (jsxs(OptionButton, { type: "button", onClick: option.onClick, children: [iconContent, jsxs(OptionLabel, { children: [jsx(OptionTitle, { children: option.title }), option.subtitle && jsx(OptionSubtitle, { children: option.subtitle })] })] }));
+    return (jsxs(OptionButton, { type: "button", onClick: option.onClick, disabled: option.disabled, children: [iconContent, jsxs(OptionLabel, { children: [jsx(OptionTitle, { children: option.title }), option.subtitle && jsx(OptionSubtitle, { children: option.subtitle })] })] }));
 };
 const IconStackContainer = styled(motion.div) `
   position: absolute;

package/build/src/components/Common/PoweredByFooter/index.js

@@ -1,18 +1,34 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { motion } from 'framer-motion';
+import { useState, useEffect } from 'react';
+import { keyframes } from 'styled-components';
 import CrepeIcon from '../../../assets/crepe.js';
 import styled from '../../../styles/styled/index.js';
 
-const PoweredByFooter = () => {
+const PoweredByFooter = ({ supportUrl } = {}) => {
+    const [supportVisible, setSupportVisible] = useState(false);
+    useEffect(() => {
+        if (supportUrl == null)
+            return;
+        // Show the support link after delay
+        const timer = setTimeout(() => {
+            setSupportVisible(true);
+        }, 2500);
+        return () => clearTimeout(timer);
+    }, []);
     return (jsx(Container, { children: jsxs(TextButton, { onClick: () => {
-                window.open("https://pay.daimo.com?ref=paykit", "_blank");
-            }, children: [jsx(CrepeIcon, {}), "Powered by Daimo Pay"] }) }));
+                window.open(supportVisible ? supportUrl : "https://pay.daimo.com?ref=paykit", "_blank");
+            }, className: supportVisible ? "support" : "", children: [!supportVisible && jsx(CrepeIcon, {}), jsx("span", { children: supportVisible ? (jsxs(Fragment, { children: ["Need help? ", jsx(Underline, { children: "Contact support" })] })) : (jsx(Fragment, { children: "Powered by Daimo Pay" })) })] }) }));
 };
 const Container = styled(motion.div) `
   text-align: center;
   margin-top: 16px;
   margin-bottom: -4px;
 `;
+const fadeIn = keyframes `
+0%{ opacity:0; }
+100%{ opacity:1; }
+`;
 const TextButton = styled(motion.button) `
   appearance: none;
   user-select: none;
@@ -29,6 +45,7 @@ const TextButton = styled(motion.button) `
   font-size: 15px;
   line-height: 18px;
   font-weight: 500;
+
   transition:
     color 200ms ease,
     transform 100ms ease;
@@ -38,6 +55,18 @@ const TextButton = styled(motion.button) `
   &:active {
     transform: scale(0.96);
   }
+
+  span {
+    opacity: 1;
+    transition: opacity 300ms ease;
+  }
+
+  &.support span {
+    animation: ${fadeIn} 300ms ease both;
+  }
+`;
+const Underline = styled.span `
+  text-decoration: underline;
 `;
 
 export { PoweredByFooter as default };

package/build/src/components/Common/PoweredByFooter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/DaimoPay.js

@@ -106,6 +106,7 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
     const [solanaConnector, setSolanaConnector] = useState();
     const [route, setRoute] = useState(ROUTES.SELECT_METHOD);
     const [errorMessage, setErrorMessage] = useState("");
+    const [confirmationMessage, setConfirmationMessage] = useState(undefined);
     const [resize, onResize] = useState(0);
     // Include Google Font that is needed for a themes
     if (opts.embedGoogleFonts)
@@ -197,6 +198,8 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         // Other configuration
         options: opts,
         errorMessage,
+        confirmationMessage,
+        setConfirmationMessage,
         debugMode,
         log,
         displayError: (message, code) => {

package/build/src/components/DaimoPay.js.map

@@ -1 +1 @@
-{"version":3,"file":"DaimoPay.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DaimoPay.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/DaimoPayButton/index.js

@@ -47,11 +47,26 @@ function DaimoPayButtonCustom(props) {
             paymentState.setPayParams(payParams);
         }
     }, [payId, ...Object.values(payParams || {})]);
+    const { setConfirmationMessage } = context;
+    useEffect(() => {
+        if (props.confirmationMessage) {
+            setConfirmationMessage(props.confirmationMessage);
+        }
+    }, [props.confirmationMessage, setConfirmationMessage]);
     // Payment events: call these three event handlers.
     const { onPaymentStarted, onPaymentCompleted, onPaymentBounced } = props;
     const order = paymentState.daimoPayOrder;
     const hydOrder = order?.mode === DaimoPayOrderMode.HYDRATED ? order : null;
     const isStarted = hydOrder?.sourceStatus !== DaimoPayOrderStatusSource.WAITING_PAYMENT;
+    // Functions to show and hide the modal
+    const { children, closeOnSuccess } = props;
+    const modalOptions = { closeOnSuccess };
+    const show = () => {
+        if (paymentState.daimoPayOrder == null)
+            return;
+        context.showPayment(modalOptions);
+    };
+    const hide = () => context.setOpen(false);
     useEffect(() => {
         if (hydOrder == null || !isStarted)
             return;
@@ -79,14 +94,15 @@ function DaimoPayButtonCustom(props) {
             onPaymentBounced?.({ type: "payment_bounced", ...commonFields });
         }
     }, [hydOrder?.intentStatus]);
+    useEffect(() => {
+        if (props.defaultOpen) {
+            show();
+        }
+    }, [order != null]);
     // Validation
     if ((payId == null) == (payParams == null)) {
         throw new Error("Must specify either payId or appId, not both");
     }
-    const { children, closeOnSuccess } = props;
-    const modalOptions = { closeOnSuccess };
-    const show = () => context.showPayment(modalOptions);
-    const hide = () => context.setOpen(false);
     return children({ show, hide });
 }
 DaimoPayButtonCustom.displayName = "DaimoPayButton.Custom";

package/build/src/components/DaimoPayButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,15 +1,16 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { usePayContext } from '../../DaimoPay.js';
-import { PageContent, ModalContent, ModalH1 } from '../../Common/Modal/styles.js';
+import { PageContent, ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
 import { DaimoPayOrderMode, DaimoPayOrderStatusDest, assert } from '@daimo/common';
 import { getChainExplorerTxUrl } from '@daimo/contract';
 import { motion } from 'framer-motion';
 import { TickIcon, LoadingCircleIcon } from '../../../assets/icons.js';
 import styled from '../../../styles/styled/index.js';
+import { getSupportUrl } from '../../../utils/supportUrl.js';
 import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
 
 const Confirmation = () => {
-    const { paymentState } = usePayContext();
+    const { paymentState, confirmationMessage } = usePayContext();
     const { daimoPayOrder } = paymentState;
     const { done, txURL } = (() => {
         if (daimoPayOrder && daimoPayOrder.mode === DaimoPayOrderMode.HYDRATED) {
@@ -43,7 +44,7 @@ const Confirmation = () => {
                 justifyContent: "center",
                 alignItems: "center",
                 paddingBottom: 0,
-            }, children: [jsx(AnimationContainer, { children: jsxs(InsetContainer, { children: [jsx(Spinner, { "$status": done }), jsx(SuccessIcon, { "$status": done })] }) }), !done ? (jsx(ModalH1, { children: "Confirming..." })) : (jsx(ModalH1, { children: jsx(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: "Payment completed" }) })), jsx(PoweredByFooter, {})] }) }));
+            }, children: [jsx(AnimationContainer, { children: jsxs(InsetContainer, { children: [jsx(Spinner, { "$status": done }), jsx(SuccessIcon, { "$status": done })] }) }), !done ? (jsx(ModalH1, { children: "Confirming..." })) : (jsxs(Fragment, { children: [jsx(ModalH1, { children: jsx(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: "Payment completed" }) }), confirmationMessage && (jsx(ModalBody, { children: confirmationMessage }))] })), jsx(PoweredByFooter, { supportUrl: getSupportUrl(daimoPayOrder, done ? "Confirmed" : "Confirming") })] }) }));
 };
 const AnimationContainer = styled(motion.div) `
   position: relative;

package/build/src/components/Pages/Confirmation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -103,6 +103,8 @@ const SelectMethod = () => {
                 setSelectedExternalOption(option);
                 setRoute(ROUTES.WAITING_OTHER);
             },
+            disabled: option.disabled,
+            subtitle: option.message,
         })),
         ...(depositAddressOption ? [depositAddressOption] : []),
     ];

package/build/src/components/Pages/SelectMethod/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/utils/supportUrl.js

@@ -0,0 +1,19 @@
+import { writeDaimoPayOrderID } from '@daimo/common';
+
+function getSupportUrl(daimoPayOrder, screen) {
+    const encodedOrderId = daimoPayOrder == null ? null : writeDaimoPayOrderID(daimoPayOrder.id);
+    const email = "support@daimo.com";
+    const subject = `Support with Daimo Pay Id ${encodedOrderId}`;
+    let body = "";
+    if (daimoPayOrder != null) {
+        body += `Id: ${encodedOrderId}\n`;
+        body += `Org Id: ${daimoPayOrder.orgId}\n`;
+    }
+    body += `Support requested on ${screen} screen at ${new Date().toISOString()}\n\n`;
+    body += "Please explain the issue you are experiencing:\n\n";
+    const mailtoUrl = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+    return mailtoUrl;
+}
+
+export { getSupportUrl };
+//# sourceMappingURL=supportUrl.js.map

package/build/src/utils/supportUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"supportUrl.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@daimo/pay",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.1.3",
   "author": "Daimo",
   "homepage": "https://pay.daimo.com",
   "license": "BSD-2-Clause license",
@@ -40,8 +40,8 @@
     "crypto"
   ],
   "dependencies": {
-    "@daimo/common": "0.3.17",
-    "@daimo/contract": "0.3.17",
+    "@daimo/common": "0.3.18",
+    "@daimo/contract": "0.3.18",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/web3.js": "^1.95.4",
@@ -80,4 +80,4 @@
     "rollup-plugin-visualizer": "^5.5.4",
     "typescript-plugin-styled-components": "^3.0.0"
   }
-}
+}