@integry/sdk 4.5.2 → 4.5.3

package/src/features/containers/AppFlowContainer/Authentication/styles.module.scss

@@ -0,0 +1,468 @@
+.authenticationContainer {
+  padding: 0;
+  margin-top: 8px;
+  width: 100%;
+
+  div,
+  p,
+  span {
+    user-select: none;
+  }
+}
+
+.placeholder {
+  min-height: 19px;
+  width: 250px;
+  background-color: #f3f3f3;
+  background: linear-gradient(to right, #f3f3f3 5%, #eee 20%, #f3f3f3 35%);
+  animation: placeholderShimmer 10s linear 0s infinite normal forwards;
+
+  @keyframes placeholderShimmer {
+    0% {
+      background-position: -500px 0;
+    }
+    100% {
+      background-position: 500px 0;
+    }
+  }
+}
+
+.authSelectorInlineWrap {
+  .authSelectorLabel {
+    margin: 0;
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  .authSelectorUsername {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    min-height: 20px;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  .authCTA {
+    font-feature-settings: 'clig' off, 'liga' off;
+    color: #4250f0;
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+
+    &:hover {
+      cursor: pointer;
+      // text-decoration-line: underline;
+    }
+  }
+
+  .authActions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    margin-left: 16px;
+    visibility: hidden;
+
+    .authActionCTA {
+      font-feature-settings: 'clig' off, 'liga' off;
+      color: #4250f0;
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px; /* 166.667% */
+      text-decoration-line: underline;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  &:hover {
+    .authActions {
+      visibility: visible;
+
+      .authActionIcon {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.confirmation {
+  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;
+    }
+  }
+
+  .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;
+    }
+  }
+
+  .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;
+    }
+  }
+}
+.accountField {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+  line-height: 15px;
+  color: #999999;
+  margin-top: 16px;
+  margin-bottom: 8px;
+  // width: 342px;
+  padding-right: 24px;
+
+  p {
+    margin: 0;
+    margin-left: 8px;
+    color: #4f4f4f;
+    display: inline;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    // max-width: 167px;
+    // font-weight: 500;
+    font-size: 12px;
+    // line-height: 15px;
+    font-style: normal;
+    font-weight: 400;
+  }
+  span {
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    margin-left: auto;
+    color: #4250f0;
+    border-bottom: 1px solid #4250f0;
+    height: 15px;
+    cursor: pointer;
+    visibility: hidden;
+
+    &:hover {
+      color: #4250f0;
+    }
+  }
+  .disabled {
+    color: #666666;
+    border-bottom: 1px solid #666666;
+    cursor: default;
+    &:hover {
+      color: #666666;
+    }
+  }
+
+  .accountStatus {
+    margin-left: 8px;
+    margin-right: 4px;
+    align-self: center;
+    height: 15px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    // div {
+    //   margin-top: 6px;
+    //   margin-left: 3px;
+    //   height: 5px;
+    //   width: 5px;
+    //   border-radius: 50%;
+    // }
+
+    .isVerified {
+      background-color: #2ecc71;
+    }
+    .isErrored {
+      background-color: #e4661d;
+    }
+  }
+
+  &:hover {
+    span {
+      visibility: visible;
+    }
+  }
+}
+.accountField {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+  line-height: 15px;
+  color: #999999;
+  margin-top: 16px;
+  margin-bottom: 8px;
+  // width: 342px;
+  padding-right: 24px;
+
+  p {
+    margin: 0;
+    margin-left: 8px;
+    color: #4f4f4f;
+    display: inline;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    // max-width: 167px;
+    // font-weight: 500;
+    font-size: 12px;
+    // line-height: 15px;
+    font-style: normal;
+    font-weight: 400;
+  }
+  span {
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    margin-left: auto;
+    color: #4250f0;
+    border-bottom: 1px solid #4250f0;
+    height: 15px;
+    cursor: pointer;
+    visibility: hidden;
+
+    &:hover {
+      color: #4250f0;
+    }
+  }
+  .disabled {
+    color: #666666;
+    border-bottom: 1px solid #666666;
+    cursor: default;
+    &:hover {
+      color: #666666;
+    }
+  }
+
+  .accountStatus {
+    margin-left: 8px;
+    margin-right: 4px;
+    align-self: center;
+    height: 15px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    // div {
+    //   margin-top: 6px;
+    //   margin-left: 3px;
+    //   height: 5px;
+    //   width: 5px;
+    //   border-radius: 50%;
+    // }
+
+    .isVerified {
+      background-color: #2ecc71;
+    }
+    .isErrored {
+      background-color: #e4661d;
+    }
+  }
+
+  &:hover {
+    span {
+      visibility: visible;
+    }
+  }
+}
+.accountFieldDropdown {
+  background: #fff;
+  height: 40px;
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 4px;
+  border: 1px solid #e2e0db;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  // padding-right: 7px;
+  // padding-left: 4px;
+  margin-left: 4px;
+  min-width: 283px;
+
+  p {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+  }
+}
+.accountFieldDropdownIcon {
+  min-width: 20px;
+}
+.devider {
+  height: 1px;
+  width: 390px;
+  box-shadow: 0px 1px 0px 0px #efefef;
+  border-bottom: #333333;
+
+  margin-left: -24px;
+}
+.authWrap {
+  background: #ffffff;
+  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+  padding: 24px;
+  width: 349px;
+  position: absolute;
+  z-index: 9999;
+  left: 150px;
+  top: 86px;
+  &::before {
+    content: '';
+    width: 12px;
+    height: 12px;
+    margin: auto;
+    position: absolute;
+    background: #ffffff;
+    border-radius: 2px;
+    transform: rotate(-45deg);
+    top: -5px;
+    left: calc(50% - 12px);
+  }
+}
+
+.authWrapDropdown {
+  background: #ffffff;
+  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+  border: 1px solid #e2e0db;
+  width: 287px;
+  position: absolute;
+  z-index: 9999;
+  left: 3px;
+  top: 48px;
+}
+
+.summaryWrap {
+  height: calc(100% - 100px);
+  width: 360px;
+  .bottom {
+    button {
+      padding: 7px;
+      height: 40px;
+    }
+  }
+}

package/src/features/containers/AppFlowContainer/index.ts

@@ -0,0 +1,114 @@
+import { html } from 'htm/preact';
+import { connect } from 'unistore/preact';
+import { Modal } from '@/components/Modal';
+import { MarketplaceRenderModes, ViewStyles } from '@/types';
+import { StoreType } from '@/types/store';
+import { actionFunctions } from '@/store';
+
+import AppFlowWrap from './AppFlowWrap';
+import AppsForFlows from '../AppsForFlows';
+import AppsForFlowsCompact from '../AppsForFlowsCompact';
+
+interface ContainerProps extends StoreType {
+  renderMode: MarketplaceRenderModes;
+  renderAppPageMode: MarketplaceRenderModes;
+  renderFlowSetupMode: MarketplaceRenderModes;
+}
+
+const MarketplaceContainer = (props: ContainerProps) => {
+  const {
+    renderMode,
+    genericData,
+    renderAppPageMode,
+    renderFlowSetupMode,
+  } = props;
+  const { app_id } = genericData;
+
+  const handleCloseMarketplaceModal = () => {
+    props.resetTemplateFields();
+    if (genericData.showApps && genericData.app_id) {
+      props.setGenericData({
+        app_id: null,
+      });
+    } else if (!genericData.isPreviewMode) {
+      props.setStoreState({
+        showMarketplaceModal: false,
+      });
+    }
+  };
+  const renderAppList = () => {
+    if (!genericData.keepBackButtonForFlows) {
+      props.setGenericData({
+        keepBackButtonForFlows: true,
+      });
+    }
+    return html`
+      ${renderMode === MarketplaceRenderModes.INLINE &&
+      html`<${genericData.viewStyle === ViewStyles.COMPACT
+        ? AppsForFlowsCompact
+        : AppsForFlows}
+        renderMode=${renderMode}
+      />`}
+      ${renderMode === MarketplaceRenderModes.MODAL &&
+      html`
+        <${Modal}
+          isOpen=${props.showMarketplaceModal}
+          onClose=${handleCloseMarketplaceModal}
+          className="flowAppsModal"
+          isCompact=${genericData.viewStyle === ViewStyles.COMPACT}
+        >
+          ${html`<${genericData.viewStyle === ViewStyles.COMPACT
+            ? AppsForFlowsCompact
+            : AppsForFlows}
+            renderMode=${renderMode}
+          />`}
+        <//>
+      `}
+    `;
+  };
+  return html`
+    ${(!app_id ||
+      (renderAppPageMode === MarketplaceRenderModes.MODAL &&
+        renderMode === MarketplaceRenderModes.INLINE)) &&
+    renderAppList()}
+    ${!Number.isNaN(app_id) &&
+    app_id &&
+    renderAppPageMode === MarketplaceRenderModes.INLINE &&
+    html`<${AppFlowWrap}
+      renderMode=${renderAppPageMode}
+      renderFlowSetupMode=${renderFlowSetupMode}
+      onBackClick=${() => {
+        props.setGenericData({
+          app_id: null,
+        });
+      }}
+    />`}
+    ${!Number.isNaN(app_id) &&
+    app_id &&
+    renderAppPageMode === MarketplaceRenderModes.MODAL &&
+    html`
+      <${Modal}
+        isOpen=${props.showMarketplaceModal}
+        onClose=${handleCloseMarketplaceModal}
+        className="appModal"
+        isCompact=${genericData.viewStyle === ViewStyles.COMPACT}
+      >
+        ${html`<${AppFlowWrap}
+          renderMode=${renderAppPageMode}
+          renderFlowSetupMode=${MarketplaceRenderModes.INLINE}
+          onBackClick=${() => {
+            props.setGenericData({
+              app_id: null,
+            });
+          }}
+          isInModal=${true}
+        />`}
+      <//>
+    `}
+  `;
+};
+
+export default connect<ContainerProps, unknown, StoreType, unknown>(
+  ['showMarketplaceModal', 'genericData'],
+  actionFunctions,
+)(MarketplaceContainer);