@frontegg/react-hooks 7.0.0-alpha.1 → 7.0.0-alpha.3

package/node/tests/hooks.tsc-test.js

@@ -0,0 +1,339 @@
+"use strict";
+
+var _ = require("../");
+/* eslint-disable react-hooks/rules-of-hooks */
+// noinspection JSUnusedLocalSymbols
+
+/**
+ * useAuth hook typescript tests
+ */
+{
+  const {
+    isAuthenticated,
+    isLoading
+  } = (0, _.useAuth)();
+  const isLoadingDirect = (0, _.useAuth)(state => state.isLoading);
+  isLoadingDirect.valueOf();
+  const {
+    user
+  } = (0, _.useAuth)(state => ({
+    user: state.user
+  }));
+  const {
+    loginUrl
+  } = (0, _.useAuth)(state => state.routes);
+  const {
+    loadProfile,
+    setLoginState
+  } = (0, _.useAuthActions)();
+}
+
+/**
+ * useAcceptInvitationState hook typescript tests
+ */
+{
+  const {
+    step
+  } = (0, _.useAcceptInvitationState)();
+  const errorDirect = (0, _.useAcceptInvitationState)(state => state.error);
+  errorDirect == null ? void 0 : errorDirect.substring(0);
+  const {
+    acceptInvitation
+  } = (0, _.useAcceptInvitationActions)();
+}
+
+/**
+ * useActivateAccountState hook typescript tests
+ */
+{
+  const {
+    step
+  } = (0, _.useActivateAccountState)();
+  const loadingDirect = (0, _.useActivateAccountState)(state => state.loading);
+  loadingDirect.valueOf();
+  const {
+    activateAccount
+  } = (0, _.useActivateAccountActions)();
+}
+
+/**
+ * useApiTokensState hook typescript tests
+ */
+{
+  const {
+    roles
+  } = (0, _.useApiTokensState)();
+  const {
+    loaders: loadingDirect
+  } = (0, _.useApiTokensState)();
+  const m = loadingDirect.LOAD_API_TOKENS;
+  const {
+    loadUserApiTokens
+  } = (0, _.useApiTokensActions)();
+}
+
+/**
+ * useForgotPasswordState hook typescript tests
+ */
+{
+  const {
+    step
+  } = (0, _.useForgotPasswordState)();
+  const {
+    email: emailDirect
+  } = (0, _.useForgotPasswordState)();
+  emailDirect.substring(0);
+  const {
+    forgotPassword
+  } = (0, _.useForgotPasswordActions)();
+}
+
+/**
+ * useMfaState hook typescript tests
+ */
+{
+  const {
+    step
+  } = (0, _.useMfaState)();
+  const loadingDirect = (0, _.useMfaState)(state => state.loading);
+  loadingDirect.valueOf();
+  const {
+    enrollMfa
+  } = (0, _.useMfaActions)();
+}
+
+/**
+ * useLoginState hook typescript tests
+ */
+{
+  const {
+    step
+  } = (0, _.useLoginState)();
+  const {
+    loading: loadingDirect
+  } = (0, _.useLoginState)();
+  loadingDirect.valueOf();
+  const {
+    logout
+  } = (0, _.useLoginActions)();
+}
+
+/**
+ * useLoginState hook typescript tests
+ */
+{
+  const {
+    profile
+  } = (0, _.useProfileState)();
+  const {
+    loading: loadingDirect
+  } = (0, _.useProfileState)();
+  loadingDirect.valueOf();
+  const {
+    loadProfile
+  } = (0, _.useProfileActions)();
+}
+
+/**
+ * useResetPhoneNumberState hook typescript tests
+ */
+{
+  const {
+    step
+  } = (0, _.useResetPhoneNumberState)();
+  const {
+    loading: loadingDirect
+  } = (0, _.useResetPhoneNumberState)();
+  loadingDirect.valueOf();
+  const {
+    resetPhoneNumber
+  } = (0, _.useResetPhoneNumberActions)();
+}
+
+/**
+ * useRolesState hook typescript tests
+ */
+{
+  var _loadingDirect$loadRo;
+  const {
+    saving
+  } = (0, _.useRolesState)();
+  const {
+    loaders: loadingDirect
+  } = (0, _.useRolesState)();
+  loadingDirect == null ? void 0 : (_loadingDirect$loadRo = loadingDirect.loadRoles) == null ? void 0 : _loadingDirect$loadRo.valueOf();
+  const {
+    loadRolesAndPermissions
+  } = (0, _.useRolesActions)();
+}
+
+/**
+ * useSecurityPolicyState hook typescript tests
+ */
+{
+  const {
+    lockoutPolicy
+  } = (0, _.useSecurityPolicyState)();
+  const captchaPolicy = (0, _.useSecurityPolicyState)(state => state.captchaPolicy);
+  captchaPolicy.loading.valueOf();
+  const {
+    loadPublicSecurityPolicy
+  } = (0, _.useSecurityPolicyActions)();
+}
+
+/**
+ * useSessionsState hook typescript tests
+ */
+{
+  const {
+    sessions
+  } = (0, _.useSessionsState)();
+  const {
+    loading: loadingDirect
+  } = (0, _.useSessionsState)();
+  loadingDirect.valueOf();
+  const {
+    deleteUserSession
+  } = (0, _.useSessionsActions)();
+}
+
+/**
+ * useSessionsPolicyState hook typescript tests
+ */
+{
+  const {
+    configurations
+  } = (0, _.useSessionsPolicyState)();
+  const {
+    loading: loadingDirect
+  } = (0, _.useSessionsPolicyState)();
+  loadingDirect.valueOf();
+  const {
+    resetSessionsPolicyState
+  } = (0, _.useSessionsPolicyActions)();
+}
+
+/**
+ * useSSOState hook typescript tests
+ */
+{
+  const {
+    authorizationRoles
+  } = (0, _.useSSOState)();
+  const {
+    loading: loadingDirect
+  } = (0, _.useSSOState)();
+  loadingDirect.valueOf();
+  const {
+    loadSSOConfigurationsV2
+  } = (0, _.useSSOActions)();
+}
+
+/**
+ * useSignUpState hook typescript tests
+ */
+{
+  const {
+    stage
+  } = (0, _.useSignUpState)();
+  const loadingDirect = (0, _.useSignUpState)(state => state.loading);
+  loadingDirect.valueOf();
+  const {
+    setSignUpState
+  } = (0, _.useSignUpActions)();
+}
+
+/**
+ * useSocialLoginState hook typescript tests
+ */
+{
+  const {
+    socialLoginsConfig
+  } = (0, _.useSocialLoginState)();
+  const loadingDirect = (0, _.useSocialLoginState)(state => state.loading);
+  loadingDirect.valueOf();
+  const {
+    loadSocialLoginsConfiguration
+  } = (0, _.useSocialLoginActions)();
+}
+
+/**
+ * useSocialLoginState hook typescript tests
+ */
+{
+  const {
+    tenants
+  } = (0, _.useTenantsState)();
+  const {
+    loading: loadingDirect
+  } = (0, _.useTenantsState)();
+  loadingDirect.valueOf();
+  const {
+    loadTenants
+  } = (0, _.useTenantsActions)();
+}
+
+/**
+ * useVendorState hook typescript tests
+ */
+{
+  const {
+    loading
+  } = (0, _.useVendorState)();
+  const {
+    loading: isLoadingDirect
+  } = (0, _.useVendorState)();
+  isLoadingDirect.valueOf();
+  const {
+    whiteLabelMode
+  } = (0, _.useVendorState)(state => ({
+    whiteLabelMode: state.whiteLabelMode
+  }));
+  const {
+    loadVendorPublicInfo
+  } = (0, _.useVendorActions)();
+}
+
+/**
+ * useConnectivityState hook typescript tests
+ */
+{
+  const {
+    isLoading,
+    error
+  } = (0, _.useConnectivityState)();
+  const {
+    processIds
+  } = (0, _.useConnectivityState)();
+  processIds.map(id => id);
+  const {
+    email = []
+  } = (0, _.useConnectivityState)();
+  email.length;
+  const {
+    loadScope,
+    loadDataAction
+  } = (0, _.useConnectivityActions)();
+}
+
+/**
+ * useAuditsState hook typescript tests
+ */
+{
+  const {
+    auditLogsState
+  } = (0, _.useAuditsState)();
+  const {
+    columns
+  } = (0, _.useAuditsState)(state => state.auditsMetadataState);
+  const {
+    loading
+  } = (0, _.useAuditsState)(state => ({
+    loading: state.auditLogsState.loading
+  }));
+  loading.valueOf();
+  const x = columns == null ? void 0 : columns.length;
+  const {
+    loadAuditLogs
+  } = (0, _.useAuditsActions)();
+}

package/node/useSnapshot/index.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSnapshot = useSnapshot;
+var _react = _interopRequireWildcard(require("react"));
+var _proxyCompare = require("proxy-compare");
+var _shim = _interopRequireDefault(require("use-sync-external-store/shim"));
+var _reduxStore = require("@frontegg/redux-store");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/// <reference types="react/experimental" />
+
+// @ts-ignore
+
+const {
+  useSyncExternalStore
+} = _shim.default;
+const useAffectedDebugValue = (state, affected) => {
+  const pathList = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    pathList.current = (0, _proxyCompare.affectedToPathList)(state, affected, true);
+  });
+  (0, _react.useDebugValue)(pathList.current);
+};
+
+// This is required only for performance.
+// Ref: https://github.com/pmndrs/valtio/issues/519
+const targetCache = new WeakMap();
+/**
+ * useSnapshot
+ *
+ * Create a local snapshot that catches changes. This hook actually returns a wrapped snapshot in a proxy for
+ * render optimization instead of a plain object compared to `snapshot()` method.
+ * Rule of thumb: read from snapshots, mutate the source.
+ * The component will only re-render when the parts of the state you access have changed, it is render-optimized.
+ *
+ * @example A
+ * function Counter() {
+ *   const snap = useSnapshot(state)
+ *   return (
+ *     <div>
+ *       {snap.count}
+ *       <button onClick={() => ++state.count}>+1</button>
+ *     </div>
+ *   )
+ * }
+ *
+ * [Notes]
+ * Every object inside your proxy also becomes a proxy (if you don't use "ref"), so you can also use them to create
+ * the local snapshot as seen on example B.
+ *
+ * @example B
+ * function ProfileName() {
+ *   const snap = useSnapshot(state.profile)
+ *   return (
+ *     <div>
+ *       {snap.name}
+ *     </div>
+ *   )
+ * }
+ *
+ * Beware that you still can replace the child proxy with something else so it will break your snapshot. You can see
+ * above what happens with the original proxy when you replace the child proxy.
+ *
+ * > console.log(state)
+ * { profile: { name: "valtio" } }
+ * > childState = state.profile
+ * > console.log(childState)
+ * { name: "valtio" }
+ * > state.profile.name = "react"
+ * > console.log(childState)
+ * { name: "react" }
+ * > state.profile = { name: "new name" }
+ * > console.log(childState)
+ * { name: "react" }
+ * > console.log(state)
+ * { profile: { name: "new name" } }
+ *
+ * `useSnapshot()` depends on the original reference of the child proxy so if you replace it with a new one, the component
+ * that is subscribed to the old proxy won't receive new updates because it is still subscribed to the old one.
+ *
+ * In this case we recommend the example C or D. On both examples you don't need to worry with re-render,
+ * because it is render-optimized.
+ *
+ * @example C
+ * const snap = useSnapshot(state)
+ * return (
+ *   <div>
+ *     {snap.profile.name}
+ *   </div>
+ * )
+ *
+ * @example D
+ * const { profile } = useSnapshot(state)
+ * return (
+ *   <div>
+ *     {profile.name}
+ *   </div>
+ * )
+ */
+function useSnapshot(proxyObject, options) {
+  const notifyInSync = options == null ? void 0 : options.sync;
+  const lastSnapshot = (0, _react.useRef)();
+  const lastAffected = (0, _react.useRef)();
+  let inRender = true;
+  const currSnapshot = useSyncExternalStore((0, _react.useCallback)(callback => {
+    const unsub = (0, _reduxStore.subscribe)(proxyObject, callback, notifyInSync);
+    callback(); // Note: do we really need this?
+    return unsub;
+  }, [proxyObject, notifyInSync]), () => {
+    const nextSnapshot = (0, _reduxStore.snapshot)(proxyObject, _react.default.use);
+    try {
+      if (!inRender && lastSnapshot.current && lastAffected.current && !(0, _proxyCompare.isChanged)(lastSnapshot.current, nextSnapshot, lastAffected.current, new WeakMap())) {
+        // not changed
+        return lastSnapshot.current;
+      }
+    } catch (e) {
+      // ignore if a promise or something is thrown
+    }
+    return nextSnapshot;
+  }, () => (0, _reduxStore.snapshot)(proxyObject, _react.default.use));
+  inRender = false;
+  const currAffected = new WeakMap();
+  (0, _react.useEffect)(() => {
+    lastSnapshot.current = currSnapshot;
+    lastAffected.current = currAffected;
+  });
+  // if (import.meta.env?.MODE !== 'production') {
+  //   // eslint-disable-next-line react-hooks/rules-of-hooks
+  //   useAffectedDebugValue(currSnapshot, currAffected)
+  // }
+  const proxyCache = (0, _react.useMemo)(() => new WeakMap(), []); // per-hook proxyCache
+  return (0, _proxyCompare.createProxy)(currSnapshot, currAffected, proxyCache, targetCache);
+}

package/node/vendor/hooks.js

@@ -5,16 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useVendorActions = void 0;
 exports.useVendorState = useVendorState;
-var _react = require("react");
-var _reduxStore = require("@frontegg/redux-store");
-var _reactRedux = require("react-redux");
 var _FronteggStoreContext = require("../FronteggStoreContext");
+var _useSnapshot = require("../useSnapshot");
 const defaultMapper = state => state;
+// @deprecated use useVendorState() instead
 function useVendorState(stateMapper = defaultMapper) {
-  return (0, _FronteggStoreContext.useSelector)(state => stateMapper(state[_reduxStore.vendorStoreName]), _reactRedux.shallowEqual);
+  const state = (0, _FronteggStoreContext.useStore)().store.vendor;
+  return stateMapper((0, _useSnapshot.useSnapshot)(state));
 }
 const useVendorActions = () => {
-  const dispatch = (0, _FronteggStoreContext.useDispatch)();
-  return (0, _react.useMemo)(() => (0, _reduxStore.bindActionCreators)(_reduxStore.vendorActions, dispatch), [_reduxStore.vendorActions]);
+  return (0, _FronteggStoreContext.useStore)().stateActions.vendor;
 };
 exports.useVendorActions = useVendorActions;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@frontegg/react-hooks",
-  "version": "7.0.0-alpha.1",
+  "version": "7.0.0-alpha.3",
   "main": "./node/index.js",
   "license": "MIT",
   "author": "Frontegg LTD",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@frontegg/redux-store": "7.0.0-alpha.1",
-    "@frontegg/types": "7.0.0-alpha.1",
+    "@frontegg/redux-store": "7.0.0-alpha.3",
+    "@frontegg/types": "7.0.0-alpha.3",
     "@types/react": "*",
     "get-value": "^3.0.1",
     "react-redux": "^7.x"

package/subscriptions/hooks.d.ts

@@ -1,21 +1,43 @@
-import { CheckoutActions, CheckoutState, PaymentProviderConfigActions, PaymentProviderConfigState, PlansActions, PlansState, StripeActions, StripeState, SubscriptionActions, SubscriptionState, VendorPublicConfigurationActions, VendorPublicConfigurationState } from '@frontegg/redux-store';
+import { CheckoutActions, CheckoutState, PaymentProviderConfigActions, PaymentProviderConfigState, PlansActions, PlansState, StripeActions, StripeState, SubscriptionState, BillingInformationState, InvoicesState, PaymentMethodState, BillingStateActions, VendorPublicConfigurationState, VendorPublicConfigurationActions } from '@frontegg/redux-store';
 export declare const usePaymentProvider: () => PaymentProviderConfigState;
 export declare const usePaymentProviderActions: () => PaymentProviderConfigActions;
 export declare const usePlans: () => PlansState;
 export declare const usePlansActions: () => PlansActions;
 export declare const useCheckout: () => CheckoutState;
 export declare const useCheckoutActions: () => CheckoutActions;
-export declare const useBillingInformation: () => import("@frontegg/redux-store").BillingInformationState;
-export declare const useBillingInformationActions: () => import("@frontegg/redux-store").BillingInformationActions;
-export declare const usePaymentMethod: () => import("@frontegg/redux-store").PaymentMethodState;
-export declare const usePaymentMethodActions: () => import("@frontegg/redux-store").PaymentMethodActions;
-export declare const useInvoices: () => import("@frontegg/redux-store").InvoicesState;
-export declare const useInvoicesActions: () => import("@frontegg/redux-store").InvoicesActions;
-export declare const useStripeState: () => StripeState;
-export declare const useStripeActions: () => StripeActions;
+export declare const useBillingInformation: () => BillingInformationState;
+export declare const useBillingInformationActions: () => {
+    setBillingInformationState: (state: Partial<BillingInformationState>) => void;
+    resetBillingInformationState: () => void;
+    loadSummaries: (tenantId: string, forceActive?: boolean | undefined) => Promise<void>;
+    loadBillingInformation: (forceActive?: boolean | undefined) => Promise<void>;
+};
+export declare const usePaymentMethod: () => PaymentMethodState;
+export declare const usePaymentMethodActions: () => {
+    setBillingPaymentMethodState: (state: Partial<{}>) => void;
+    resetBillingPaymentMethodState: () => void;
+    loadPaymentMethod: () => Promise<void>;
+    submitPaymentMethod: () => Promise<void>;
+    submitPaymentMethodError: (error: string) => Promise<void>;
+    submitPaymentMethodSuccess: () => Promise<void>;
+    updatePaymentMethodBillingDetails: (payload: import("@frontegg/redux-store").WithCallback<import("@frontegg/redux-store").WithId<import("@frontegg/rest-api").ISubscriptionUpdatePaymentMethodBillingDetails>, boolean>) => Promise<void>;
+};
+export declare const useInvoices: () => InvoicesState;
+export declare const useInvoicesActions: () => {
+    setBillingInvoiceState: (state: Partial<InvoicesState>) => void;
+    resetBillingInvoiceState: () => void;
+    loadInvoices: () => Promise<void>;
+    loadBillingInvoices: () => Promise<void>;
+    downloadInvoice: (payload: import("@frontegg/redux-store").DownloadInvoiceActionPayload) => Promise<void>;
+    downloadBillingInvoice: (payload: import("@frontegg/redux-store").DownloadInvoiceActionPayload) => Promise<void>;
+};
 export declare const useSubscriptionCancellation: () => SubscriptionState['cancellation'];
 export declare const useSubscriptionRenewal: () => SubscriptionState['renewal'];
 export declare const useSubscription: () => SubscriptionState;
-export declare const useSubscriptionActions: () => SubscriptionActions;
+export declare const useSubscriptionActions: () => BillingStateActions['subscription'] & {
+    load: () => void;
+};
+export declare const useStripeState: () => StripeState;
+export declare const useStripeActions: () => StripeActions;
 export declare const useVendorPublicConfig: () => VendorPublicConfigurationState;
 export declare const useVendorPublicConfigActions: () => VendorPublicConfigurationActions;