@integry/sdk 4.7.39 → 4.7.40

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

@@ -1,121 +0,0 @@
-.mappingWrap {
-  .mappingInfo {
-    margin-top: 20px;
-    display: flex;
-    justify-content: flex-end;
-    font-size: 10px;
-    line-height: 12px;
-    display: flex;
-    align-items: center;
-    letter-spacing: 0.1px;
-    color: #999999;
-    & > :not(:last-child) {
-      margin-right: 20px;
-    }
-    & > div {
-      margin-right: 7px;
-      & > span:first-child {
-        color: #333333;
-        margin: 0;
-        margin-right: 3px;
-      }
-    }
-  }
-  & .mappingRow:first-child {
-    padding-top: 0;
-    padding-bottom: 5px;
-    height: 60px;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 14px;
-    letter-spacing: 0.1px;
-    color: #333333;
-  }
-}
-
-.loader {
-  margin-top: 35px;
-  margin-bottom: -60px;
-  display: flex;
-  justify-content: center;
-}
-
-.mappingRow {
-  display: flex;
-  box-sizing: content-box;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #fff;
-  padding-left: 14px;
-  padding-right: 14px;
-  padding-top: 18px;
-  padding-bottom: 18px;
-  // height: 90px;
-  .title {
-    width: 40%;
-    padding-right: 4px;
-    font-weight: 500;
-    font-size: 14px;
-    color: #333333;
-    padding-right: 10px;
-    line-height: 20px;
-    // white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    span {
-      color: red;
-      font-size: 16px;
-      margin-left: 2px;
-    }
-  }
-  .sampleData {
-    display: flex;
-    flex-direction: column;
-    width: 40%;
-    overflow: hidden;
-    word-break: break-word;
-    padding-right: 20px;
-    max-width: 286px;
-    pre {
-      margin: 0;
-      padding: 0;
-      color: #7d7d7d;
-      height: 20px;
-      font-size: 14px;
-      line-height: 20px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-  .tagColumn {
-    width: 100px;
-    margin-left: 10px;
-  }
-  .selectBox {
-    width: 40%;
-    font-size: 14px;
-  }
-  &:nth-child(even) {
-    background: #f8f8f880;
-  }
-  &:first-child {
-    color: #333333;
-  }
-  .mappingHeaderItem {
-    display: flex;
-    align-items: center;
-    width: 40%;
-    line-height: 20px;
-    &:first-child {
-      padding-right: 4px;
-    }
-    img {
-      height: 25px;
-      width: 25px;
-      padding: 2px;
-      object-fit: contain;
-      border-radius: 9999px;
-      margin-right: 5px;
-    }
-  }
-}

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

@@ -1,279 +0,0 @@
-import { html } from 'htm/preact';
-import { useEffect, useState, useContext } from 'preact/hooks';
-
-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 { truncate, isTruncatable } from '@/utils/truncate';
-import { Hint } from '@/components/Tooltip';
-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.appCard}
-      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}>
-        ${app.icon_url && html`<img src=${app.icon_url} />`}
-        <div class=${styles.appCardInfoContent}>
-          <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
-            <span
-              data-hint="${isTruncatable(app.title) ? app.title : ``}"
-              class=${styles.appCardTitle}
-              >${truncate(app.title)}</span
-            >
-          <//>
-
-          ${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="13"
-              viewBox="0 0 12 13"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle cx="6" cy="6.5" r="6" fill="#C4E9D2" />
-              <path
-                d="M8.49951 4.5L5.22003 8.25L3.49951 6.28264"
-                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>
-  `;
-};
-
-export default connect<StoreType, unknown, StoreType, unknown>(
-  ['genericData', 'appsAuthData'],
-  actionFunctions,
-)(AppCard);

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

@@ -1,231 +0,0 @@
-.appCard {
-  border-radius: 8px;
-  border: 1px solid #f2f2f2;
-  background: #fff;
-  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
-  padding: 16px;
-  min-width: 232px;
-  height: 75px;
-  box-sizing: border-box;
-  cursor: pointer;
-
-  .appCardInfo {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-
-    img {
-      height: 40px;
-      width: 40px;
-      border-radius: 50%;
-    }
-
-    .appCardTitle {
-      color: #333333;
-      font-family: Inter;
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: normal;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .appCardInfoContent {
-      display: flex;
-      flex-direction: column;
-      .appCardAuthStatus {
-        color: #999999;
-        font-family: Inter;
-        font-size: 10px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-        display: flex;
-        flex-direction: row;
-        gap: 4px;
-        margin-top: 4px;
-      }
-    }
-  }
-
-  .appCardFooter {
-    display: flex;
-    flex-direction: row;
-    align-items: end;
-    justify-content: space-between;
-    margin-top: 8px;
-
-    .appCardAuthInfo {
-      .appCardAuthStatus {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 4px;
-        color: #d6d6d6;
-        font-family: Inter;
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-
-        .appCardAuthLabel {
-          color: #333;
-          font-family: Inter;
-          font-size: 12px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: normal;
-        }
-      }
-    }
-  }
-
-  button {
-    padding: 5px 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;
-
-    &:hover {
-      cursor: pointer;
-      background: #4250f0;
-      color: #fff;
-    }
-  }
-}
-.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: 22px;
-    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;
-    }
-  }
-}
-
-// @media (max-width: 648px) {
-//   .appCard {
-//     width: 100%;
-//   }
-// }
-
-// @media (max-width: 480px) {
-//   .appCard {
-//     // width: 232px;
-//     // margin: auto;
-//   }
-// }