Repository: SkappHQ/skapp
Pull request #555: Fix/643: ESign Create Document
Author: login: shakyaatrootcode
Created: 2025-05-15T10:23:26Z | Merged: 2025-05-16T04:27:55Z



Diff:
diff --git a/frontend/src/community/common/components/molecules/Stepper/Stepper.tsx b/frontend/src/community/common/components/molecules/Stepper/Stepper.tsx
index 7160ba343..1b6392a0c 100644
--- a/frontend/src/community/common/components/molecules/Stepper/Stepper.tsx
+++ b/frontend/src/community/common/components/molecules/Stepper/Stepper.tsx
@@ -28,11 +28,17 @@ const StepperComponent = ({
     >
       {steps.map((label, index) => {
         return (
-          <Step key={index}>
+          <Step key={`${index}-${label}`}>
             <StepLabel
-              StepIconComponent={(props) => (
-                <CustomIcon {...props} stepNumber={`${index + 1}`} />
-              )}
+              slots={{
+                stepIcon: (props) => (
+                  <CustomIcon
+                    {...props}
+                    stepNumber={`${index + 1}`}
+                    isActive={index === activeStep}
+                  />
+                )
+              }}
             >
               {label}
             </StepLabel>
diff --git a/frontend/src/community/common/components/templates/FullPageContainerLayout/FullPageContainerLayout.tsx b/frontend/src/community/common/components/templates/FullPageContainerLayout/FullPageContainerLayout.tsx
new file mode 100644
index 000000000..05af69a2f
--- /dev/null
+++ b/frontend/src/community/common/components/templates/FullPageContainerLayout/FullPageContainerLayout.tsx
@@ -0,0 +1,99 @@
+import {
+  IconButton,
+  Stack,
+  SxProps,
+  Theme,
+  Typography,
+  useTheme
+} from "@mui/material";
+import Head from "next/head";
+import { useRouter } from "next/navigation";
+import { JSX, ReactNode } from "react";
+
+import { useTranslator } from "~community/common/hooks/useTranslator";
+import { IconName } from "~community/common/types/IconTypes";
+import { mergeSx } from "~community/common/utils/commonUtil";
+
+import Icon from "../../atoms/Icon/Icon";
+import styles from "./styles";
+
+interface Props {
+  pageHead: string;
+  icon?: {
+    name?: IconName;
+    dataTestId?: string;
+    onClick?: () => void | Promise<void>;
+    styles?: SxProps;
+  };
+  title: string;
+  stepText: string;
+  customStyles?: {
+    wrapper?: SxProps;
+    container?: SxProps;
+    header?: SxProps;
+    title?: SxProps;
+    stepText?: SxProps;
+    body?: SxProps;
+  };
+  children?: ReactNode;
+}
+
+const FullPageContainerLayout = ({
+  pageHead,
+  icon,
+  title,
+  stepText,
+  customStyles,
+  children
+}: Props): JSX.Element => {
+  const router = useRouter();
+
+  const theme: Theme = useTheme();
+  const classes = styles(theme);
+
+  const translateAria = useTranslator("commonAria", "components");
+
+  const onIconClick = () => {
+    if (icon?.onClick) {
+      icon.onClick();
+    } else {
+      router.back();
+    }
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{pageHead}</title>
+      </Head>
+      <Stack sx={mergeSx([classes.wrapper, customStyles?.wrapper])}>
+        <Stack sx={mergeSx([classes.container, customStyles?.container])}>
+          <Stack sx={mergeSx([classes.header, customStyles?.header])}>
+            <IconButton
+              tabIndex={0}
+              data-testid={icon?.dataTestId}
+              aria-label={translateAria(["backButton"])}
+              title={translateAria(["backButton"])}
+              onClick={onIconClick}
+              sx={classes.iconBtn}
+            >
+              <Icon name={icon?.name ?? IconName.CLOSE_ICON} />
+            </IconButton>
+            <Stack sx={mergeSx([classes.title, customStyles?.title])}>
+              <Typography variant="h1">{title}</Typography>
+              <Typography
+                variant="body2"
+                sx={mergeSx([classes.stepText, customStyles?.stepText])}
+              >
+                {stepText}
+              </Typography>
+            </Stack>
+          </Stack>
+          <Stack sx={mergeSx([customStyles?.body])}>{children}</Stack>
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+
+export default FullPageContainerLayout;
diff --git a/frontend/src/community/common/components/templates/FullPageContainerLayout/styles.ts b/frontend/src/community/common/components/templates/FullPageContainerLayout/styles.ts
new file mode 100644
index 000000000..ac3743709
--- /dev/null
+++ b/frontend/src/community/common/components/templates/FullPageContainerLayout/styles.ts
@@ -0,0 +1,47 @@
+import { Theme } from "@mui/material";
+
+import { StyleProps } from "~community/common/types/CommonTypes";
+
+const styles = (theme: Theme): StyleProps => ({
+  wrapper: {
+    height: "max-content",
+    width: "100%",
+    overflowY: "auto"
+  },
+  container: {
+    height: "100%",
+    width: "100%",
+    maxWidth: "103.125rem",
+    padding: {
+      xs: "1.875rem 2rem",
+      lg: "1.875rem 3rem"
+    },
+    margin: "0rem auto"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: "0.75rem",
+    width: "100%"
+  },
+  iconBtn: {
+    width: "2.25rem",
+    height: "2.25rem",
+    backgroundColor: theme.palette.grey[100],
+    border: `0.0625rem solid ${theme.palette.grey[300]}`,
+    borderRadius: "100%",
+    "&:hover": {
+      backgroundColor: theme.palette.grey[200]
+    }
+  },
+  title: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: "0.75rem"
+  },
+  stepText: {
+    color: theme.palette.primary.dark
+  }
+});
+
+export default styles;


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This pull request introduces a new full-page container layout and updates the stepper component to improve document signing functionality in the ESign Create Document flow.
- Adds a new styled full-page container layout component.
- Implements a customizable layout with responsive design considerations.
- Updates the stepper component to use a new slots API for the step icon.

### Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

| File | Description |
| ---- | ----------- |
| frontend/src/community/common/components/templates/FullPageContainerLayout/styles.ts | Introduces a new style module with responsive and themed design properties. |
| frontend/src/community/common/components/templates/FullPageContainerLayout/FullPageContainerLayout.tsx | Implements the layout component and leverages the new styles and utilities. |
| frontend/src/community/common/components/molecules/Stepper/Stepper.tsx | Updates the stepper component to use a slots API and a revised key for better React reconciliation. |




state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-15T10:40:26Z
user: login: ThinuwanW
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T04:27:49Z

Review comments:
diff_hunk: @@ -28,11 +28,17 @@ const StepperComponent = ({
     >
       {steps.map((label, index) => {
         return (
-          <Step key={index}>
+          <Step key={label}>
path: frontend/src/community/common/components/molecules/Stepper/Stepper.tsx
user: login: Copilot
body: [nitpick] Ensure that the 'label' used as the key is unique for each step; if there's any risk of duplication, consider using a unique identifier instead.
```suggestion
          <Step key={`${index}-${label}`}>
```
created_at: 2025-05-15T10:40:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,99 @@
+import {
+  IconButton,
+  Stack,
+  SxProps,
+  Theme,
+  Typography,
+  useTheme
+} from "@mui/material";
+import Head from "next/head";
+import { useRouter } from "next/navigation";
+import { JSX } from "react";
+
+import { useTranslator } from "~community/common/hooks/useTranslator";
+import { IconName } from "~community/common/types/IconTypes";
+import { mergeSx } from "~community/common/utils/commonUtil";
+
+import Icon from "../../atoms/Icon/Icon";
+import styles from "./styles";
+
+interface Props {
+  pageHead: string;
+  icon?: {
+    name?: IconName;
+    dataTestId?: string;
+    onClick?: () => void | Promise<void>;
+    styles?: SxProps;
+  };
+  title: string;
+  stepText: string;
+  customStyles?: {
+    wrapper?: SxProps;
+    container?: SxProps;
+    header?: SxProps;
+    title?: SxProps;
+    stepText?: SxProps;
+    body?: SxProps;
+  };
+  children?: JSX.Element;
path: frontend/src/community/common/components/templates/FullPageContainerLayout/FullPageContainerLayout.tsx
user: login: Copilot
body: [nitpick] Consider updating the 'children' prop type to 'React.ReactNode' to allow multiple children rather than a single JSX element.
```suggestion
  children?: React.ReactNode;
```
created_at: 2025-05-15T10:40:26Z
author_association: CONTRIBUTOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-05-16T04:27:27Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=SkappHQ_skapp-fe&pullRequest=555) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [1 New issue](https://sonarcloud.io/project/issues?id=SkappHQ_skapp-fe&pullRequest=555&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=SkappHQ_skapp-fe&pullRequest=555&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=SkappHQ_skapp-fe&pullRequest=555&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=SkappHQ_skapp-fe&pullRequest=555&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=SkappHQ_skapp-fe&pullRequest=555&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=SkappHQ_skapp-fe&pullRequest=555)


author_association: NONE