@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,361 @@
+.authSelectorDropdownContainer {
+  .label {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 15px;
+    color: #333333;
+    margin-bottom: 5px;
+
+    span {
+      color: #ff4d34;
+      margin-left: 2px;
+      font-size: 16px;
+    }
+  }
+
+  .title {
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 19px;
+    color: #333333;
+  }
+
+  .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;
+        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;
+      }
+    }
+  }
+
+  .rows {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+
+    #integry-modal-content-wrap {
+      height: 286px;
+    }
+  }
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    width: 100%;
+    max-height: 39px;
+    min-height: 39px;
+
+    .checkboxRow {
+      width: 100%;
+      flex-direction: row;
+      justify-content: space-between;
+      min-height: 39px;
+      padding: 0 12px;
+    }
+
+    .rowLabel {
+      margin: 0;
+      color: #4F4F4F;
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &:hover {
+      background: rgba(233, 236, 239, 0.5);
+
+      .deleteIcon svg {
+        visibility: visible;
+        user-select: auto;
+      }
+    }
+  }
+
+  .rowSelected {
+    background: rgba(66, 80, 240, 0.10000000149011612);
+
+    &:hover {
+      background: rgba(66, 80, 240, 0.10000000149011612);
+    }
+  }
+
+  .rowItem {
+    width: 100%;
+  }
+
+  .error {
+    color: #f05c42;
+    button {
+      color: #f05c42;
+      border-color: #f05c42;
+    }
+  }
+
+  .verify {
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 15px;
+    color: #4250F0;
+    cursor: pointer;
+    &:hover {
+      color: #252e91;
+    }
+  }
+
+  .errorMessage {
+    margin-top: 4px;
+    font-size: 12px;
+    line-height: 15px;
+    letter-spacing: -0.2px;
+    color: #f05c42;
+  }
+
+  .description {
+    font-size: 14px;
+    line-height: 20px;
+    color: #8c8c8c;
+    margin-bottom: 10px;
+  }
+
+  .checkboxRowWrap {
+    width: 100%;
+  }
+  .checkboxRow {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 5px;
+    .radio {
+      width: 100%;
+      max-width: 250px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      &.readonly {
+        width: 70%;
+      }
+    }
+    .deleteIcon {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      svg {
+        cursor: pointer;
+        visibility: hidden;
+        user-select: none;
+      }
+    }
+    .statusWrap {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      width: auto;
+      &.readonly {
+        width: 30%;
+      }
+      .status {
+        position: relative;
+        width: auto;
+        div {
+          display: flex;
+          align-items: center;
+        }
+        svg {
+          margin-left: 8px;
+        }
+        .statusRed,
+        .statusOrange,
+        .statusGreen {
+          width: 5px;
+          height: 5px;
+          border-radius: 9999px;
+          margin: 0px;
+          margin-right: 8px;
+        }
+        .statusRed {
+          background: #e26154;
+        }
+        .statusOrange {
+          background: #fcc700;
+        }
+
+        .statusGreen {
+          background: #2ecc71;
+        }
+
+        span {
+          margin-left: 10px;
+        }
+        .resend {
+          cursor: pointer;
+        }
+      }
+    }
+    &:hover {
+      .deleteIcon svg {
+        visibility: visible;
+        user-select: auto;
+      }
+    }
+    .readonlyHint {
+      position: absolute;
+      width: 40%;
+      height: -webkit-fill-available;
+      z-index: 99;
+      margin: 10px 0px;
+    }
+  }
+
+  .addAccount {
+    font-family: inherit;
+    font-style: normal;
+    cursor: pointer;
+    padding: 11px 10px;
+
+    span {
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 15px;
+      color: #4250F0;
+      visibility: visible;
+    }
+
+    &:hover {
+      background: rgba(233, 236, 239, 0.5);
+    }
+  }
+  .buttonWrap {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+     button {
+      padding: 10px 15px !important;
+    }
+  }
+ 
+  .noAccountsPrompt {
+    margin: 16px 0px 24px 0px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 15px;
+    color: #999999;
+  }
+}

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

@@ -0,0 +1,229 @@
+import { html } from 'htm/preact';
+import { connect } from 'unistore/preact';
+import { useContext, useEffect, useState } from 'preact/hooks';
+import { TemplateField, NestedObject } from '@/interfaces';
+import AppContext from '@/contexts/AppContext';
+import { StoreType } from '@/types/store';
+// import { Input } from '@/components/Input';
+import { LargeLoader } from '@/components/LargeLoader';
+import { Loader } from '@/components/Loader';
+import { MultipurposeField } from '@/components/MultipurposeField';
+import { actionFunctions } from '@/store';
+import styles from './styles.module.scss';
+
+export type DynamicFieldsProps = {
+  stepId: number;
+  dynamicField: TemplateField;
+  endpointData: string;
+  activityOutputData?: any;
+  activityOutputDataRaw?: [];
+  appName?: string;
+  sourceFlowData?: NestedObject;
+  sourceFlowIntegrataionInvocationUrl?: string;
+  selectedAuthId?: string;
+  isMappable?: boolean;
+  isEditable?: boolean;
+  allowTagsInText?: boolean;
+  placeHolder?: string;
+  refreshRootStepData?: (callback?: any) => void;
+} & StoreType;
+
+interface DynamicDataItem {
+  id: string;
+  title: string;
+}
+
+const DynamicFields = (props: DynamicFieldsProps) => {
+  const {
+    stepId,
+    dynamicField,
+    endpointData,
+    genericData,
+    activityOutputData,
+    activityOutputDataRaw,
+    appName,
+    sourceFlowData = {},
+    sourceFlowIntegrataionInvocationUrl = '',
+    selectedAuthId = '',
+    isMappable = true,
+    isEditable = true,
+    allowTagsInText = true,
+    placeHolder = '',
+    refreshRootStepData,
+  } = props;
+  const [dynamicItems, setDynamicItems] = useState<DynamicDataItem[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [
+    isErrorOnLoadingCustomFields,
+    setIsErrorOnLoadingCustomFields,
+  ] = useState<boolean>(false);
+
+  const context = useContext(AppContext);
+  const isReadOnly = context?.isReadOnly;
+
+  const fetchDynamicFields = async () => {
+    const { activity_field } = dynamicField;
+    // if configMode is true, then don't fetch dynamic items
+    // fetch dynamic items from endpoint
+    if (sourceFlowIntegrataionInvocationUrl && selectedAuthId) {
+      context?.apiHandler
+        .callSourceFlowIntegrationInvocationUrl<DynamicDataItem[]>(
+          new URL(sourceFlowIntegrataionInvocationUrl),
+          { authorization_id: selectedAuthId },
+          sourceFlowData,
+        )
+        .then((res) => {
+          if (res) {
+            if (res) {
+              if (Array.isArray(res)) {
+                setDynamicItems(res);
+              } else {
+                setDynamicItems([]);
+              }
+            } else {
+              setIsErrorOnLoadingCustomFields(true);
+              throw new Error('Nothing returned from dynamic data endpoint');
+            }
+          }
+        })
+        .catch((err) => console.error(err))
+        .finally(() => setLoading(false));
+    } else if (activity_field && activity_field.dynamic_field_src) {
+      let data;
+      try {
+        data = JSON.parse(endpointData);
+      } catch (error) {
+        data = '';
+      }
+      context?.apiHandler
+        .callDynamicDataEndpointWithTags<DynamicDataItem[]>(
+          new URL(activity_field.dynamic_field_src),
+          data,
+          activityOutputData,
+        )
+        .then((res) => {
+          if (res) {
+            if (Array.isArray(res)) {
+              setDynamicItems(res);
+            } else {
+              setDynamicItems([]);
+            }
+          } else {
+            setIsErrorOnLoadingCustomFields(true);
+          }
+        })
+        .catch((err) => console.error(err))
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  };
+
+  useEffect(() => {
+    fetchDynamicFields();
+  }, [dynamicField, endpointData, selectedAuthId]);
+
+  const getPlaceholder = () => {
+    let placeHolderValue = 'Enter text or map to fields...';
+    if (placeHolder) {
+      placeHolderValue = placeHolder;
+    } else if (appName) {
+      placeHolderValue = `Enter text or map to ${appName} fields...`;
+    }
+    return placeHolderValue;
+  };
+
+  const onChange = (machineName: string, val: string) => {
+    const results = val.match(/{([^}]+)}/g);
+    let valSubstituded = val;
+    (results || []).forEach((tag: string) => {
+      const tagCheck = tag.replace(/{|}/g, '');
+      (activityOutputDataRaw || []).forEach((arr: any) => {
+        if (arr.text === tagCheck) {
+          valSubstituded = valSubstituded.replace(tag, `{${arr.value}}`);
+        }
+      });
+    });
+
+    props.setStepMappingData({
+      stepId,
+      fieldId: dynamicField.id,
+      id: machineName,
+      value: valSubstituded,
+    });
+  };
+
+  return html`
+    <div>
+      ${loading
+        ? html`<div className=${styles.loadingText}>
+            <div class=${styles.actionFormLoader}>
+              <${Loader} />
+            </div>
+            Loading custom fields...
+          </div> `
+        : html` ${dynamicItems.map((el) => {
+            const ele = props.stepDataMapping[stepId][dynamicField.id];
+            let fieldVal = '';
+            const parsedVal = ele.objectValue as Record<
+              string,
+              string | number
+            >;
+            if (parsedVal && parsedVal[el.id]) {
+              fieldVal = `${parsedVal[el.id]}`;
+            }
+            return html`
+              <div class=${styles.dynamicFieldWrapper}>
+                <${MultipurposeField}
+                  title=${el.title}
+                  placeholder=${getPlaceholder()}
+                  value=${fieldVal}
+                  onChange=${(val: string) => {
+                    onChange(el.id, val);
+                  }}
+                  isReadOnly=${isReadOnly}
+                  type="TEXTFIELD"
+                  isMappable=${isMappable}
+                  isEditable=${isEditable}
+                  allowTagsInText=${allowTagsInText}
+                  activityOutputData=${activityOutputData}
+                  activityOutputDataRaw=${activityOutputDataRaw}
+                  refreshRootStepData=${refreshRootStepData}
+                  fieldId=${el.id || ''}
+                />
+              </div>
+            `;
+          })}`}
+      ${!isErrorOnLoadingCustomFields
+        ? ''
+        : html`<span className=${styles.noOptions}
+            >Could not load custom fields.
+            ${false
+              ? html``
+              : html` <a
+                  className=${styles.optionsRefresh}
+                  href="#"
+                  onclick=${() => {
+                    setLoading(true);
+                    setIsErrorOnLoadingCustomFields(false);
+                    fetchDynamicFields();
+                  }}
+                  >${' '}Try again?</a
+                >`}
+          </span>`}
+    </div>
+  `;
+};
+
+export default connect<DynamicFieldsProps, unknown, StoreType, unknown>(
+  [
+    'stepState',
+    'genericData',
+    'embedConfig',
+    'stepMapping',
+    'dynamicFieldData',
+    'stepDataMapping',
+    'parentChildMapping',
+  ],
+  actionFunctions,
+)(DynamicFields);

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

@@ -0,0 +1,67 @@
+.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;
+}
+
+.noOptions {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  margin-bottom: 12px;
+  display: block;
+  color: #999;
+  span.noOptionsRetry {
+    [class^='styles-module_loader_'] {
+      position: relative;
+      top: 5px;
+    }
+  }
+}
+.loadingText {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  margin-bottom: 12px;
+  color: #999;
+  display: flex;
+  .actionFormLoader {
+    margin: 0 7px 0 0;
+  }
+}
+a.optionsRefreshProminent {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px;
+  font-size: 12px;
+  line-height: 15px;
+  color: #4250f0;
+  cursor: pointer;
+  text-decoration: none;
+}
+a.optionsRefresh {
+  font-size: 12px;
+  line-height: 15px;
+  color: #4250f0;
+  cursor: pointer;
+  text-decoration: none;
+}