@integry/sdk 4.5.2 → 4.5.4

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

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

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