@daimo/pay 1.1.1 → 1.1.2

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.2";
 var author = "Daimo";
 var homepage = "https://pay.daimo.com";
 var license = "BSD-2-Clause license";

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,6 +1,6 @@
-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';
@@ -9,7 +9,7 @@ import styled from '../../../styles/styled/index.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 +43,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, {})] }) }));
 };
 const AnimationContainer = styled(motion.div) `
   position: relative;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@daimo/pay",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.1.2",
   "author": "Daimo",
   "homepage": "https://pay.daimo.com",
   "license": "BSD-2-Clause license",