@integry/sdk 4.5.2 → 4.5.4

package/src/features/common/AuthSelectorDropdown/index.ts

@@ -0,0 +1,704 @@
+import { html, Component } from 'htm/preact';
+import { connect } from 'unistore/preact';
+import cx from 'classnames';
+
+import { Loader } from '@/components/Loader';
+import { IntegryAPI } from '@/modules/api';
+import { Radio } from '@/components/RadioGroup/Radio';
+import { ErrorMessage } from '@/components/ErrorMessage';
+import { Hint } from '@/components/Tooltip';
+import { Authorization, StoreType } from '@/types/store';
+import { actionFunctions } from '@/store';
+import isBrowser from '@/utils/isBrowser';
+import AppContext from '@/contexts/AppContext';
+import { Modal } from '@/components/Modal';
+
+import { openPopupWindow } from '@/utils/popup';
+import { AuthData, isAuthMessage } from '@/utils/isAuthMessage';
+import { App } from '@/interfaces';
+import styles from './styles.module.scss';
+
+interface AuthSelectorPropsType extends StoreType {
+  actionId: number;
+  appId: number;
+  appData: any;
+  apiHandler: IntegryAPI;
+  showErrors?: boolean;
+  onAuthSelected?: (
+    authId: number | null,
+    isVerified: boolean,
+    override: boolean,
+  ) => void;
+  onAuthDeleted?: (authId: number | null, appId: number | null) => void;
+  closePopup: () => void;
+  onNextButtonClick?: () => void;
+  showPopup: boolean;
+  authWindowSwitch?: boolean;
+  autoNextOnAuth?: boolean;
+  autoSelectAuth?: boolean;
+  onNewAccountAdded?: (authId: number) => void;
+  selectedAuth: any;
+  authorizations: any[];
+  authPopoverRef: any;
+  authPopoverCtaRef: any;
+  setShowAuthPopup?: (state: boolean) => void;
+}
+
+interface AuthSelectorStateType {
+  isLoading: boolean;
+  fetched: boolean;
+  willDeleteAuthWithIndex: number | null;
+}
+
+const Confirmation = (props: { callback(shouldDelete: boolean): void }) => {
+  const { callback } = props;
+  return html`
+    <${Modal} isOpen=${true} className=${'authConfirmation'}>
+      <div class=${styles.confirmation}>
+        <div class=${styles.confirmationHeading}>
+          <svg
+            width="22"
+            height="22"
+            viewBox="0 0 22 22"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10.9969 1.63429C11.1625 1.63429 11.5735 1.68457 11.8004 2.13714L20.2953 19.0206C20.5039 19.4354 20.3444 19.7937 20.2647 19.9257C20.1849 20.0577 19.9519 20.372 19.4918 20.372H2.50202C2.04201 20.372 1.80894 20.064 1.7292 19.9257C1.64946 19.7937 1.48999 19.4354 1.69853 19.0206L10.1934 2.13714C10.4204 1.68457 10.8313 1.63429 10.9969 1.63429ZM10.9969 0C10.1198 0 9.24275 0.458857 8.7766 1.38286L0.281691 18.2663C-0.577 19.9697 0.631301 22 2.50202 22H19.498C21.3687 22 22.577 19.9697 21.7183 18.2663L13.2173 1.38286C12.7511 0.458857 11.874 0 10.9969 0Z"
+              fill="#F05C42"
+            />
+            <path
+              d="M10.9941 15.6943C10.6997 15.6943 10.4544 15.8012 10.252 16.0086C10.0496 16.2161 9.94531 16.4675 9.94531 16.7629C9.94531 17.1023 10.0496 17.3663 10.2643 17.5549C10.4789 17.7435 10.7243 17.8378 11.0064 17.8378C11.2886 17.8378 11.5278 17.7435 11.7424 17.5486C11.951 17.36 12.0552 17.096 12.0552 16.7629C12.0552 16.4675 11.951 16.2161 11.7424 16.0086C11.54 15.7949 11.2886 15.6943 10.9941 15.6943Z"
+              fill="#F05C42"
+            />
+            <path
+              d="M11.0074 7.65039C10.4308 7.65039 9.96467 8.14068 9.98921 8.73153L10.167 13.6023C10.1793 14.0675 10.5534 14.4383 11.0073 14.4383C11.4612 14.4383 11.8353 14.0675 11.8476 13.6023L12.0317 8.73153C12.0501 8.14068 11.5839 7.65039 11.0074 7.65039Z"
+              fill="#F05C42"
+            />
+          </svg>
+          Disconnect account
+        </div>
+        <div class=${styles.confirmationDescription}>
+          <p>
+            Multiple integrations are configured with this account. They will
+            all stop working if you disconnect it.
+          </p>
+          <p>Are you sure?</p>
+        </div>
+        <div class=${styles.confirmationActions}>
+          <button
+            class=${styles.secondaryCTA}
+            type="button"
+            onclick=${(e: any) => {
+              e.stopPropagation();
+              callback(false);
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            class=${styles.primaryCTA}
+            type="button"
+            onclick=${(e: any) => {
+              e.stopPropagation();
+              callback(true);
+            }}
+          >
+            Disconnect
+          </button>
+        </div>
+      </div>
+    <//>
+  `;
+  return html`
+    <div class=${styles.confirmation}>
+      <div class=${styles.text}>Are you sure?</div>
+      <button onclick=${() => callback(true)}>Yes</button>
+      <button onclick=${() => callback(false)}>No</button>
+    </div>
+  `;
+};
+
+const Resend = () => html`
+  <svg
+    class=${styles.resend}
+    width="13"
+    height="15"
+    viewBox="0 0 13 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.8403 5.34L10.1453 6.345C10.5053 6.96 10.7003 7.68 10.7003 8.445C10.7003 10.77 8.81031 12.645 6.50031 12.645C4.19031 12.645 2.30031 10.755 2.30031 8.445C2.30031 6.135 4.19031 4.245 6.50031 4.245V6.15L11.1053 3.27L6.50031 0.375V2.28C3.09531 2.28 0.320312 5.055 0.320312 8.46C0.320313 11.85 3.09531 14.625 6.50031 14.625C9.90531 14.625 12.6803 11.85 12.6803 8.445C12.6803 7.32 12.3653 6.255 11.8403 5.34Z"
+      fill="#8D8D8D"
+    />
+  </svg>
+`;
+
+const AuthorizationRow = (props: {
+  id: string;
+  value: string;
+  isChecked?: boolean;
+  isLoading: boolean;
+  willDelete?: boolean;
+  isDeleting?: boolean;
+  error?: string;
+  status: 'VERIFYING' | 'CONNECTED' | 'ERROR' | 'IDLE' | null;
+  handleChange?: (id: string) => void;
+  handleReverify?: () => void;
+  handleDelete?: (shouldDelete: boolean) => void;
+  handleWillDelete?: () => void;
+  isReadOnly?: boolean;
+  isVerified?: boolean;
+}) => {
+  const {
+    id,
+    value,
+    isChecked,
+    status = 'IDLE',
+    isDeleting = false,
+    willDelete = false,
+    handleChange,
+    handleReverify,
+    handleDelete = () => null,
+    handleWillDelete = () => null,
+    error,
+    isReadOnly,
+    isVerified = true,
+  } = props;
+  return html`
+    <${Hint}
+      dismissOnClick=${false}
+      position="top"
+      deltaY=${0}
+      className=${isChecked ? cx(styles.row, styles.rowSelected) : styles.row}
+    >
+      <div
+        class=${styles.checkboxRow}
+        onClick=${() => {
+          if (handleChange) {
+            handleChange(id);
+          }
+        }}
+      >
+        ${isReadOnly &&
+        html`<span
+          class=${styles.readonlyHint}
+          data-hint=${isReadOnly ? `Cannot modify user selection` : ''}
+        ></span>`}
+        <div class=${`${styles.radio} ${isReadOnly ? styles.readonly : ''}`}>
+          ${false &&
+          html` <${Radio}
+            id=${id}
+            value=${value}
+            isChecked=${isChecked}
+            onChange=${handleChange}
+            isDisabled=${isReadOnly}
+            className="authRadio"
+          />`}
+          ${true && html`<p class=${styles.rowLabel}>${value}</p>`}
+        </div>
+        ${!(willDelete && !isDeleting) &&
+        html` <div
+          class=${`${styles.statusWrap} ${isReadOnly ? styles.readonly : ''}`}
+        >
+          <div class=${styles.status}>
+            ${isReadOnly && false
+              ? html`
+                  ${isChecked &&
+                  html`<div>
+                    <div class=${styles.statusGreen} />
+                    Connected
+                  </div>`}
+                `
+              : html`
+                  <div>
+                    ${status === 'VERIFYING' &&
+                    !isDeleting &&
+                    false &&
+                    html`<div class=${styles.statusOrange} />
+                      Verifying <${Loader} /> `}
+                  </div>
+                  <div>
+                    ${status === 'CONNECTED' &&
+                    false &&
+                    !error &&
+                    !isDeleting &&
+                    html`<div class=${styles.statusGreen} />
+                      Connected`}
+                  </div>
+                  <div>
+                    ${status === 'ERROR' &&
+                    false &&
+                    !isDeleting &&
+                    html`<div class=${styles.statusRed} />
+                      Failed
+                      ${!isReadOnly &&
+                      html`<div onclick=${handleReverify}>
+                        <${Resend} />
+                      </div>`} `}
+                  </div>
+                  ${(isDeleting || status === 'VERIFYING') &&
+                  html`<${Loader} />`}
+                  ${error &&
+                  !isDeleting &&
+                  !(status === 'VERIFYING') &&
+                  html`<div class=${styles.error}>${error}</div>`}
+                  ${status !== 'VERIFYING' &&
+                  status !== 'ERROR' &&
+                  status !== 'CONNECTED' &&
+                  !isDeleting &&
+                  !error &&
+                  false &&
+                  html`<div class=${styles.verify} onclick=${handleReverify}>
+                    Verify
+                  </div>`}
+                `}
+          </div>
+        </div>`}
+        ${willDelete &&
+        !isDeleting &&
+        html` <${Confirmation} callback=${handleDelete} /> `}
+        ${!(status === 'VERIFYING' || isDeleting || willDelete) &&
+        !isReadOnly &&
+        html`
+          <div
+            class=${styles.deleteIcon}
+            onclick=${isVerified ? handleWillDelete : handleDelete}
+          >
+            <svg
+              width="13"
+              height="13"
+              viewBox="0 0 13 13"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0.866211 3.46654H12.1329"
+                stroke="#F05C42"
+                stroke-width="1.4"
+              />
+              <path
+                d="M9.95091 4.7666V5.34438L9.37313 11.6999H3.59536L3.01758 5.34438V4.7666"
+                stroke="#F05C42"
+                stroke-width="1.4"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M4.75098 3.03314V1.87758C4.75098 1.55848 5.00966 1.2998 5.32875 1.2998H7.63987C7.95896 1.2998 8.21764 1.55848 8.21764 1.87758V3.03314"
+                stroke="#F05C42"
+                stroke-width="1.4"
+              />
+            </svg>
+          </div>
+        `}
+      </div>
+    <//>
+  `;
+};
+
+class AuthSelectorDropdown extends Component<
+  AuthSelectorPropsType,
+  AuthSelectorStateType
+> {
+  static contextType = AppContext;
+
+  constructor(props: AuthSelectorPropsType) {
+    super(props);
+    this.state = {
+      isLoading: false,
+      fetched: false,
+      willDeleteAuthWithIndex: null,
+    };
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+  }
+
+  componentDidMount() {
+    if (isBrowser())
+      window.addEventListener('message', this.onAuthResponseReceived);
+
+    // in preview mode, auto-verify the auth we pass
+    const { appId, authMapping, autoSelectAuth } = this.props;
+    const { selectedAuth, authorizations } = this.props;
+    // const auth = selectedAuth.id;
+    // const authIndex = authorizations.findIndex(
+    //   (el) => Number(el.authorizationId) === Number(auth),
+    // );
+    // const authStatus = this.getAuthStatus(
+    //   authMapping[appId].authorizations[authIndex],
+    // );
+    // // auth is selected but is in idle state
+    // if (authMapping[appId].selectedAuthId && authStatus === 'IDLE') {
+    //   this.verifyAuth(authIndex, true);
+    // } else if (
+    //   !authMapping[appId].selectedAuthId &&
+    //   autoSelectAuth &&
+    //   authMapping[appId].authorizations.length
+    // ) {
+    //   this.verifyAuth(0, true);
+    // }
+
+    // this auto opens the auth window if no accounts are connected
+    // if (authMapping[appId].authorizations.length === 0)
+    //   this.openAuthWindow();
+    document.addEventListener('mousedown', this.handleClickOutside);
+  }
+
+  componentDidUpdate(prevProps: AuthSelectorPropsType) {
+    const { actionId, authMapping, authWindowSwitch } = this.props;
+    // const step = authMapping[actionId];
+    // const authId = step.selectedAuthId;
+
+    // const authIndex = authMapping[actionId].authorizations.findIndex(
+    //   (el) => el.authorizationId === authId,
+    // );
+
+    // const auth = authMapping[actionId].authorizations[authIndex];
+
+    // const authStatus = this.getAuthStatus(
+    //   authMapping[actionId].authorizations[authIndex],
+    // );
+
+    // if (
+    //   step.authorizations.length ===
+    //   prevProps.authMapping[actionId].authorizations.length + 1
+    // ) {
+    //   // auth was added so we verify
+    //   this.verifyAuth(step.authorizations.length - 1);
+    // }
+    // // verify auth in edit mode when step changes
+    // if (
+    //   authStatus === 'IDLE' &&
+    //   !auth.isVerifying &&
+    //   !auth.isVerified &&
+    //   !this.state.isLoading
+    // ) {
+    //   this.verifyAuth(authIndex, true);
+    // }
+
+    // if (authWindowSwitch !== prevProps.authWindowSwitch) {
+    //   this.openAuthWindow();
+    // }
+  }
+
+  componentWillUnmount() {
+    if (isBrowser())
+      window.removeEventListener('message', this.onAuthResponseReceived);
+    document.removeEventListener('mousedown', this.handleClickOutside);
+  }
+
+  handleClickOutside(event: MouseEvent) {
+    if (
+      this.props.authPopoverRef &&
+      this.props.authPopoverRef.current &&
+      !this.props.authPopoverRef.current.contains(event.target) &&
+      this.props.authPopoverCtaRef.current &&
+      !this.props.authPopoverCtaRef.current.contains(event.target)
+    ) {
+      if (this.props.setShowAuthPopup) {
+        this.props.setShowAuthPopup(false);
+      }
+    }
+  }
+
+  private verifyAuth = (authIndex: number, override?: boolean) => {
+    const { appId } = this.props;
+    const auth = this.props.authorizations[authIndex];
+
+    if (!auth) return;
+
+    // const isAuthVerifiedInPreviewMode =
+    //   !this.props.genericData.isPreviewMode && auth.isVerified;
+    // const hideAuhtorizationStatus = !this.props.authMapping[appId]
+    //   .isUserinfoRequired;
+
+    // if (isAuthVerifiedInPreviewMode || hideAuhtorizationStatus) {
+    //   this.handleAuthSelected(auth.authorizationId, true, !!override);
+    //   this.context.eventEmitter.emit('did-select-authorization', {
+    //     authorizationId: Number(auth.authorizationId),
+    //   });
+    //   return;
+    // }
+
+    this.setState({ isLoading: true });
+    this.props.toggleVerifyAppAuthorizationFlag({
+      appId,
+      authId: auth.id,
+      isVerifying: true,
+    });
+
+    this.props.apiHandler
+      .verifyOAuth(auth.id)
+      .then((res) => {
+        if (res) {
+          this.handleAuthSelected(auth.id, true, !!override);
+          this.context.eventEmitter.emit('did-select-authorization', {
+            authorizationId: Number(auth.id),
+          });
+          if (this.props.onNextButtonClick) {
+            this.props.onNextButtonClick();
+          }
+        } else {
+          this.handleAuthSelected(auth.id, false, !!override);
+        }
+      })
+      .catch((err) => console.error(err))
+      .finally(() => {
+        this.props.toggleVerifyAppAuthorizationFlag({
+          appId,
+          authId: auth.id,
+          isVerifying: false,
+        });
+        this.setState({ isLoading: false });
+      });
+  };
+
+  private handleAuthSelected = (
+    authId: number,
+    isVerified: boolean,
+    override: boolean,
+  ) => {
+    const { onAuthSelected } = this.props;
+    if (onAuthSelected) onAuthSelected(authId, isVerified, override);
+    else this.onAuthSelected(authId, isVerified, override);
+  };
+
+  private onAuthSelected = (
+    authId: number,
+    isVerified: boolean,
+    override: boolean,
+  ) => {
+    this.props.setStepAuthorization(
+      null,
+      authId,
+      isVerified,
+      [], // dependentSteps,
+      override,
+    );
+  };
+
+  private willDelete = (authIndex: number) => {
+    this.setState({
+      willDeleteAuthWithIndex: authIndex,
+    });
+  };
+
+  private deleteAuth = (authIndex: number) => {
+    const { appId } = this.props;
+    const auth = this.props.authorizations[authIndex];
+    // this.props.toggleDeleteAppAuthorizationFlag({
+    //   appId,
+    //   authId: auth.authorizationId,
+    //   isDeleting: true,
+    //   error: '',
+    // });
+
+    this.context.eventEmitter.emit('did-begin-remove-authorization', {
+      authorizationId: Number(auth.authorizationId),
+    });
+
+    this.props.apiHandler
+      .deleteAuth(auth.id)
+      .then((res) => {
+        if (res?.status === 200) {
+          // this.props.removeAppAuthorization({
+          //   appId,
+          //   authId: auth.id,
+          // });
+          this.context.eventEmitter.emit('did-remove-authorization', {
+            authorizationId: Number(auth.id),
+          });
+          this.context.eventEmitter.emit('app-disconnected', {
+            authorizationId: Number(auth.id),
+          });
+          this.handleAuthSelected(
+            this.props.authorizations.length &&
+              this.props.authorizations[0].id !== auth.id
+              ? this.props.authorizations[0].id
+              : null,
+            true,
+            false,
+          );
+          const { onAuthDeleted } = this.props;
+          if (onAuthDeleted) onAuthDeleted(auth.id, this.props.appId);
+        } else if (res?.status === 405) {
+          // we have a deletion error
+          // this.props.toggleDeleteAppAuthorizationFlag({
+          //   appId,
+          //   authId: auth.id,
+          //   isDeleting: false,
+          //   error: `${res.data}`,
+          // });
+        } else {
+          // this.props.toggleDeleteAppAuthorizationFlag({
+          //   appId,
+          //   authId: auth.id,
+          //   isDeleting: false,
+          //   error: 'An unexpected error occurred',
+          // });
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      })
+      .finally(() => this.setState({ willDeleteAuthWithIndex: null }));
+  };
+
+  private onAuthResponseReceived = (messageEvent: MessageEvent<AuthData>) => {
+    if (isAuthMessage(messageEvent) && messageEvent.data.activity_name) {
+      if (this.props.appId) {
+        const { appId, onNewAccountAdded = () => null } = this.props;
+        const authApp = this.props.appData;
+        if (!messageEvent.data.already_exists) {
+          onNewAccountAdded(messageEvent.data.authorization_id);
+          // this.props.addAppAuthorization({
+          //   appId: this.props.appId,
+          //   authData: {
+          //     authorizationId: messageEvent.data.authorization_id,
+          //     userIdentity: messageEvent.data.user_identity,
+          //     disableLink: '',
+          //     authType: '',
+          //     isVerified: false,
+          //     didFetchStatus: false,
+          //     isVerifying: false,
+          //     isDeleting: false,
+          //     error: '',
+          //   },
+          // });
+        } else {
+          // this.props.setAppStepAuthId({
+          //   appId: this.props.appId,
+          //   authId: Number(messageEvent.data.authorization_id),
+          // });
+        }
+
+        this.context.eventEmitter.emit('did-add-authorization', {
+          identity: messageEvent.data.user_identity,
+          authorizationId: Number(messageEvent.data.authorization_id),
+          flowId: this.props.actionId,
+          appId: authApp.id || '',
+          appName: authApp?.name,
+          appIcon: authApp?.icon_url,
+          alreadyExists: messageEvent.data.already_exists,
+          externalId: messageEvent.data.external_id,
+        });
+        /**
+         * also emit the new event app-connected with update payload
+         */
+        const eventPayload = authApp;
+        eventPayload.connected_accounts =
+          authApp.authorization_type.authorizations;
+        delete eventPayload.authorization_type;
+        this.context.eventEmitter.emit('app-connected', eventPayload);
+      }
+      if (this.props.autoNextOnAuth && this.props.onNextButtonClick)
+        this.props.onNextButtonClick();
+    }
+  };
+
+  private getAuthStatus = (auth: Authorization) => {
+    const { actionId } = this.props;
+    if (!auth) return null;
+    const status = 'IDLE';
+    // const hideAuhtorizationStatus = !this.props.authMapping[actionId]
+    //   .isUserinfoRequired;
+    // if (hideAuhtorizationStatus) {
+    //   return status;
+    // }
+    // if (auth.isVerified && auth.didFetchStatus) status = 'CONNECTED';
+    // if (!auth.isVerified && auth.didFetchStatus) status = 'ERROR';
+    // if (auth.isVerifying) status = 'VERIFYING';
+    return status;
+  };
+
+  private getError = () => {
+    const { actionId } = this.props;
+    const step = this.props.authMapping[actionId];
+    if (!step.authorizations) {
+      return `Please add a valid ${step.app?.name} account`;
+    }
+    return `Please select a valid ${step.app?.name} account`;
+  };
+
+  public openAuthWindow = () => {
+    const url = this.context.apiHandler.getAuthUrl(
+      this.props.appData.authorization_type.id,
+    );
+    openPopupWindow(url, 'Auth Window', window, 800, 600);
+    // const { authMapping, actionId } = this.props;
+    // const step = authMapping[actionId];
+    // if (step) {
+    //   const url = this.context.apiHandler.getAuthUrl(
+    //     step.app.id,
+    //   );
+    //   openPopupWindow(url, 'Auth Window', window, 800, 600);
+    // }
+  };
+
+  render() {
+    const { actionId, showErrors = false, closePopup } = this.props;
+    const step = this.props.authMapping[actionId];
+    const authorizations = this.props.authorizations || {};
+    const isReadOnly = this.context?.isReadOnly;
+    const { selectedAuth } = this.props;
+    return html`
+      <div
+        class="${styles.authSelectorDropdownContainer} integry-actions-container__auth-selector"
+      >
+        ${(authorizations || []).length
+          ? html`<div class=${styles.rows}>
+              ${(authorizations || []).map(
+                (el, index) => html`<${AuthorizationRow}
+                  id=${el.id}
+                  value=${el.user_identity}
+                  status=${this.getAuthStatus(el)}
+                  isChecked=${el.id === selectedAuth?.id}
+                  isDeleting=${el.isDeleting}
+                  willDelete=${this.state.willDeleteAuthWithIndex === index}
+                  error=${el.error}
+                  handleChange=${() => this.verifyAuth(index)}
+                  handleReverify=${() => this.verifyAuth(index)}
+                  handleDelete=${(shouldDelete: boolean) =>
+                    shouldDelete
+                      ? this.deleteAuth(index)
+                      : this.setState({ willDeleteAuthWithIndex: null })}
+                  handleWillDelete=${(e: any) => {
+                    e.stopPropagation();
+                    this.willDelete(index);
+                  }}
+                  isReadOnly=${isReadOnly}
+                  key=${el.authorizationId}
+                  isVerified=${el.isVerified && !el.isVerifying}
+                />`,
+              )}
+            </div>`
+          : null}
+        ${!isReadOnly &&
+        html`
+          <div
+            class=${showErrors
+              ? `${styles.addAccount} ${styles.error}`
+              : `${styles.addAccount}`}
+            onClick=${() =>
+              !this.props.genericData.isPreviewMode && this.openAuthWindow()}
+          >
+            <span>Add an account...</span>
+          </div>
+          ${showErrors &&
+          false &&
+          html`<${ErrorMessage}>${this.getError()} <//>`}
+        `}
+      </div>
+    `;
+  }
+}
+
+export default connect<
+  AuthSelectorPropsType,
+  AuthSelectorStateType,
+  StoreType,
+  unknown
+>(
+  ['genericData', 'authMapping'],
+  actionFunctions,
+)(AuthSelectorDropdown);