@integry/sdk 4.7.39 → 4.7.41

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

@@ -1,12 +0,0 @@
-.stepsWrap {
-  width: 100%;
-}
-
-.stepWrap {
-  margin-bottom: 30px;
-}
-
-.unsupported {
-  font-size: 12px;
-  color: #ca8c1b;
-}

package/src/features/common/StepNavigation/CollapsedSteps.ts

@@ -1,131 +0,0 @@
-import { html } from 'htm/preact';
-import { useRef, useState } from 'preact/hooks';
-import { StepStateStep } from '@/types/store';
-import { useOnClickOutside } from '@/hooks/useOnClickOutside';
-
-import { NavItem } from './NavItem';
-
-import styles from './styles.module.scss';
-
-interface CollapsedStepsProps {
-  isPreviewMode?: boolean;
-  currentStepIndex: number;
-  changeStep(index: number): void;
-  steps: StepStateStep[];
-  isReadOnly?: boolean;
-}
-
-const CollapsedSteps = (props: CollapsedStepsProps) => {
-  const {
-    steps,
-    currentStepIndex,
-    isPreviewMode,
-    changeStep,
-    isReadOnly = false,
-  } = props;
-
-  const collapseRef = useRef<HTMLDivElement | null>(null);
-  const dotsRef = useRef<HTMLDivElement>();
-
-  const [showCollapsed, setShowCollapsed] = useState(false);
-
-  useOnClickOutside(collapseRef, () =>
-    showCollapsed ? setShowCollapsed(false) : null,
-  );
-
-  // useEffect(() => {
-  //   const onMouseOver = () => {
-  //     setShowCollapsed(true);
-  //   };
-  //   const onMouseLeave = () => {
-  //     setShowCollapsed(false);
-  //   };
-  //   dotsRef.current?.addEventListener('mouseenter', onMouseOver);
-  //   collapseRef.current?.addEventListener('mouseleave', onMouseLeave);
-
-  //   return () => {
-  //     dotsRef.current?.removeEventListener('mouseenter', onMouseOver);
-  //     collapseRef.current?.removeEventListener('mouseleave', onMouseLeave);
-  //   };
-  // }, []);
-
-  return html`
-    <div class=${styles.collapse}>
-      <div
-        class=${styles.dots}
-        ref=${dotsRef}
-        onclick=${() => setShowCollapsed(true)}
-      >
-        <svg
-          width="16"
-          height="17"
-          viewBox="0 0 16 17"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M3.60039 9.83213C4.26313 9.83213 4.80039 9.29487 4.80039 8.63213C4.80039 7.96939 4.26313 7.43213 3.60039 7.43213C2.93765 7.43213 2.40039 7.96939 2.40039 8.63213C2.40039 9.29487 2.93765 9.83213 3.60039 9.83213Z"
-            fill="#333333"
-          />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M7.60039 9.83213C8.26313 9.83213 8.80039 9.29487 8.80039 8.63213C8.80039 7.96939 8.26313 7.43213 7.60039 7.43213C6.93765 7.43213 6.40039 7.96939 6.40039 8.63213C6.40039 9.29487 6.93765 9.83213 7.60039 9.83213Z"
-            fill="#333333"
-          />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M11.6004 9.83213C12.2631 9.83213 12.8004 9.29487 12.8004 8.63213C12.8004 7.96939 12.2631 7.43213 11.6004 7.43213C10.9376 7.43213 10.4004 7.96939 10.4004 8.63213C10.4004 9.29487 10.9376 9.83213 11.6004 9.83213Z"
-            fill="#333333"
-          />
-        </svg>
-      </div>
-      <div
-        ref=${collapseRef}
-        class="${styles.popup} ${showCollapsed ? styles.show : ''}"
-      >
-        ${steps.map(
-          (el) => html`<div class=${styles.stepItem}>
-            <${NavItem}
-              label=${el.type !== 'CONFIRMATION' ? el.title : 'Confirmation'}
-              logoUrl=${el.type !== 'CONFIRMATION' && el.iconUrl}
-              isCompleted=${!isPreviewMode && el.isCompleted}
-              isActive=${el.type !== 'CONFIRMATION' &&
-              currentStepIndex === el.itemIndex}
-              isDisabled=${(isPreviewMode &&
-                Number(currentStepIndex) !== el.itemIndex) ||
-              Number(currentStepIndex) < el.itemIndex}
-              isLastStep=${false}
-              showArrow=${false}
-              onClick=${() => {
-                setShowCollapsed(false);
-                changeStep(el.itemIndex);
-              }}
-              isReadOnly=${isReadOnly}
-            />
-          </div>`,
-        )}
-      </div>
-      <div class=${styles.arrow}>
-        <svg
-          width="6"
-          height="11"
-          viewBox="0 0 6 11"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M0.917969 1.33366L5.08464 5.50033L0.917969 9.66699"
-            stroke="#999999"
-            stroke-linecap="round"
-          />
-        </svg>
-      </div>
-    </div>
-  `;
-};
-
-export { CollapsedSteps };

package/src/features/common/StepNavigation/NavItem.ts

@@ -1,111 +0,0 @@
-import { html, Component } from 'htm/preact';
-
-import styles from './styles.module.scss';
-
-type NavItemProps = {
-  label: string;
-  logoUrl?: string;
-  isDisabled?: boolean;
-  isActive?: boolean;
-  isCompleted?: boolean;
-  isLastStep?: boolean;
-  showArrow?: boolean;
-  onClick?(): void;
-  isReadOnly?: boolean;
-};
-
-const TickMark = html` <svg
-  width="15"
-  height="15"
-  viewBox="0 0 15 15"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect opacity="0.7" width="15" height="15" rx="7.5" fill="#2ECC71" />
-  <path
-    d="M9.23107 6.34619L6.96066 8.94234L5.76953 7.58033"
-    stroke="white"
-    stroke-width="1.2"
-    stroke-linecap="round"
-  />
-</svg>`;
-
-const FinalTickMark = html`
-  <svg
-    width="15"
-    height="15"
-    viewBox="0 0 15 15"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      cx="7.5"
-      cy="7.5"
-      r="6.75"
-      fill="white"
-      stroke="#2ECC71"
-      stroke-width="1.5"
-    />
-    <path
-      d="M10.3333 5.5L6.83522 9.5L5 7.40148"
-      stroke="#2ECC71"
-      stroke-width="1.5"
-      stroke-linecap="round"
-    />
-  </svg>
-`;
-
-class NavItem extends Component<NavItemProps> {
-  render() {
-    const {
-      logoUrl,
-      isActive = false,
-      isCompleted = false,
-      isDisabled = false,
-      isLastStep = false,
-      onClick = () => null,
-      showArrow = true,
-      isReadOnly = false,
-    } = this.props;
-    return html`
-      <div
-        class=${`${styles.navItem} ${isDisabled ? styles.disabled : ''} ${
-          isActive ? styles.active : ''} ${!isActive && isReadOnly ? styles.disabled : ''}`}
-        onclick=${onClick}
-        tabindex="-1"
-        role="button"
-      >
-        <div class=${styles.navItemContent}>
-          <div class=${styles.imgContainer}>
-            ${!(isCompleted && !isActive) || isReadOnly
-              ? html`<img src=${logoUrl} />`
-              : TickMark}
-            ${!isReadOnly && isLastStep && FinalTickMark}
-          </div>
-          <p>${this.props.label}</p>
-          ${!isLastStep &&
-          showArrow &&
-          html`
-            <div class=${styles.arrow}>
-              <svg
-                width="6"
-                height="11"
-                viewBox="0 0 6 11"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M0.917969 1.33366L5.08464 5.50033L0.917969 9.66699"
-                  stroke="#999999"
-                  stroke-linecap="round"
-                />
-              </svg>
-            </div>
-          `}
-        </div>
-      </div>
-    `;
-  }
-}
-
-export { NavItem, NavItemProps };

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

@@ -1,261 +0,0 @@
-import { html } from 'htm/preact';
-import { useContext, useState, useEffect, useRef } from 'preact/hooks';
-import { connect } from 'unistore/preact';
-import { StepStateStep, StoreType } from '@/types/store';
-
-import AppContext from '@/contexts/AppContext';
-import { actionFunctions } from '@/store';
-import useElementResize from '@/hooks/useElementResize';
-import useDebounce from '@/hooks/useDebounce';
-
-import { NavItem } from './NavItem';
-import { CollapsedSteps } from './CollapsedSteps';
-
-import styles from './styles.module.scss';
-
-export type StepNavigationProps = StoreType;
-
-interface ParsedStep {
-  type: 'VISIBLE' | 'COLLAPSED';
-  steps: StepStateStep[];
-}
-
-const StepNavigation = (props: StepNavigationProps) => {
-  const MAX_STEP_WIDTH = 220;
-
-  const wrapRef = useRef<HTMLDivElement | null>(null);
-  const {
-    gotoStep,
-    stepState: {
-      stepIndex: currentStepIndex,
-      steps,
-      currentStep: step,
-      allStepsCompleted,
-    },
-  } = props;
-  const context = useContext(AppContext);
-  const isReadOnly = context?.isReadOnly;
-
-  const { width } = useElementResize(wrapRef);
-
-  const debouncedWidth = useDebounce(width, 150);
-
-  const [parsedSteps, setParsedSteps] = useState<ParsedStep[]>([]);
-
-  useEffect(() => {
-    let widthToUse = 0;
-    // immediately use width and then use debounded value
-    if (debouncedWidth === 0) widthToUse = width;
-    else widthToUse = debouncedWidth;
-
-    let composedArray: ParsedStep[] = [];
-
-    if (wrapRef.current) {
-      // console.log('Width of step container:', debouncedWidth);
-      // console.log('Max width:', MAX_STEP_WIDTH);
-      // console.log('Number of steps:', steps.length);
-
-      const stepsToShow = widthToUse / MAX_STEP_WIDTH;
-      // console.log('step_width / MAX_WIDTH:', stepsToShow);
-
-      let itemIndex = -1;
-      let stepsLength = steps.length;
-      if (isReadOnly) {
-        stepsLength = steps.length - 1;
-      }
-
-      if (stepsToShow <= stepsLength) {
-        // const canShowComfortably = Math.floor(stepsToShow);
-        // console.log(
-        //   'Collapsed state enabled since we can only show:',
-        //   canShowComfortably,
-        // );
-        if (stepsLength <= 2) {
-          // simple template with upto 2 steps, always show all
-          // console.log(
-          //   'Simple template with upto three steps, always show all three',
-          // );
-          // first and second, and confirmation step are always shown.
-          composedArray.push({
-            type: 'VISIBLE',
-            steps: steps.map((el) => {
-              itemIndex += 1;
-              return {
-                ...el,
-                itemIndex,
-              };
-            }),
-          });
-        } else if (stepsLength > 2) {
-          itemIndex += 1;
-
-          // now we have to check logic
-          // console.log(
-          //   'Template has more than 3 steps, checking collapse states',
-          // );
-          // if index is not first or last
-          // always show first step
-          composedArray.push({
-            type: 'VISIBLE',
-            steps: [{ ...steps[0], itemIndex }],
-          });
-
-          if (currentStepIndex !== 0 && currentStepIndex !== stepsLength) {
-            // check middle cases
-            if (currentStepIndex > 1) {
-              // console.log('More steps on the left exist');
-              composedArray.push({
-                type: 'COLLAPSED',
-                steps: steps.slice(1, currentStepIndex).map((el) => {
-                  itemIndex += 1;
-                  return { ...el, itemIndex };
-                }),
-              });
-            }
-
-            // add the current step in every case
-            composedArray.push({
-              type: 'VISIBLE',
-              steps: [
-                { ...steps[currentStepIndex], itemIndex: currentStepIndex },
-              ],
-            });
-            itemIndex += 1;
-
-            if (stepsLength - currentStepIndex > 1) {
-              // console.log('More steps on the right exist');
-              composedArray.push({
-                type: 'COLLAPSED',
-                steps: steps
-                  .slice(currentStepIndex + 1, stepsLength)
-                  .map((el) => {
-                    itemIndex += 1;
-                    return {
-                      ...el,
-                      itemIndex,
-                    };
-                  }),
-              });
-            }
-          } else {
-            itemIndex += 1;
-            //  check if more Visible steps can be added
-            composedArray.push({
-              type: 'VISIBLE',
-              steps: [{ ...steps[itemIndex], itemIndex }],
-            });
-
-            // console.log('Show first, last, collapsed steps in middle');
-            composedArray.push({
-              type: 'COLLAPSED',
-              steps: steps.slice(itemIndex + 1, stepsLength).map((el) => {
-                itemIndex += 1;
-                return { ...el, itemIndex };
-              }),
-            });
-          }
-          if (isReadOnly) {
-            // add the last step always for readOnly mode
-            composedArray.push({
-              type: 'VISIBLE',
-              steps: [{ ...steps[stepsLength], itemIndex: stepsLength }],
-            });
-          }
-        }
-      } else {
-        // console.log('Showing all');
-        composedArray = [
-          {
-            type: 'VISIBLE',
-            steps: steps.map((el, idx) => ({
-              ...el,
-              itemIndex: idx,
-            })),
-          },
-        ];
-      }
-    }
-    // console.log({
-    //   composedArray,
-    // });
-    setParsedSteps(composedArray);
-  }, [steps, width, debouncedWidth, currentStepIndex]);
-
-  const changeStep = (stepIndex: number) => {
-    gotoStep(stepIndex);
-  };
-
-  return html`
-    <div
-      class="${styles.navigation} ${'integry-steps-navigation'}"
-      ref=${wrapRef}
-    >
-      ${parsedSteps.map((parent) => {
-        if (parent.type === 'VISIBLE') {
-          return parent.steps.map(
-            (el) => html`
-              <div
-                class=${styles.stepItem}
-                style=${{
-                  maxWidth: MAX_STEP_WIDTH,
-                }}
-              >
-                <${NavItem}
-                  label=${el.type !== 'CONFIRMATION'
-                    ? el.title
-                    : 'Confirmation'}
-                  logoUrl=${el.type !== 'CONFIRMATION' && el.iconUrl}
-                  isCompleted=${!context?.isPreviewMode && el.isCompleted}
-                  isActive=${step?.type !== 'CONFIRMATION' &&
-                  el.type !== 'CONFIRMATION' &&
-                  currentStepIndex === el.itemIndex}
-                  isDisabled=${!allStepsCompleted &&
-                  ((context?.isPreviewMode &&
-                    Number(currentStepIndex) !== el.itemIndex) ||
-                    Number(currentStepIndex) < el.itemIndex)}
-                  isLastStep=${isReadOnly
-                    ? el.itemIndex === steps.length - 1
-                    : el.itemIndex === steps.length}
-                  onClick=${() => changeStep(el.itemIndex)}
-                  isReadOnly=${isReadOnly}
-                />
-              </div>
-            `,
-          );
-        }
-        if (parent.type === 'COLLAPSED') {
-          return html`
-            <${CollapsedSteps}
-              isPreviewMode=${context?.isPreviewMode}
-              currentStepIndex=${currentStepIndex}
-              changeStep=${changeStep}
-              steps=${parent.steps}
-              isReadOnly=${isReadOnly}
-            />
-          `;
-        }
-        return html`<></>`;
-      })}
-      ${parsedSteps.length > 0 &&
-      !isReadOnly &&
-      html`
-        <${NavItem}
-          label="Confirmation"
-          logoUrl=""
-          isCompleted=${true}
-          isActive=${step !== undefined && currentStepIndex === steps.length}
-          isDisabled=${!allStepsCompleted &&
-          step !== undefined &&
-          currentStepIndex !== steps.length}
-          isLastStep=${true}
-          onClick=${() => changeStep(steps.length ?? 0)}
-        />
-      `}
-    </div>
-  `;
-};
-
-export default connect<StepNavigationProps, unknown, StoreType, unknown>(
-  'stepState',
-  actionFunctions,
-)(StepNavigation);

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

@@ -1,117 +0,0 @@
-.navigation {
-  margin-bottom: 20px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
-
-.collapse {
-  display: flex;
-  width: 30px;
-  height: 20px;
-  padding-top: 0px;
-  align-items: center;
-  margin-right: 18px;
-  .dots {
-    cursor: pointer;
-    height: 16px;
-    padding-right: 0px;
-    svg {
-      vertical-align: unset;
-    }
-  }
-  .popup {
-    position: absolute;
-    display: none;
-    padding: 0 10px;
-    background: #ffffff;
-    border: 1px solid #f3f3f3;
-    box-shadow: 0px 2px 7px rgba(162, 162, 162, 0.25);
-    border-radius: 4px;
-    top: 28px;
-    z-index: 100;
-    &.show {
-      display: block;
-    }
-    .stepItem {
-      padding: 10px 0px;
-      &:not(:last-child) {
-        border-bottom: 1px solid #f3f3f3;
-      }
-    }
-  }
-  .arrow {
-    margin-top: 0px;
-    margin-left: 0.75rem;
-    margin-right: 0.5rem;
-    svg {
-      opacity: 0.5;
-      vertical-align: unset;
-    }
-  }
-}
-
-.navItem {
-  cursor: pointer;
-  color: rgba(31, 41, 55, 1);
-
-  .navItemContent {
-    display: flex;
-    align-items: center;
-    padding-right: 0.25rem;
-    p {
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: 12px;
-      font-weight: 400;
-      color: #333333;
-    }
-    .imgContainer {
-      position: relative;
-      margin-right: 0.5rem;
-      height: 15px;
-      width: 15px;
-      overflow: hidden;
-      border-radius: 9999px;
-      img,
-      svg {
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        height: 100%;
-        width: 100%;
-        object-fit: cover;
-      }
-    }
-  }
-  .arrow {
-    margin-top: 0px;
-    margin-left: 0.75rem;
-    margin-right: 0.5rem;
-    svg {
-      vertical-align: unset;
-    }
-  }
-
-  &.active {
-    opacity: 1;
-    p {
-      font-weight: 500;
-    }
-  }
-
-  &.disabled {
-    user-select: none;
-    opacity: 0.5;
-    p {
-      font-weight: 400;
-    }
-  }
-  // &.showDisabledIcon {
-  //   cursor: not-allowed;
-  // }
-}