@crossmint/client-sdk-react-ui 1.0.1-alpha.6 → 1.1.0-alpha.1

package/src/components/hosted/CrossmintPayButton.test.tsx

@@ -0,0 +1,187 @@
+import "@testing-library/jest-dom";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+
+import { CrossmintPayButton } from ".";
+import { LIB_VERSION } from "../../consts/version";
+
+// TODO(#60): create a global service for this to work everywhere and to be able to customize resolved/rejected responses
+const fetchReturns = Promise.resolve({
+    json: () => Promise.resolve({}),
+}) as any;
+global.fetch = jest.fn(() => fetchReturns);
+
+// TODO(#61): make this automatically mocked in every test suite
+const openReturns = {} as Window;
+global.open = jest.fn(() => openReturns);
+global.console = {
+    log: jest.fn(),
+    error: jest.fn(),
+    warn: jest.fn(),
+} as any;
+
+const defaultProps = {
+    clientId: "a4e1bfcc-9884-11ec-b909-0242ac120002",
+};
+
+afterEach(() => {
+    jest.clearAllMocks();
+});
+
+describe("CrossmintPayButton", () => {
+    test("should open window with correct url", async () => {
+        render(<CrossmintPayButton {...defaultProps} />);
+
+        await act(async () => {
+            fireEvent.click(screen.getByText("Buy with credit card"));
+        });
+
+        const urlOrigin = "https://www.crossmint.com";
+
+        const mintQueryParams = new URLSearchParams({
+            clientId: defaultProps.clientId,
+            clientName: "client-sdk-react-ui",
+            clientVersion: LIB_VERSION,
+            locale: "en-US",
+            currency: "usd",
+        }).toString();
+
+        const callbackUrl = encodeURIComponent(`${urlOrigin}/checkout/mint?${mintQueryParams}`);
+
+        const signinURLParams = new URLSearchParams({
+            locale: "en-US",
+            currency: "usd",
+            email: "",
+        }).toString();
+
+        const expectedURL = `${urlOrigin}/signin?${signinURLParams}&callbackUrl=${callbackUrl}`;
+        expect(global.open).toHaveBeenCalledWith(
+            expectedURL,
+            "popUpWindow",
+            "height=750,width=400,left=312,top=9,resizable=yes,scrollbars=yes,toolbar=yes,menubar=true,location=no,directories=no, status=yes"
+        );
+    });
+
+    test("should add the `whPassThroughArgs` prop on the window url", async () => {
+        const whPassThroughArgs = { hello: "hi" };
+        render(<CrossmintPayButton {...defaultProps} whPassThroughArgs={whPassThroughArgs} />);
+
+        await act(async () => {
+            fireEvent.click(screen.getByText("Buy with credit card"));
+        });
+        expect(global.open).toHaveBeenCalledWith(
+            expect.stringContaining("whPassThroughArgs%3D%257B%2522hello%2522%253A%2522hi%2522%257D"),
+            expect.anything(),
+            expect.anything()
+        );
+    });
+
+    describe("when passing the prepay prop", () => {
+        test("should pass the prepay query param", async () => {
+            render(<CrossmintPayButton {...defaultProps} prepay />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByText("Buy with credit card"));
+            });
+            expect(global.open).toHaveBeenCalledWith(
+                expect.stringContaining("prepay%3Dtrue"),
+                expect.anything(),
+                expect.anything()
+            );
+        });
+    });
+
+    describe("when passing the prepay prop as false", () => {
+        test("should not pass the prepay query param", async () => {
+            render(<CrossmintPayButton {...defaultProps} prepay={false} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByText("Buy with credit card"));
+            });
+            expect(global.open).toHaveBeenCalledWith(
+                expect.not.stringContaining("prepay"),
+                expect.anything(),
+                expect.anything()
+            );
+        });
+    });
+
+    describe("when passing the loginEmail prop", () => {
+        test("should pass an email in the email query param", async () => {
+            render(<CrossmintPayButton {...defaultProps} loginEmail="user@gmail.com" />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByText("Buy with credit card"));
+            });
+            expect(global.open).toHaveBeenCalledWith(
+                expect.stringContaining("email=user%40gmail.com"),
+                expect.anything(),
+                expect.anything()
+            );
+        });
+
+        test("should pass the email query param empty if loginEmail is empty", async () => {
+            render(<CrossmintPayButton {...defaultProps} loginEmail="" />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByText("Buy with credit card"));
+            });
+            expect(global.open).toHaveBeenCalledWith(
+                expect.stringContaining("email=&"),
+                expect.anything(),
+                expect.anything()
+            );
+        });
+
+        test("should pass the email query param empty if loginEmail is not present as a param", async () => {
+            render(<CrossmintPayButton {...defaultProps} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByText("Buy with credit card"));
+            });
+            expect(global.open).toHaveBeenCalledWith(
+                expect.stringContaining("email=&"),
+                expect.anything(),
+                expect.anything()
+            );
+        });
+    });
+
+    describe("when passing collectionId instead of clientId", () => {
+        test("should open window with correct url", async () => {
+            render(<CrossmintPayButton collectionId={defaultProps.clientId} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByText("Buy with credit card"));
+            });
+
+            expect(global.open).toHaveBeenCalledWith(
+                expect.stringContaining(`clientId%3D${defaultProps.clientId}`),
+                expect.anything(),
+                expect.anything()
+            );
+        });
+    });
+
+    describe("when passing projectId", () => {
+        test("should open window with projectId included in query params", async () => {
+            render(<CrossmintPayButton {...defaultProps} projectId="123" />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByText("Buy with credit card"));
+            });
+
+            expect(global.open).toHaveBeenCalledWith(
+                expect.stringContaining(`projectId%3D123`),
+                expect.anything(),
+                expect.anything()
+            );
+        });
+    });
+
+    describe("when passing getButtonText prop", () => {
+        test("should show custom text", async () => {
+            render(<CrossmintPayButton {...defaultProps} getButtonText={() => "Custom text"} />);
+            expect(screen.getByText("Custom text")).toBeInTheDocument();
+        });
+    });
+});

package/src/{CrossmintPayButton.tsx → components/hosted/CrossmintPayButton.tsx}

@@ -1,12 +1,21 @@
-import React, { MouseEvent, useMemo } from "react";
+import { CSSProperties, MouseEvent, useMemo } from "react";
 import { useState } from "react";
 
-import { clientNames, crossmintModalService, crossmintPayButtonService } from "@crossmint/client-sdk-base";
+import {
+    CrossmintPayButtonProps,
+    clientNames,
+    crossmintModalService,
+    crossmintPayButtonService,
+} from "@crossmint/client-sdk-base";
 
+import { LIB_VERSION } from "../../consts/version";
+import useEnvironment from "../../hooks/useEnvironment";
 import { formatProps, useStyles } from "./styles";
-import { CrossmintPayButtonReactProps } from "./types";
-import useEnvironment from "./useEnvironment";
-import { LIB_VERSION } from "./version";
+
+export type CrossmintPayButtonReactProps = CrossmintPayButtonProps & {
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    style?: CSSProperties;
+};
 
 export function CrossmintPayButton(buttonProps: CrossmintPayButtonReactProps) {
     const {

package/src/components/hosted/index.ts

@@ -0,0 +1 @@
+export * from "./CrossmintPayButton";

package/src/{styles/index.ts → components/hosted/styles.ts}

@@ -8,6 +8,7 @@ interface CustomStylingProps {
 }
 
 const themeIsLight = (theme: string) => theme === "light";
+
 export const formatProps = (theme: string): CustomStylingProps => ({
     buttonBgColor: themeIsLight(theme) ? "white" : DARK_BG,
     paragraphColor: themeIsLight(theme) ? "black" : "white",

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./CrossmintNFTCollectionView";
+export * from "./CrossmintNFTDetail";
+
+export * from "./embed";
+export * from "./hosted";

package/src/consts/version.ts

@@ -0,0 +1 @@
+export const LIB_VERSION = "1.1.0-alpha.1";

package/src/{useEnvironment.ts → hooks/useEnvironment.ts}

@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
-
-export default function useEnvironment() {
-    const [isServerSideRendering, setIsServerSideRendering] = useState(true);
-    useEffect(() => {
-        setIsServerSideRendering(false);
-    }, []);
-
-    return { isServerSideRendering };
-}
+import { useEffect, useState } from "react";
+
+export default function useEnvironment() {
+    const [isServerSideRendering, setIsServerSideRendering] = useState(true);
+    useEffect(() => {
+        setIsServerSideRendering(false);
+    }, []);
+
+    return { isServerSideRendering };
+}

package/src/index.ts

@@ -1,6 +1,4 @@
-export * from "./CrossmintPayButton";
-export * from "./CrossmintNFTCollectionView";
-export * from "./CrossmintNFTDetail";
-export * from "./CrossmintPaymentElement";
-export { CheckoutEvents, useCrossmintEvents } from "@crossmint/client-sdk-base";
-export type { CrossmintCheckoutEvent, CheckoutEventMap, CrossmintCheckoutEventUnion } from "@crossmint/client-sdk-base";
+export * from "./components";
+
+export { CrossmintEvents, useCrossmintEvents } from "@crossmint/client-sdk-base";
+export type { CrossmintEvent, CrossmintEventMap } from "@crossmint/client-sdk-base";

package/lib/index.cjs

@@ -1 +0,0 @@
-"use strict";var it=Object.create;var d=Object.defineProperty;var st=Object.getOwnPropertyDescriptor;var at=Object.getOwnPropertyNames;var mt=Object.getPrototypeOf,lt=Object.prototype.hasOwnProperty;var ct=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},V=(t,e,n,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of at(e))!lt.call(t,o)&&o!==n&&d(t,o,{get:()=>e[o],enumerable:!(m=st(e,o))||m.enumerable});return t};var h=(t,e,n)=>(n=t!=null?it(mt(t)):{},V(e||!t||!t.__esModule?d(n,"default",{value:t,enumerable:!0}):n,t)),gt=t=>V(d({},"__esModule",{value:!0}),t);var yt={};ct(yt,{CheckoutEvents:()=>v.CheckoutEvents,CrossmintNFTCollectionView:()=>ft,CrossmintNFTDetail:()=>dt,CrossmintPayButton:()=>ut,CrossmintPaymentElement:()=>ht,useCrossmintEvents:()=>v.useCrossmintEvents});module.exports=gt(yt);var i=h(require("react"),1),M=require("react"),c=require("@crossmint/client-sdk-base");var R=require("react-jss"),pt="#1e1e1e",F=t=>t==="light",U=t=>({buttonBgColor:F(t)?"white":pt,paragraphColor:F(t)?"black":"white"}),L=(0,R.createUseStyles)({"@global":{"@import":"url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap')"},crossmintButton:{display:"flex","flex-direction":"row","align-items":"center",padding:"0.875rem 0.875rem","font-weight":"900",transition:"opacity ease-in-out 0.25s","border-radius":"0.5rem","font-family":'"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',outline:"none",border:"none","box-shadow":"0px 8px 15px rgba(0, 0, 0, 0.1)","justify-content":"center",background:({buttonBgColor:t})=>t,"&:hover:enabled":{opacity:"0.6",cursor:"pointer"}},crossmintImg:{width:"21px",height:"21px","margin-right":"0.875rem"},crossmintParagraph:{color:({paragraphColor:t})=>t,margin:"0"}});var y=require("react");function k(){let[t,e]=(0,y.useState)(!0);return(0,y.useEffect)(()=>{e(!1)},[]),{isServerSideRendering:t}}var l="1.0.1-alpha.6";function ut(t){let{className:e,disabled:n,onClick:m,style:o,tabIndex:w,theme:b="dark",mintTo:P,emailTo:s,listingId:g,auctionId:p,showOverlay:I=!0,mintConfig:_,whPassThroughArgs:A,environment:G,paymentMethod:u,preferredSigninMethod:H,dismissOverlayOnClick:$,prepay:j,locale:B="en-US",currency:K="usd",successCallbackURL:Q="",failureCallbackURL:W="",loginEmail:q="",projectId:z,getButtonText:E,...T}=t,J="clientId"in T?T.clientId:T.collectionId,[f,X]=(0,M.useState)(!1),{isServerSideRendering:Y}=k(),{connect:Z}=(0,c.crossmintModalService)({clientId:J,projectId:z,showOverlay:I,dismissOverlayOnClick:$,setConnecting:X,libVersion:l,environment:G,clientName:c.clientNames.reactUi,locale:B,currency:K,successCallbackURL:Q,failureCallbackURL:W,loginEmail:q}),{getButtonText:tt,handleClick:et}=(0,c.crossmintPayButtonService)({onClick:m,connecting:f,paymentMethod:u,locale:B}),nt=rt=>et(rt,()=>{Z(_,P,s,g,A,u,H,j)}),N=L(U(b)),ot=(0,i.useMemo)(()=>i.default.createElement("span",{className:N.crossmintParagraph,role:"button-paragraph"},E!=null?E(f,u||"fiat"):tt(f)),[f,E,u]);return i.default.createElement(i.default.Fragment,null,!Y&&i.default.createElement("button",{className:`${N.crossmintButton} ${e||""}`,disabled:n,onClick:nt,style:{...o},tabIndex:w},i.default.createElement("img",{className:N.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.svg",alt:"Crossmint logo"}),ot))}var O=h(require("react"),1),C=require("@crossmint/client-sdk-base");function ft(t){(0,C.assertValidNFTCollectionViewProps)(t);let e=(0,C.getNFTCollectionViewSrc)(t,l);return O.createElement("iframe",{src:e,width:"100%",height:"100%",style:{flexGrow:"1",border:"none",margin:"0",padding:"0"},role:"nft-collection-view"})}var D=h(require("react"),1),x=require("@crossmint/client-sdk-base");function dt(t){(0,x.assertValidValidateNFTDetailProps)(t);let e=(0,x.getNFTDetailSrc)(t,l);return D.createElement("iframe",{src:e,width:"100%",height:"100%",style:{flexGrow:"1",border:"none",margin:"0",padding:"0"},role:"nft-details"})}var r=h(require("react"),1),S=require("@crossmint/client-sdk-base");function ht(t){let[e,n]=(0,r.useState)(0),{getIframeUrl:m,listenToEvents:o,emitQueryParams:w}=(0,S.crossmintPaymentService)(t),{listenToEvents:b}=(0,S.crossmintUiService)({environment:t.environment}),[P]=(0,r.useState)(m());return(0,r.useEffect)(()=>{let s=o(g=>{var p;return(p=t.onEvent)==null?void 0:p.call(t,g.data)});return()=>{s&&s()}},[]),(0,r.useEffect)(()=>{let s=b(g=>{let{type:p,payload:I}=g.data;switch(p){case"ui:height.changed":n(I.height);break;default:return}});return()=>{s&&s()}},[]),(0,r.useEffect)(()=>{w({recipient:t.recipient,mintConfig:t.mintConfig,locale:t.locale,whPassThroughArgs:t.whPassThroughArgs})},[t.recipient,t.mintConfig,t.locale,t.whPassThroughArgs]),r.default.createElement("iframe",{src:P,id:"iframe-crossmint-payment-element",role:"iframe-crossmint-payment-element",allow:"payment *",style:{border:"none !important",padding:"0px !important",width:"100% !important",minWidth:"100% !important",overflow:"hidden !important",display:"block !important",userSelect:"none",transform:"translate(0px) !important",opacity:"1",transition:"ease 0s, opacity 0.4s ease 0.1s",height:`${e}px`}})}var v=require("@crossmint/client-sdk-base");0&&(module.exports={CheckoutEvents,CrossmintNFTCollectionView,CrossmintNFTDetail,CrossmintPayButton,CrossmintPaymentElement,useCrossmintEvents});

package/lib/index.d.ts

@@ -1,18 +0,0 @@
-import { MouseEvent, CSSProperties } from 'react';
-import { CrossmintPayButtonProps, NFTCollectionViewProps, NFTDetailProps, PaymentElement } from '@crossmint/client-sdk-base';
-export { CheckoutEventMap, CheckoutEvents, CrossmintCheckoutEvent, CrossmintCheckoutEventUnion, useCrossmintEvents } from '@crossmint/client-sdk-base';
-
-type CrossmintPayButtonReactProps = CrossmintPayButtonProps & {
-    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-    style?: CSSProperties;
-};
-
-declare function CrossmintPayButton(buttonProps: CrossmintPayButtonReactProps): JSX.Element;
-
-declare function CrossmintNFTCollectionView(props: NFTCollectionViewProps): JSX.Element;
-
-declare function CrossmintNFTDetail(props: NFTDetailProps): JSX.Element;
-
-declare function CrossmintPaymentElement(props: PaymentElement): JSX.Element;
-
-export { CrossmintNFTCollectionView, CrossmintNFTDetail, CrossmintPayButton, CrossmintPaymentElement };

package/lib/index.js

@@ -1 +0,0 @@
-import m,{useMemo as tt}from"react";import{useState as et}from"react";import{clientNames as nt,crossmintModalService as ot,crossmintPayButtonService as rt}from"@crossmint/client-sdk-base";import{createUseStyles as J}from"react-jss";var X="#1e1e1e",P=t=>t==="light",I=t=>({buttonBgColor:P(t)?"white":X,paragraphColor:P(t)?"black":"white"}),E=J({"@global":{"@import":"url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap')"},crossmintButton:{display:"flex","flex-direction":"row","align-items":"center",padding:"0.875rem 0.875rem","font-weight":"900",transition:"opacity ease-in-out 0.25s","border-radius":"0.5rem","font-family":'"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',outline:"none",border:"none","box-shadow":"0px 8px 15px rgba(0, 0, 0, 0.1)","justify-content":"center",background:({buttonBgColor:t})=>t,"&:hover:enabled":{opacity:"0.6",cursor:"pointer"}},crossmintImg:{width:"21px",height:"21px","margin-right":"0.875rem"},crossmintParagraph:{color:({paragraphColor:t})=>t,margin:"0"}});import{useEffect as Y,useState as Z}from"react";function v(){let[t,e]=Z(!0);return Y(()=>{e(!1)},[]),{isServerSideRendering:t}}var i="1.0.1-alpha.6";function Pt(t){let{className:e,disabled:g,onClick:p,style:u,tabIndex:f,theme:d="dark",mintTo:h,emailTo:n,listingId:s,auctionId:a,showOverlay:y=!0,mintConfig:B,whPassThroughArgs:V,environment:F,paymentMethod:l,preferredSigninMethod:R,dismissOverlayOnClick:U,prepay:L,locale:b="en-US",currency:M="usd",successCallbackURL:O="",failureCallbackURL:D="",loginEmail:_="",projectId:A,getButtonText:C,...x}=t,G="clientId"in x?x.clientId:x.collectionId,[c,H]=et(!1),{isServerSideRendering:$}=v(),{connect:j}=ot({clientId:G,projectId:A,showOverlay:y,dismissOverlayOnClick:U,setConnecting:H,libVersion:i,environment:F,clientName:nt.reactUi,locale:b,currency:M,successCallbackURL:O,failureCallbackURL:D,loginEmail:_}),{getButtonText:K,handleClick:Q}=rt({onClick:p,connecting:c,paymentMethod:l,locale:b}),W=z=>Q(z,()=>{j(B,h,n,s,V,l,R,L)}),S=E(I(d)),q=tt(()=>m.createElement("span",{className:S.crossmintParagraph,role:"button-paragraph"},C!=null?C(c,l||"fiat"):K(c)),[c,C,l]);return m.createElement(m.Fragment,null,!$&&m.createElement("button",{className:`${S.crossmintButton} ${e||""}`,disabled:g,onClick:W,style:{...u},tabIndex:f},m.createElement("img",{className:S.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.svg",alt:"Crossmint logo"}),q))}import*as T from"react";import{assertValidNFTCollectionViewProps as it,getNFTCollectionViewSrc as st}from"@crossmint/client-sdk-base";function kt(t){it(t);let e=st(t,i);return T.createElement("iframe",{src:e,width:"100%",height:"100%",style:{flexGrow:"1",border:"none",margin:"0",padding:"0"},role:"nft-collection-view"})}import*as N from"react";import{assertValidValidateNFTDetailProps as at,getNFTDetailSrc as mt}from"@crossmint/client-sdk-base";function Ut(t){at(t);let e=mt(t,i);return N.createElement("iframe",{src:e,width:"100%",height:"100%",style:{flexGrow:"1",border:"none",margin:"0",padding:"0"},role:"nft-details"})}import lt,{useEffect as w,useState as k}from"react";import{crossmintPaymentService as ct,crossmintUiService as gt}from"@crossmint/client-sdk-base";function Dt(t){let[e,g]=k(0),{getIframeUrl:p,listenToEvents:u,emitQueryParams:f}=ct(t),{listenToEvents:d}=gt({environment:t.environment}),[h]=k(p());return w(()=>{let n=u(s=>{var a;return(a=t.onEvent)==null?void 0:a.call(t,s.data)});return()=>{n&&n()}},[]),w(()=>{let n=d(s=>{let{type:a,payload:y}=s.data;switch(a){case"ui:height.changed":g(y.height);break;default:return}});return()=>{n&&n()}},[]),w(()=>{f({recipient:t.recipient,mintConfig:t.mintConfig,locale:t.locale,whPassThroughArgs:t.whPassThroughArgs})},[t.recipient,t.mintConfig,t.locale,t.whPassThroughArgs]),lt.createElement("iframe",{src:h,id:"iframe-crossmint-payment-element",role:"iframe-crossmint-payment-element",allow:"payment *",style:{border:"none !important",padding:"0px !important",width:"100% !important",minWidth:"100% !important",overflow:"hidden !important",display:"block !important",userSelect:"none",transform:"translate(0px) !important",opacity:"1",transition:"ease 0s, opacity 0.4s ease 0.1s",height:`${e}px`}})}import{CheckoutEvents as Qt,useCrossmintEvents as Wt}from"@crossmint/client-sdk-base";export{Qt as CheckoutEvents,kt as CrossmintNFTCollectionView,Ut as CrossmintNFTDetail,Pt as CrossmintPayButton,Dt as CrossmintPaymentElement,Wt as useCrossmintEvents};

package/src/types.ts

@@ -1,8 +0,0 @@
-import { CSSProperties, MouseEvent } from "react";
-
-import { CrossmintPayButtonProps } from "@crossmint/client-sdk-base";
-
-export type CrossmintPayButtonReactProps = CrossmintPayButtonProps & {
-    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-    style?: CSSProperties;
-};

package/src/version.ts

@@ -1 +0,0 @@
-export const LIB_VERSION = "1.0.1-alpha.6";