@integry/sdk 4.5.2 → 4.5.4

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

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

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

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

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

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

@@ -0,0 +1,117 @@
+.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;
+  // }
+}