@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,121 @@
+.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

@@ -0,0 +1,279 @@
+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

@@ -0,0 +1,231 @@
+.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;
+//   }
+// }