zh-web-sdk 2.11.2 → 2.12.1

package/dist/redux/reducers/index.d.ts

@@ -13,5 +13,6 @@ declare const rootReducer: import("redux").Reducer<import("redux").CombinedState
     "crypto-account-link": import("./crypto-account-link").ICryptoAccountLinkState;
     "crypto-account-link-payouts": import("./crypto-account-link-payouts").ICryptoAccountLinkPayoutsState;
     payouts: import("./payouts").IPayoutsState;
+    pay: import("./pay").IPayState;
 }>, import("./crypto-withdrawals").ICryptoWithdrawalsAction | import("./onboarding").IOnboardingAction | import("./crypto-buy").ICryptoBuyAction>;
 export default rootReducer;

package/dist/redux/reducers/pay.d.ts

@@ -0,0 +1,13 @@
+export interface IPayState {
+    jwt: string;
+    isAppLoaded: boolean;
+    isAppActive: boolean;
+}
+export interface IPayAction {
+    type: string;
+    jwt?: string;
+    isAppActive?: boolean;
+    isAppLoaded?: boolean;
+}
+declare const PayReducer: (state: IPayState | undefined, action: IPayAction) => IPayState;
+export default PayReducer;

package/dist/redux/store/index.d.ts

@@ -15,6 +15,7 @@ declare const store: import("redux").Store<import("redux").EmptyObject & {
     "crypto-account-link": import("../reducers/crypto-account-link").ICryptoAccountLinkState;
     "crypto-account-link-payouts": import("../reducers/crypto-account-link-payouts").ICryptoAccountLinkPayoutsState;
     payouts: import("../reducers/payouts").IPayoutsState;
+    pay: import("../reducers/pay").IPayState;
 }, import("../reducers/crypto-withdrawals").ICryptoWithdrawalsAction | import("../reducers/onboarding").IOnboardingAction | import("../reducers/crypto-buy").ICryptoBuyAction>;
 export default store;
 export type RootState = ReturnType<typeof rootReducer>;

package/dist/styles.d.ts

@@ -3,6 +3,10 @@ export declare const screenSizes: {
     id: string;
     size: number;
 }[];
+/**
+ * When the width is smaller than
+ *
+ */
 export declare const minWidthMatcher: () => string;
 export declare const containerStyle: CSSProperties;
 export declare const containerMediaStyles: {

package/dist/types.d.ts

@@ -103,6 +103,12 @@ export interface IInitializeParameters {
      * to perform payouts.
      */
     payoutsJWT?: string;
+    /**
+     * payJWT is the JWT that you received from
+     * the ZeroHash HTTP API and have specific permissions
+     * to perform pay.
+     */
+    payJWT?: string;
     /**
      * zeroHashAppsURL is the base URL for all our Apps.
      * It defaults to https://web-sdk.zerohash.com/ and will
@@ -352,7 +358,24 @@ export declare enum IncomingMessageType {
     /**
      * PayoutsFailed is received when the Payouts flow has failed.
      */
-    PayoutsFailed = "PAYOUTS_FAILED"
+    PayoutsFailed = "PAYOUTS_FAILED",
+    /**
+     * PayAppLoaded is received when the Pay app has initialized.
+     */
+    PayAppLoaded = "PAY_APP_LOADED",
+    /**
+     * PayCloseButtonClicked is received when the close button
+     * has been clicked in the Pay app
+     */
+    PayCloseButtonClicked = "PAY_CLOSE_BUTTON_CLICKED",
+    /**
+     * PayCompleted is received when the Pay flow has completed successfully.
+     */
+    PayCompleted = "PAY_COMPLETED",
+    /**
+     * PayFailed is received when the Pay flow has failed.
+     */
+    PayFailed = "PAY_FAILED"
 }
 /**
  * IncomingMessage defines the structure of an incoming
@@ -398,7 +421,8 @@ export declare enum AppIdentifier {
     PROFILE = "profile",
     CRYPTO_ACCOUNT_LINK = "crypto-account-link",
     CRYPTO_ACCOUNT_LINK_PAYOUTS = "crypto-account-link-payouts",
-    PAYOUTS = "payouts"
+    PAYOUTS = "payouts",
+    PAY = "pay"
 }
 /**
 * Map that maps the app AppIdentifier to the redux action prefix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zh-web-sdk",
-  "version": "2.11.2",
+  "version": "2.12.1",
   "private": false,
   "description": "ZeroHash Web SDK",
   "homepage": "https://github.com/seedcx/zh-web-sdk",

package/src/iframe-container/AppContainer.tsx

@@ -123,6 +123,12 @@ interface AppContainerMappedProps {
     jwt: string;
     filters?: Filters;
   };
+  [AppIdentifier.PAY]: {
+    isAppActive: boolean;
+    isAppLoaded: boolean;
+    jwt: string;
+    filters?: Filters;
+  };
 }
 
 const appLoadTime = Date.now();
@@ -142,6 +148,7 @@ const mapAppToTitle = {
   [AppIdentifier.CRYPTO_ACCOUNT_LINK]: "Crypto Account Link",
   [AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS]: "Crypto Account Link Payouts",
   [AppIdentifier.PAYOUTS]: "Payouts",
+  [AppIdentifier.PAY]: "Pay",
 };
 
 const AppContainer = ({

package/src/iframe-container/__tests__/AppContainer.test.tsx

@@ -18,6 +18,7 @@ describe('AppContainer', () => {
     [AppIdentifier.CRYPTO_ACCOUNT_LINK, "Crypto Account Link"],
     [AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS, "Crypto Account Link Payouts"],
     [AppIdentifier.PAYOUTS, "Payouts"],
+    [AppIdentifier.PAY, "Pay"],
   ])("should render AppContainer correctly for %s", async (appIdentifier, title) => {
     renderWithProviders(
       <AppContainer

package/src/index.tsx

@@ -176,6 +176,19 @@ const appsMessageHandlers: {
   [IncomingMessageType.PayoutsFailed]: () => {
     appFailed(AppIdentifier.PAYOUTS);
   },
+  // Pay message handlers
+  [IncomingMessageType.PayAppLoaded]: () => {
+    appLoaded(AppIdentifier.PAY);
+  },
+  [IncomingMessageType.PayCloseButtonClicked]: () => {
+    closeModal(AppIdentifier.PAY);
+  },
+  [IncomingMessageType.PayCompleted]: () => {
+    appCompleted(AppIdentifier.PAY);
+  },
+  [IncomingMessageType.PayFailed]: () => {
+    appFailed(AppIdentifier.PAY);
+  },
 };
 
 /**
@@ -219,6 +232,7 @@ export class ZeroHashSDK implements IZeroHashSDK {
     [AppIdentifier.CRYPTO_ACCOUNT_LINK, false],
     [AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS, false],
     [AppIdentifier.PAYOUTS, false],
+    [AppIdentifier.PAY, false],
   ]);
 
   /**
@@ -240,6 +254,7 @@ export class ZeroHashSDK implements IZeroHashSDK {
                 cryptoAccountLinkJWT,
                 cryptoAccountLinkPayoutsJWT,
                 payoutsJWT,
+                payJWT,
                 zeroHashAppsURL,
               }: IInitializeParameters) {
     // The || is for backwards compatibility
@@ -319,6 +334,12 @@ export class ZeroHashSDK implements IZeroHashSDK {
         appIdentifier: AppIdentifier.PAYOUTS,
       });
     }
+    if (payJWT) {
+      this.setJWT({
+        jwt: payJWT,
+        appIdentifier: AppIdentifier.PAY,
+      });
+    }
   }
 
   /**

package/src/redux/reducers/index.ts

@@ -10,6 +10,7 @@ import profileReducer from "./profile";
 import cryptoAccountLinkReducer from "./crypto-account-link";
 import cryptoAccountLinkPayoutsReducer from "./crypto-account-link-payouts";
 import payoutsReducer from "./payouts";
+import payReducer from "./pay";
 
 const rootReducer = combineReducers({
   ["crypto-withdrawals"]: cryptoWithdrawalsReducer,
@@ -26,6 +27,7 @@ const rootReducer = combineReducers({
   ["crypto-account-link"]: cryptoAccountLinkReducer,
   ["crypto-account-link-payouts"]: cryptoAccountLinkPayoutsReducer,
   ["payouts"]: payoutsReducer,
+  ["pay"]: payReducer,
 });
 
 export default rootReducer;

package/src/redux/reducers/pay.ts

@@ -0,0 +1,64 @@
+import { AppIdentifier } from "../../types";
+import { appIdentifierToActionPrefixMap } from "../../types";
+import {
+  ACTION_SET_JWT,
+  ACTION_SET_MODAL_STATE,
+  ACTION_APP_LOADED
+} from "./constants";
+
+export interface IPayState {
+  jwt: string;
+  isAppLoaded: boolean;
+  isAppActive: boolean;
+}
+
+export interface IPayAction {
+  type: string;
+  jwt?: string;
+  isAppActive?: boolean;
+  isAppLoaded?: boolean;
+}
+
+const INITIAL_STATE: IPayState = {
+  jwt: "",
+  isAppActive: false,
+  isAppLoaded: false
+}
+
+const applySetIsAppActive = (state: IPayState, action: IPayAction) : IPayState => {
+  return {
+      ...state,
+      isAppActive: !!action.isAppActive,
+  }
+}
+
+const applySetSendJWTToApp = (state: IPayState, action: IPayAction) : IPayState => {
+  return {
+      ...state,
+      isAppLoaded: !!action.isAppLoaded,
+  }
+}
+
+const applySetJWT = (state: IPayState, action: IPayAction) : IPayState => {
+  return {
+      ...state,
+      jwt: action.jwt as string,
+  }
+}
+
+const reducerMap: { [actionType: string]: (state: IPayState, action: IPayAction) => IPayState } = {
+  // Pay reducer
+  [`${appIdentifierToActionPrefixMap.get(AppIdentifier.PAY)}${ACTION_SET_JWT}`]: applySetJWT,
+  [`${appIdentifierToActionPrefixMap.get(AppIdentifier.PAY)}${ACTION_SET_MODAL_STATE}`]: applySetIsAppActive,
+  [`${appIdentifierToActionPrefixMap.get(AppIdentifier.PAY)}${ACTION_APP_LOADED}`]: applySetSendJWTToApp,
+};
+
+const PayReducer = (state = INITIAL_STATE, action: IPayAction) => {
+  if (!!action.type && !!reducerMap[action.type]) {
+      return reducerMap[action.type](state, action);
+  } else {
+      return state;
+  }
+}
+
+export default PayReducer;

package/src/styles.ts

@@ -1,14 +1,24 @@
 import { CSSProperties } from "react";
 
-const MTE_SM = 540;
+const MTE_SM = 480;
+const MTE_MD = 720;
+const modalBorderRadius = 24
 
 export const screenSizes: { id: string, size: number }[] = [
     {
         id: "MTE_SM",
         size: MTE_SM,
-    }
+    },
+    {
+        id: "MTE_MD",
+        size: MTE_MD,
+    },
 ]
 
+/**
+ * When the width is smaller than 
+ * 
+ */
 export const minWidthMatcher = (): string => {
     for (let i = 0; i < screenSizes.length; i++) {
         const { id, size } = screenSizes[i];
@@ -24,18 +34,20 @@ export const containerStyle: CSSProperties = {
     paddingLeft: 0,
     marginRight: "auto",
     marginLeft: "auto",
-    maxHeight: 882,
+    maxHeight: 812
 }
 
 export const containerMediaStyles: { [id: string]: CSSProperties } = {
     MTE_SM: {
-        width: 540
+        width: 480
+    },
+    MTE_MD: {
+        width: 720
     },
     ANY: {
         width: "100%",
         height: "100%",
         maxWidth: "100%",
-        borderRadius: 0,
         maxHeight: "100%"
     },
 }
@@ -51,15 +63,15 @@ export const appWrapperStyle: CSSProperties = {
     height: CSS.supports("height: 100dvh") ? "100dvh" : window.innerHeight + "px",
     maxHeight: CSS.supports("height: 100dvh") ? "100dvh" : window.innerHeight + "px",
     background: "rgba(0,0,0,0.5)",
-    cursor: "pointer",
+    cursor: "pointer"
 }
 
 export const modalStyle: CSSProperties = {
     padding: 0,
-    borderRadius: 5,
     backgroundColor: "#FFF",
     height: "calc(100% - 100px)",
     maxWidth: "calc(100% - 30px)",
+    borderRadius: modalBorderRadius
 }
 
 export const iframeWrapperStyle: CSSProperties = {
@@ -76,5 +88,5 @@ export const iframeStyle: CSSProperties = {
     margin: 0,
     padding: 0,
     overflow: "hidden",
-    borderRadius: "0 0 15px 15px"
+    borderRadius: modalBorderRadius
 };

package/src/types.ts

@@ -106,6 +106,12 @@ export interface IInitializeParameters {
    * to perform payouts.
    */
   payoutsJWT?: string
+  /**
+   * payJWT is the JWT that you received from
+   * the ZeroHash HTTP API and have specific permissions 
+   * to perform pay.
+   */
+  payJWT?: string
   /**
    * zeroHashAppsURL is the base URL for all our Apps.
    * It defaults to https://web-sdk.zerohash.com/ and will
@@ -359,6 +365,23 @@ export enum IncomingMessageType {
    * PayoutsFailed is received when the Payouts flow has failed.
    */
   PayoutsFailed = "PAYOUTS_FAILED",
+  /**
+   * PayAppLoaded is received when the Pay app has initialized.
+   */
+  PayAppLoaded = "PAY_APP_LOADED",
+  /**
+   * PayCloseButtonClicked is received when the close button
+   * has been clicked in the Pay app
+   */
+  PayCloseButtonClicked = "PAY_CLOSE_BUTTON_CLICKED",
+  /**
+   * PayCompleted is received when the Pay flow has completed successfully.
+   */
+  PayCompleted = "PAY_COMPLETED",
+  /**
+   * PayFailed is received when the Pay flow has failed.
+   */
+  PayFailed = "PAY_FAILED",
 }
 
 /**
@@ -408,7 +431,8 @@ export enum AppIdentifier {
   PROFILE = "profile",
   CRYPTO_ACCOUNT_LINK = "crypto-account-link",
   CRYPTO_ACCOUNT_LINK_PAYOUTS = "crypto-account-link-payouts",
-  PAYOUTS = "payouts"
+  PAYOUTS = "payouts",
+  PAY = "pay"
 }
 
 /**
@@ -430,7 +454,8 @@ export const appIdentifierToActionPrefixMap = new Map(
     [AppIdentifier.PROFILE, "PROFILE_"],
     [AppIdentifier.CRYPTO_ACCOUNT_LINK, "CRYPTO_ACCOUNT_LINK_"],
     [AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS, "CRYPTO_ACCOUNT_LINK_PAYOUTS_"],
-    [AppIdentifier.PAYOUTS, "PAYOUTS_"]
+    [AppIdentifier.PAYOUTS, "PAYOUTS_"],
+    [AppIdentifier.PAY, "PAY_"]
   ])
 
 export interface ISetJWTParameters {