@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,217 @@
+import { html } from 'htm/preact';
+import { connect } from 'unistore/preact';
+import { useContext, useEffect, useState } from 'preact/hooks';
+import { DynamicField, NestedObject } from '@/interfaces';
+import AppContext from '@/contexts/AppContext';
+import { StoreType } from '@/types/store';
+import { IntegryAPI } from '@/modules/api';
+import { Input } from '@/components/Input';
+import { MultipurposeField } from '@/components/MultipurposeField';
+import { Loader } from '@/components/Loader';
+import { actionFunctions } from '@/store';
+import styles from './styles.module.scss';
+
+export type DynamicFieldsProps = {
+  stepId: number;
+  dynamicField: DynamicField;
+  endpointData: string;
+  activityOutputData?: any;
+  activityOutputDataRaw?: [];
+  appName?: string;
+  sourceFunctionData?: NestedObject;
+  sourceFlowIntegrataionInvocationUrl?: string;
+  selectedAuthId?: string;
+  isMappable?: boolean;
+  isEditable?: boolean;
+  allowTagsInText?: boolean;
+  placeHolder?: string;
+  refreshRootStepData?: (callback?: any) => void;
+  apiHandler: IntegryAPI;
+  idKeyPath?: string;
+  titleKeyPath?: string;
+  typeKeyPath?: string;
+  onChange?: (val: any) => void;
+  dataSourceBody?: any;
+  parentFieldsChanged?: boolean;
+  value?: any;
+} & StoreType;
+
+interface DynamicDataItem {
+  id: string;
+  title: string;
+  output?: any;
+  next_page?: string;
+  type?: string;
+}
+
+interface ApiResponse {
+  network_code: string;
+  output: DynamicDataItem[];
+  next_page: string;
+}
+
+const DynamicTypedFields = (props: DynamicFieldsProps) => {
+  const {
+    dynamicField,
+    endpointData,
+    sourceFunctionData = {},
+    sourceFlowIntegrataionInvocationUrl = '',
+    selectedAuthId = '',
+    dataSourceBody,
+    parentFieldsChanged,
+    activityOutputData,
+    activityOutputDataRaw,
+    value,
+    onChange,
+  } = props;
+  const [dynamicItems, setDynamicItems] = useState<DynamicDataItem[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [customFieldsData, setCustomFieldsData] = useState<any>({});
+  const [
+    isErrorOnLoadingCustomFields,
+    setIsErrorOnLoadingCustomFields,
+  ] = useState<boolean>(false);
+
+  const context = useContext(AppContext);
+  const isReadOnly = context?.isReadOnly;
+  const apiHandlerRef = context?.apiHandler || props.apiHandler;
+
+  const fetchDynamicFields = async () => {
+    if (sourceFlowIntegrataionInvocationUrl && selectedAuthId) {
+      setLoading(true);
+      setIsErrorOnLoadingCustomFields(false);
+      const requestParams: any = {
+        authorization_id: selectedAuthId,
+        connected_account_id: selectedAuthId,
+      };
+      apiHandlerRef
+        .callSourceFlowIntegrationInvocationUrl<
+          DynamicDataItem[] | ApiResponse
+        >(
+          new URL(sourceFlowIntegrataionInvocationUrl),
+          requestParams,
+          dataSourceBody,
+        )
+        .then((res) => {
+          if (res) {
+            let transformedItems: DynamicDataItem[] = [];
+
+            // Check if res is an array, if so, set it directly
+            if (Array.isArray(res)) {
+              transformedItems = res;
+            } else if (res.output && Array.isArray(res.output)) {
+              const { idKeyPath, titleKeyPath, typeKeyPath } = props; // Assuming these are passed as part of dynamicField prop
+
+              if (idKeyPath && titleKeyPath) {
+                transformedItems = res.output.map((item: any) => ({
+                  id: item[idKeyPath], // Use idKeyPath to access the ID
+                  title: item[titleKeyPath], // Use titleKeyPath to access the title
+                  type: 'TEXTFIELD', // Use typeKeyPath to access the type
+                }));
+              } else {
+                setDynamicItems([]);
+                setIsErrorOnLoadingCustomFields(true);
+                throw new Error('Nothing returned from dynamic data endpoint');
+              }
+            }
+
+            // Update dynamicItems state with transformed items
+            setDynamicItems(transformedItems);
+          } else {
+            setDynamicItems([]);
+            setIsErrorOnLoadingCustomFields(true);
+            throw new Error('Nothing returned from dynamic data endpoint');
+          }
+          setLoading(false);
+        })
+        .catch((err) => console.error(err))
+        .finally(() => setLoading(false));
+    }
+  };
+
+  useEffect(() => {
+    if (value && Object.keys(value).length > 0) {
+      setCustomFieldsData(value);
+    }
+    fetchDynamicFields();
+  }, [parentFieldsChanged]);
+
+  const onFieldChange = (id: string, val: string, type: string) => {
+    const data = {
+      ...customFieldsData,
+      [id]: val,
+    };
+    setCustomFieldsData(data);
+    if (onChange) {
+      onChange(data);
+    }
+  };
+
+  return html`
+    <div>
+      ${loading
+        ? html`<div className=${styles.loadingText}>
+            <div class=${styles.actionFormLoader}>
+              <${Loader} />
+            </div>
+            Loading custom fields...
+          </div> `
+        : html`
+            ${dynamicItems.map(
+              (el) => html`
+                <div class=${styles.dynamicFieldWrapper}>
+                  <${MultipurposeField}
+                    id="${el.id}"
+                    title="${el.title}"
+                    placeholder="${dynamicField.placeholder}"
+                    isRequired="${dynamicField.is_required}"
+                    isEditable="${dynamicField.is_editable}"
+                    fieldId=${el.id}
+                    onChange=${(val: any) => {
+                      onFieldChange(el.id, val, el.type || 'string');
+                    }}
+                    value=${customFieldsData[el.id] || ''}
+                    activityOutputData=${activityOutputData}
+                    activityOutputDataRaw=${activityOutputDataRaw}
+                    type=${el.type || 'TEXTFIELD'}
+                    isMappable=${Object.entries(activityOutputData || {})
+                      .length > 0}
+                    allowTagsInText=${true}
+                  ><//>
+                </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,
+)(DynamicTypedFields);

package/src/features/common/DynamicTypedField/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;
+}