@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,23 @@
+.actionFormWrap {
+  width: 100%;
+  .noStepFields {
+    font-family: 'Inter';
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    color: #999999;
+  }
+}
+
+.actionStepFieldWrap {
+  // margin-bottom: 16px;
+}
+
+.unsupported {
+  font-size: 12px;
+  color: #ca8c1b;
+}
+.actionFormLoader {
+  width: 15px;
+  margin: 0 auto;
+}

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

@@ -0,0 +1,207 @@
+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 isBrowser from '@/utils/isBrowser';
+import { AuthData, isAuthMessage } from '@/utils/isAuthMessage';
+import { truncate, isTruncatable } from '@/utils/truncate';
+import { Hint } from '@/components/Tooltip';
+
+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 verifyAuth = (auth: any) => {
+    setIsVerifying(true);
+    context?.apiHandler
+      .verifyOAuth(auth.id)
+      .then((isVerified: any) => {
+        setIsAuthVerified(isVerified);
+        const appsAuthDataLocal = props.appsAuthData || [];
+        appsAuthDataLocal.push({
+          appId: app.id,
+          isVerified,
+        });
+
+        props.setAppsAuthData({
+          appsAuthData: [...appsAuthDataLocal],
+        });
+      })
+      .catch((error: any) => {
+        setIsAuthVerified(false);
+      })
+      .finally(() => {
+        setIsVerifying(false);
+        setHasAuthExecuted(true);
+      });
+  };
+
+  const onAuthResponseReceived = (messageEvent: MessageEvent<AuthData>) => {
+    if (isAuthMessage(messageEvent) && messageEvent.data.activity_name) {
+      onAppClick(app);
+      verifyAuth({
+        id: messageEvent.data.authorization_id,
+      });
+      if (isBrowser())
+        window.removeEventListener('message', onAuthResponseReceived);
+    }
+  };
+
+  const openAuthWindow = () => {
+    if (isBrowser()) window.addEventListener('message', onAuthResponseReceived);
+    const { authorization_type } = app;
+    if (context) {
+      const url = context.apiHandler.getAuthUrl(authorization_type.id);
+      openPopupWindow(url, 'Auth Window', window, 800, 600);
+    }
+  };
+
+  useEffect(() => {
+    const { authorization_type } = app;
+    const { authorizations = [] } = authorization_type;
+    if (authorizations.length > 0) {
+      const auth = authorizations[authorizations.length - 1];
+      if (auth) {
+        const appAuthData =
+          appsAuthData ||
+          [].find(
+            (appAuth: any) => appAuth.appId === app.id && appAuth.isVerified,
+          );
+        if (!appAuthData) {
+          verifyAuth(auth);
+        } else {
+          setIsAuthVerified(appAuthData[0].isVerified);
+          setHasAuthExecuted(true);
+        }
+      }
+    }
+  }, [appsAuthData]);
+
+  return html`
+    <div
+      class=${styles.appCard}
+      onclick=${() => {
+        if (
+          !hasAuthExecuted &&
+          !isVerifying &&
+          app.authorization_type.type !== 'NO_AUTH'
+        ) {
+          openAuthWindow();
+        }
+        if (
+          (onAppClick && hasAuthExecuted) ||
+          app.authorization_type.type === 'NO_AUTH'
+        ) {
+          onAppClick(app);
+        }
+      }}
+    >
+      <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
+        <div class=${styles.appCardInfo} data-hint="">
+          ${app.icon_url && html`<img src=${app.icon_url} />`}
+          <div class=${styles.appCardInfoContent}>
+            <${Hint}
+              dismissOnClick=${false}
+              position="top"
+              deltaY=${0}
+              disabled=${true}
+            >
+              <span
+                data-hint="${isTruncatable(app.name) ? app.name : ``}"
+                class=${styles.appCardTitle}
+                >${truncate(app.name)}</span
+              >
+            <//>
+            ${isVerifying && html`<${Loader} />`}
+            ${!hasAuthExecuted &&
+            !isVerifying &&
+            html`
+              ${app.authorization_type.type !== 'NO_AUTH' &&
+              html`<span class=${styles.appCardAuthStatus}
+                >Not Connected</span
+              >`}
+              ${app.authorization_type.type === 'NO_AUTH' &&
+              html`<span class=${styles.appCardAuthStatus}
+                >No login required</span
+              >`}
+            `}
+            ${hasAuthExecuted &&
+            isAuthVerified &&
+            !isVerifying &&
+            app.authorization_type.type !== 'NO_AUTH' &&
+            html` <span class=${styles.appCardAuthStatus}>
+              <span class=${styles.appCardAuthLabel}>Connected</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/AppCard/styles.module.scss

@@ -0,0 +1,117 @@
+.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;
+    }
+  }
+}
+
+// @media (max-width: 648px) {
+//   .appCard {
+//     width: 100%;
+//   }
+// }
+
+// @media (max-width: 480px) {
+//   .appCard {
+//     // width: 232px;
+//     // margin: auto;
+//   }
+// }

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

@@ -0,0 +1,189 @@
+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 isBrowser from '@/utils/isBrowser';
+import { AuthData, isAuthMessage } from '@/utils/isAuthMessage';
+
+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 verifyAuth = (auth: any) => {
+    setIsVerifying(true);
+    context?.apiHandler
+      .verifyOAuth(auth.id)
+      .then((isVerified: any) => {
+        setIsAuthVerified(isVerified);
+      })
+      .catch((error: any) => {
+        setIsAuthVerified(false);
+      })
+      .finally(() => {
+        setIsVerifying(false);
+        setHasAuthExecuted(true);
+      });
+  };
+
+  const onAuthResponseReceived = (messageEvent: MessageEvent<AuthData>) => {
+    if (isAuthMessage(messageEvent) && messageEvent.data.activity_name) {
+      onAppClick(app);
+      verifyAuth({
+        id: messageEvent.data.authorization_id,
+      });
+      if (isBrowser())
+        window.removeEventListener('message', onAuthResponseReceived);
+    }
+  };
+
+  const openAuthWindow = () => {
+    if (isBrowser()) window.addEventListener('message', onAuthResponseReceived);
+    const { authorization_type } = app;
+    if (context) {
+      const url = context.apiHandler.getAuthUrl(authorization_type.id);
+      openPopupWindow(url, 'Auth Window', window, 800, 600);
+    }
+  };
+
+  useEffect(() => {
+    const { authorization_type } = app;
+    const { authorizations = [] } = authorization_type;
+    if (authorizations.length > 0) {
+      const auth = authorizations[authorizations.length - 1];
+      if (auth) {
+        verifyAuth(auth);
+      }
+    }
+  }, []);
+
+  return html`
+    <div class=${styles.appCardCompact}>
+      <div
+        class=${styles.appCardInfo}
+        style="cursor: ${isVerifying ? 'wait' : 'pointer'}"
+        onclick=${() => {
+          if (!isVerifying) {
+            if (!hasAuthExecuted && app.authorization_type.type !== 'NO_AUTH') {
+              openAuthWindow();
+            }
+            if (
+              (onAppClick && hasAuthExecuted) ||
+              app.authorization_type.type === 'NO_AUTH'
+            ) {
+              onAppClick(app);
+            }
+          }
+        }}
+      >
+        ${app.icon_url && html`<img src=${app.icon_url} />`}
+        <div class=${styles.appInfoGroup}>
+          <div class=${styles.appCardTitleGroup}>
+            <span class=${styles.appCardTitle}>${app.name}</span>
+            <!--<button
+              disabled=${isVerifying}
+              onclick=${() => {
+              if (!hasAuthExecuted) {
+                openAuthWindow();
+              }
+              if (onAppClick && hasAuthExecuted) {
+                onAppClick(app);
+              }
+            }} class=${styles.appCardCTA}>${hasAuthExecuted
+              ? 'View'
+              : 'Connect'}
+            </button>-->
+          </div>
+          <div class=${styles.appCardAuthInfo}>
+            ${isVerifying && html`<${Loader} size="sm" />`}
+            ${!hasAuthExecuted &&
+            !isVerifying &&
+            html`
+              ${app.authorization_type.type !== 'NO_AUTH' &&
+              html`<span class=${styles.appCardAuthStatus}
+                >Not Connected</span
+              >`}
+              ${app.authorization_type.type === 'NO_AUTH' &&
+              html`<span class=${styles.appCardAuthStatus}
+                >No login required</span
+              >`}
+            `}
+            ${hasAuthExecuted &&
+            isAuthVerified &&
+            !isVerifying &&
+            app.authorization_type.type !== 'NO_AUTH' &&
+            html` <span class=${styles.appCardAuthStatus}>
+              <span class=${styles.appCardAuthLabel}>Connected</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'],
+  actionFunctions,
+)(AppCard);

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

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