From 7259677c9b4745a9128527c971bddeb72b8f3813 Mon Sep 17 00:00:00 2001
From: albertfolch-redeemeum
 <102516373+albertfolch-redeemeum@users.noreply.github.com>
Date: Wed, 22 May 2024 18:21:45 +0200
Subject: [PATCH] fix: modal inner scroll (#739)

---
 .../react-kit/src/components/modal/Modal.tsx  |  4 +-
 .../PurchaseOverview/PurchaseOverview.tsx     | 24 +++------
 .../components/modal/nonModal/NonModal.tsx    |  4 +-
 .../components/widgets/MarginContainer.tsx    | 50 +++++++++++++++++++
 .../widgets/commit/CommitWidget.tsx           | 25 +++-------
 .../widgets/redemption/RedemptionWidget.tsx   |  6 ++-
 .../src/stories/widgets/Commit.stories.tsx    |  4 +-
 7 files changed, 74 insertions(+), 43 deletions(-)
 create mode 100644 packages/react-kit/src/components/widgets/MarginContainer.tsx

diff --git a/packages/react-kit/src/components/modal/Modal.tsx b/packages/react-kit/src/components/modal/Modal.tsx
index 6032e23cb..d157e5083 100644
--- a/packages/react-kit/src/components/modal/Modal.tsx
+++ b/packages/react-kit/src/components/modal/Modal.tsx
@@ -19,6 +19,7 @@ const Root = styled.div`
   left: 0;
   right: 0;
   z-index: ${zIndex.Modal};
+  max-height: inherit;
 `;
 
 const RootBG = styled.div`
@@ -90,8 +91,7 @@ const Wrapper = styled.div<{
 }>`
   display: flex;
   flex-direction: column;
-  max-height: 96vh;
-  overflow: auto;
+  max-height: inherit;
   position: relative;
   z-index: ${zIndex.Modal};
   color: ${({ $themeVal }) => {
diff --git a/packages/react-kit/src/components/modal/components/PurchaseOverview/PurchaseOverview.tsx b/packages/react-kit/src/components/modal/components/PurchaseOverview/PurchaseOverview.tsx
index ac6b3959a..00942c33b 100644
--- a/packages/react-kit/src/components/modal/components/PurchaseOverview/PurchaseOverview.tsx
+++ b/packages/react-kit/src/components/modal/components/PurchaseOverview/PurchaseOverview.tsx
@@ -1,9 +1,9 @@
-import React, { ReactNode, useCallback } from "react";
-import { PurchaseOverviewView } from "../common/StepsOverview/PurchaseOverviewView";
-import NonModal from "../../nonModal/NonModal";
-import { BosonLogo } from "../common/BosonLogo";
-import { theme } from "../../../../theme";
+import React from "react";
 import { CSSProperties } from "styled-components";
+import { theme } from "../../../../theme";
+import { MarginContainer } from "../../../widgets/MarginContainer";
+import NonModal from "../../nonModal/NonModal";
+import { PurchaseOverviewView } from "../common/StepsOverview/PurchaseOverviewView";
 const colors = theme.colors.light;
 
 export type PurchaseOverviewProps = {
@@ -17,18 +17,8 @@ export const PurchaseOverview: React.FC<PurchaseOverviewProps> = ({
   hideModal,
   modalMargin
 }) => {
-  const Wrapper = useCallback(
-    ({ children }: { children: ReactNode }) => {
-      return lookAndFeel === "regular" ? (
-        <>{children}</>
-      ) : (
-        <div style={{ margin: modalMargin }}>{children}</div>
-      );
-    },
-    [lookAndFeel, modalMargin]
-  );
   return (
-    <Wrapper>
+    <MarginContainer lookAndFeel={lookAndFeel} modalMargin={modalMargin}>
       <NonModal
         hideModal={hideModal}
         footerComponent={null}
@@ -40,6 +30,6 @@ export const PurchaseOverview: React.FC<PurchaseOverviewProps> = ({
       >
         <PurchaseOverviewView />
       </NonModal>
-    </Wrapper>
+    </MarginContainer>
   );
 };
diff --git a/packages/react-kit/src/components/modal/nonModal/NonModal.tsx b/packages/react-kit/src/components/modal/nonModal/NonModal.tsx
index 0edb2ed56..823031d20 100644
--- a/packages/react-kit/src/components/modal/nonModal/NonModal.tsx
+++ b/packages/react-kit/src/components/modal/nonModal/NonModal.tsx
@@ -23,6 +23,7 @@ const Root = styled.div`
   left: 0;
   right: 0;
   z-index: ${zIndex.Modal};
+  max-height: inherit;
 `;
 
 const RootBG = styled.div`
@@ -93,8 +94,7 @@ const Wrapper = styled.div<{
 }>`
   display: flex;
   flex-direction: column;
-  max-height: 96vh;
-  overflow: auto;
+  max-height: inherit;
   position: relative;
   z-index: ${zIndex.Modal};
   color: ${({ $themeVal }) => {
diff --git a/packages/react-kit/src/components/widgets/MarginContainer.tsx b/packages/react-kit/src/components/widgets/MarginContainer.tsx
new file mode 100644
index 000000000..1478af621
--- /dev/null
+++ b/packages/react-kit/src/components/widgets/MarginContainer.tsx
@@ -0,0 +1,50 @@
+import React, { ReactNode, useLayoutEffect, useRef, useState } from "react";
+import styled, { CSSProperties, css } from "styled-components";
+
+const StyledContainer = styled.div<{
+  $margin: CSSProperties["margin"];
+  $marginVertical: string;
+}>`
+  ${({ $margin, $marginVertical }) => css`
+    margin: ${$margin};
+    max-height: calc(100vh - ${$marginVertical});
+    overflow: hidden;
+    > * {
+      max-height: inherit;
+    }
+  `}
+`;
+export type MarginContainerProps = {
+  children: ReactNode;
+  lookAndFeel: "regular" | "modal";
+  modalMargin?: CSSProperties["margin"];
+};
+export function MarginContainer({
+  lookAndFeel,
+  modalMargin,
+  children
+}: MarginContainerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [marginVertical, setMarginVertical] = useState("");
+
+  useLayoutEffect(() => {
+    if (containerRef.current) {
+      const { marginTop, marginBottom } = window.getComputedStyle(
+        containerRef.current
+      );
+      setMarginVertical(`(${marginTop} + ${marginBottom})`);
+    }
+  }, [containerRef, modalMargin]);
+  return lookAndFeel === "regular" ? (
+    <>{children}</>
+  ) : (
+    <StyledContainer
+      $margin={modalMargin}
+      data-margin
+      ref={containerRef}
+      $marginVertical={marginVertical}
+    >
+      {children}
+    </StyledContainer>
+  );
+}
diff --git a/packages/react-kit/src/components/widgets/commit/CommitWidget.tsx b/packages/react-kit/src/components/widgets/commit/CommitWidget.tsx
index 8424cae57..81230c3a7 100644
--- a/packages/react-kit/src/components/widgets/commit/CommitWidget.tsx
+++ b/packages/react-kit/src/components/widgets/commit/CommitWidget.tsx
@@ -1,13 +1,14 @@
-import React, { ComponentType, ReactNode, useCallback } from "react";
+import React, { ComponentType } from "react";
+import { CSSProperties } from "styled-components";
 import { ButtonProps } from "../../buttons/Button";
 import { CommitNonModalProps } from "../../modal/components/Commit/CommitNonModal";
+import GlobalStyle from "../../styles/GlobalStyle";
+import { MarginContainer } from "../MarginContainer";
 import { CommitModalWithOffer } from "./CommitModalWithOffer";
 import {
   CommitWidgetProviders,
   CommitWidgetProvidersProps
 } from "./CommitWidgetProviders";
-import GlobalStyle from "../../styles/GlobalStyle";
-import { CSSProperties } from "styled-components";
 
 type CommitProps = {
   buttonProps?: Omit<ButtonProps, "onClick">;
@@ -34,26 +35,14 @@ type CommitProps = {
   };
 export type CommitWidgetProps = CommitProps &
   Omit<CommitWidgetProvidersProps, "withReduxProvider" | "provider">;
-export function CommitWidget(props: CommitWidgetProps) {
-  const Container = useCallback(
-    ({ children }: { children: ReactNode }) => {
-      return props.lookAndFeel === "regular" ? (
-        <>{children}</>
-      ) : (
-        <div style={{ margin: props.modalMargin }}>{children}</div>
-      );
-    },
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    [props.lookAndFeel, props.modalMargin]
-  );
 
+export function CommitWidget(props: CommitWidgetProps) {
   return (
-    <Container>
+    <MarginContainer {...props}>
       <CommitWidgetProviders {...props} withReduxProvider>
         <GlobalStyle />
         <CommitModalWithOffer {...props} hideModal={props.closeWidgetClick} />
       </CommitWidgetProviders>
-    </Container>
+    </MarginContainer>
   );
 }
diff --git a/packages/react-kit/src/components/widgets/redemption/RedemptionWidget.tsx b/packages/react-kit/src/components/widgets/redemption/RedemptionWidget.tsx
index 3e1aee8cc..98bae199f 100644
--- a/packages/react-kit/src/components/widgets/redemption/RedemptionWidget.tsx
+++ b/packages/react-kit/src/components/widgets/redemption/RedemptionWidget.tsx
@@ -8,6 +8,7 @@ import {
   RedemptionWidgetProvidersProps
 } from "./RedemptionWidgetProviders";
 import { CSSProperties } from "styled-components";
+import { MarginContainer } from "../MarginContainer";
 
 type RedemptionProps = {
   buttonProps?: Omit<ButtonProps, "onClick">;
@@ -15,6 +16,7 @@ type RedemptionProps = {
 } & Omit<RedeemNonModalProps, "exchange" | "hideModal" | "parentOrigin"> & {
     exchangeId?: string;
     closeWidgetClick?: () => void;
+    lookAndFeel: "regular" | "modal";
     modalMargin?: CSSProperties["margin"];
   };
 
@@ -30,7 +32,7 @@ export function RedemptionWidget(props: RedemptionWidgetProps) {
     ? props.signatures
     : undefined;
   return (
-    <div style={{ margin: props.modalMargin || "0" }}>
+    <MarginContainer {...props}>
       <RedemptionWidgetProviders {...props}>
         <RedeemModalWithExchange
           {...props}
@@ -40,6 +42,6 @@ export function RedemptionWidget(props: RedemptionWidgetProps) {
           hideModal={props.closeWidgetClick}
         />
       </RedemptionWidgetProviders>
-    </div>
+    </MarginContainer>
   );
 }
diff --git a/packages/react-kit/src/stories/widgets/Commit.stories.tsx b/packages/react-kit/src/stories/widgets/Commit.stories.tsx
index a78a9d584..4a1e0451d 100644
--- a/packages/react-kit/src/stories/widgets/Commit.stories.tsx
+++ b/packages/react-kit/src/stories/widgets/Commit.stories.tsx
@@ -43,8 +43,8 @@ Commit.args = {
   defaultSelectedOfferId: "",
   disableVariationsSelects: false,
   bundleUuid: "",
-  productUuid: "086b32-3fcd-00d1-0624-67513e85415c", // with size variations
-  sellerId: "138",
+  productUuid: "f4bb0f8-2f2c-d151-2801-0d3c6250461", // with size variations
+  sellerId: "4",
   metaTx: {
     apiKey: process.env.STORYBOOK_DATA_META_TX_API_KEY as string,
     apiIds: process.env.STORYBOOK_DATA_META_TX_API_IDS as string