@integry/sdk 4.7.39 → 4.7.40

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

@@ -1,283 +0,0 @@
-import { html } from 'htm/preact';
-import { useEffect, useState, useContext } from 'preact/hooks';
-
-import { Loader } from '@/components/Loader';
-
-import { connect } from 'unistore/preact';
-import { StoreType } from '@/types/store';
-import { actionFunctions } from '@/store';
-import AppContext from '@/contexts/AppContext';
-
-import { openPopupWindow } from '@/utils/popup';
-import { Modal } from '@/components/Modal';
-import isBrowser from '@/utils/isBrowser';
-import { AuthData, isAuthMessage } from '@/utils/isAuthMessage';
-import { ThreeDotLoader } from '@/components/ThreeDotLoader';
-
-import styles from './styles.module.scss';
-
-const AppCard = (props: any) => {
-  const { app, onAppClick } = props;
-  const context = useContext(AppContext);
-
-  const [isVerifying, setIsVerifying] = useState<boolean>(false);
-  const [isAuthVerified, setIsAuthVerified] = useState<boolean>(false);
-  const [hasAuthExecuted, setHasAuthExecuted] = useState<boolean>(false);
-  const [appsAuthData, setAppsAuthData] = useState(props.appsAuthData);
-  const [willDeleteAuth, setWillDeleteAuth] = useState<boolean>(false);
-  const [willDeleteAuthWithIndex, setWillDeleteAuthWithIndex] = useState<
-    number | null
-  >(null);
-  const [connectedAccounts, setConnectedAccounts] = useState(
-    app.connected_accounts,
-  );
-  const [isDeletingAuth, setIsDeletingAuth] = useState<boolean>(false);
-
-  const onAuthResponseReceived = (messageEvent: MessageEvent<AuthData>) => {
-    if (isAuthMessage(messageEvent) && messageEvent.data.activity_name) {
-      const connectedAccountsUpdated = [
-        ...connectedAccounts,
-        {
-          id: messageEvent.data.authorization_id,
-          display_name: messageEvent.data.user_identity,
-        },
-      ];
-      setConnectedAccounts(connectedAccountsUpdated);
-      const eventPayload = app;
-      eventPayload.connected_accounts = connectedAccountsUpdated;
-      eventPayload.connected_account_id = messageEvent.data.authorization_id;
-      context?.eventEmitter.emit('app-connected', eventPayload);
-      if (isBrowser())
-        window.removeEventListener('message', onAuthResponseReceived);
-    }
-  };
-
-  const openAuthWindow = () => {
-    if (isBrowser()) window.addEventListener('message', onAuthResponseReceived);
-    if (context) {
-      const url = app.login_url;
-      openPopupWindow(url, 'Auth Window', window, 800, 600);
-    }
-  };
-
-  const deleteAuth = () => {
-    const authIndex = willDeleteAuthWithIndex || 0;
-    const auth = connectedAccounts[authIndex];
-
-    context?.apiHandler
-      .deleteAuth(auth.id)
-      .then((res) => {
-        if (res?.status === 200) {
-          if (connectedAccounts && authIndex >= 0) {
-            connectedAccounts.splice(authIndex, 1);
-          }
-
-          const eventPayload = app;
-          eventPayload.connected_account_id = auth.id;
-
-          context.eventEmitter.emit('app-disconnected', eventPayload);
-        }
-      })
-      .catch((err) => {
-        console.error(err);
-      })
-      .finally(() => {
-        setWillDeleteAuth(false);
-        setIsDeletingAuth(false);
-        setWillDeleteAuthWithIndex(null);
-      });
-  };
-
-  const handleDelete = (shouldDelete: boolean) => {
-    if (shouldDelete) {
-      setIsDeletingAuth(true);
-      deleteAuth();
-    } else {
-      setWillDeleteAuth(false);
-    }
-  };
-
-  useEffect(() => {
-    const authorizations = connectedAccounts;
-    if (authorizations.length > 0) {
-      const auth = authorizations[authorizations.length - 1];
-      if (auth) {
-        setIsAuthVerified(true);
-        setHasAuthExecuted(true);
-      }
-    }
-  }, [appsAuthData]);
-
-  const Confirmation = (confirmationProps: {
-    callback(shouldDelete: boolean): void;
-  }) => {
-    const { callback } = confirmationProps;
-    return html`
-      <${Modal}
-        isOpen=${true}
-        className=${'marketplaceAppDisconnectConfirmation'}
-      >
-        <div class=${styles.marketplaceConfirmation}>
-          <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 ${app.title}
-          </div>
-          <div class=${styles.confirmationDescription}>
-            <p>Are you sure?</p>
-          </div>
-          <div class=${styles.confirmationActions}>
-            <button
-              class=${styles.secondaryCTA}
-              type="button"
-              disabled=${isDeletingAuth}
-              onclick=${(e: any) => {
-                e.stopPropagation();
-                callback(false);
-              }}
-            >
-              Cancel
-            </button>
-            <button
-              class=${`${styles.primaryCTA} ${styles.marketplaceDisconnectButton}}`}
-              type="button"
-              onclick=${(e: any) => {
-                e.stopPropagation();
-                callback(true);
-              }}
-            >
-              ${isDeletingAuth ? html`<${ThreeDotLoader} />` : html`Disconnect`}
-            </button>
-          </div>
-        </div>
-      <//>
-    `;
-  };
-
-  return html`
-    ${willDeleteAuth &&
-    html`<${Confirmation} key=${willDeleteAuth} callback=${handleDelete} />`}
-    <div
-      class=${styles.appCardCompact}
-      onclick=${() => {
-        let onClick_isDeletingAuth = false;
-        const allowMultipleAccounts = app.allow_multiple_connected_accounts;
-        if (!allowMultipleAccounts && connectedAccounts.length > 0) {
-          setWillDeleteAuth(true);
-          setWillDeleteAuthWithIndex(0);
-          onClick_isDeletingAuth = true;
-        } else if (allowMultipleAccounts && connectedAccounts.length > 0) {
-          onAppClick(app);
-        } else if (app.login_url !== '' && !onClick_isDeletingAuth) {
-          openAuthWindow();
-        }
-      }}
-    >
-      <div
-        class=${styles.appCardInfo}
-        style="cursor: ${isVerifying ? 'wait' : 'pointer'}"
-      >
-        ${app.icon_url && html`<img src=${app.icon_url} />`}
-        <div class=${styles.appInfoGroup}>
-          <div class=${styles.appCardTitleGroup}>
-            <span class=${styles.appCardTitle}>${app.name}</span>
-          </div>
-          <div class=${styles.appCardAuthInfo}>
-            ${connectedAccounts.length < 1 &&
-            html`
-              ${app.login_url !== '' &&
-              html`<span class=${styles.appCardAuthStatus}
-                >Not Connected</span
-              >`}
-              ${app.login_url === '' &&
-              html`<span class=${styles.appCardAuthStatus}
-                >No login required</span
-              >`}
-            `}
-            ${connectedAccounts.length > 0 &&
-            html` <span class=${styles.appCardAuthStatus}>
-              ${connectedAccounts.length === 1 &&
-              html`<span class=${styles.appCardAuthLabel}>Connected</span>`}
-              ${connectedAccounts.length > 1 &&
-              html`<span class=${styles.appCardAuthLabel}
-                >${connectedAccounts.length} Connected Accounts</span
-              >`}
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 12 12"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle cx="6" cy="6" r="6" fill="#C4E9D2" />
-                <path
-                  d="M8.5 4L5.22051 7.75L3.5 5.78264"
-                  stroke="#3BB568"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </span>`}
-            ${hasAuthExecuted &&
-            !isAuthVerified &&
-            !isVerifying &&
-            html` <span class=${styles.appCardAuthStatus}>
-              <span class=${styles.appCardAuthLabel}>Auth failed</span>
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle
-                  data-hint="Auth failed"
-                  cx="12"
-                  cy="12"
-                  r="12"
-                  fill="#FDEFEC"
-                />
-                <path
-                  d="M16 8L8 16"
-                  stroke="#F05C42"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M8 8L16 16"
-                  stroke="#F05C42"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </span>`}
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
-};
-
-export default connect<StoreType, unknown, StoreType, unknown>(
-  ['genericData', 'appsAuthData'],
-  actionFunctions,
-)(AppCard);

package/src/features/common/MarketplaceAppCardCompact/styles.module.scss

@@ -1,255 +0,0 @@
-.appCardCompact {
-  border-radius: 4px;
-  // border: 1px solid #F2F2F2;
-  background: #fff;
-  // box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
-  // padding: 16px;
-  min-width: 232px;
-  // height: 105px;
-  box-sizing: border-box;
-  padding: 8px;
-  // margin-top: 24px;
-  max-width: calc(100% - 10px);
-  // max-height: 40px;
-
-  .appCardInfo {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-
-    img {
-      height: 24px;
-      width: 24px;
-      border-radius: 50%;
-    }
-
-    .appCardTitleGroup {
-      display: flex;
-      flex-direction: row;
-      align-items: flex-start;
-      justify-content: space-between;
-      width: 100%;
-      gap: 8px;
-      max-width: 294px;
-
-      .appCardTitle {
-        color: #333333;
-        font-family: Inter;
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 14.52px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: var(--black-and-grey-title-and-desc, #333);
-        text-overflow: ellipsis;
-      }
-    }
-    .appCardAuthInfo {
-      // margin-top: -3px;
-    }
-  }
-
-  .appInfoGroup {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    gap: 4px;
-  }
-
-  .appCardAuthInfo {
-    .appCardAuthStatus {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 4px;
-      color: #999999;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-family: Inter;
-      font-size: 10px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 12.1px;
-
-      .appCardAuthLabel {
-        color: #999999;
-        font-family: Inter;
-        font-size: 10px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 12.1px;
-      }
-    }
-  }
-
-  button {
-    padding: 0px 10px;
-    border-radius: 5px;
-    border: 1px solid #4250f0;
-    background: #fff;
-    color: #4250f0;
-    font-family: Inter;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    height: 24px;
-
-    &:hover {
-      cursor: pointer;
-      background: #4250f0;
-      color: #fff;
-    }
-  }
-
-  &:hover {
-    background: var(--primary-p-100, #f6f6fe);
-    cursor: pointer;
-  }
-}
-
-// @media (max-width: 648px) {
-//   .appCard {
-//     width: 100%;
-//   }
-// }
-
-// @media (max-width: 480px) {
-//   .appCard {
-//     // width: 232px;
-//     // margin: auto;
-//   }
-// }
-
-#appsForFlowsCardsNoAppFound {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-
-  p {
-    text-align: center;
-  }
-}
-
-.marketplaceConfirmation {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 15px;
-  padding: 40px;
-  padding-right: 21px;
-  height: 100%;
-  div {
-    width: max-content;
-  }
-
-  button {
-    cursor: pointer;
-    -webkit-appearance: button;
-    font-weight: 500;
-    font-size: 11px;
-    line-height: 14px;
-    padding: 0px 6px;
-    text-align: center;
-    border-radius: 12px;
-    border: 0;
-    outline: none;
-    color: #7e7a8f;
-    background-color: #f1f1f1;
-    height: 18px;
-
-    &:nth-child(2) {
-      color: #ffffff;
-      margin-left: 10px;
-      margin-right: 10px;
-      background-color: #f05c42;
-      min-width: 100px;
-      text-align: center;
-      display: flex;
-    }
-  }
-
-  .confirmationHeading {
-    color: #333;
-    font-family: Inter;
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 30px;
-    margin-bottom: 16px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 8px;
-  }
-
-  .confirmationDescription {
-    width: 100%;
-
-    p {
-      color: #666666;
-      font-family: Inter;
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 24px;
-      margin: 0;
-      margin-bottom: 24px;
-      display: block;
-      text-wrap: wrap;
-    }
-  }
-
-  .confirmationActions {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 16px;
-
-    .primaryCTA {
-      height: 40px;
-      padding: 10px 15px;
-      margin: 0px;
-      justify-content: center;
-      align-items: center;
-      border-radius: 5px;
-      background: #f05c42;
-      color: #ffffff;
-      font-family: Inter;
-      font-size: 13px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
-    }
-
-    .secondaryCTA {
-      height: 40px;
-      padding: 10px 15px;
-      justify-content: center;
-      align-items: center;
-      border-radius: 5px;
-      border: 1px solid #f0f0f0;
-      background: #f0f0f0;
-      color: #333333;
-      font-family: Inter;
-      font-size: 13px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
-    }
-  }
-}