@integry/sdk 4.7.39 → 4.7.41

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

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

@@ -1,114 +0,0 @@
-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);