Cleanup pass 2

app/components/modals/ModalFooter/ModalFooter.container.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { memo } from "react";
+import { useTranslation } from "../../../contexts/MessagesContext";
 import { ModalFooterView } from "./ModalFooter.view";
 import type { ModalFooterProps } from "./ModalFooter.types";
 
@@ -10,7 +11,17 @@ import type { ModalFooterProps } from "./ModalFooter.types";
  * primary/secondary actions.
  */
 const ModalFooterContainer = memo<ModalFooterProps>((props) => {
-  return <ModalFooterView {...props} />;
+  const t = useTranslation("common");
+  const resolvedBackText = props.backButtonText ?? t("buttons.back");
+  const resolvedNextText = props.nextButtonText ?? t("buttons.next");
+
+  return (
+    <ModalFooterView
+      {...props}
+      backButtonText={resolvedBackText}
+      nextButtonText={resolvedNextText}
+    />
+  );
 });
 
 ModalFooterContainer.displayName = "ModalFooter";

app/components/modals/ModalFooter/ModalFooter.view.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useTranslation } from "../../../contexts/MessagesContext";
 import Button from "../../buttons/Button";
 import Stepper from "../../progress/Stepper";
 import type { ModalFooterProps } from "./ModalFooter.types";
@@ -19,14 +18,6 @@ export function ModalFooterView({
   footerContent,
   className = "",
 }: ModalFooterProps) {
-  const t = useTranslation("common");
-
-  // Use localized defaults if text not provided
-  const defaultBackText = backButtonText || t("buttons.back");
-  const defaultNextText = nextButtonText || t("buttons.next");
-
-  // Determine if stepper should be shown
-  // Defaults to true if currentStep and totalSteps are provided, unless explicitly set to false
   const shouldShowStepper =
     stepperProp !== undefined
       ? stepperProp
@@ -36,7 +27,6 @@ export function ModalFooterView({
     <div
       className={`h-[64px] bg-[var(--color-surface-default-primary)] rounded-bl-[var(--radius-300,12px)] rounded-br-[var(--radius-300,12px)] shrink-0 relative ${className}`}
     >
-      {/* Back Button - Absolutely positioned bottom left */}
       {showBackButton && (
         <div className="absolute left-[16px] top-[12px]">
           <Button
@@ -45,19 +35,17 @@ export function ModalFooterView({
             size="medium"
             onClick={onBack}
           >
-            {defaultBackText}
+            {backButtonText}
           </Button>
         </div>
       )}
 
-      {/* Stepper (Centered) */}
       {shouldShowStepper && currentStep && totalSteps && (
         <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
           <Stepper active={currentStep} totalSteps={totalSteps} />
         </div>
       )}
 
-      {/* Next Button - Absolutely positioned bottom right */}
       {showNextButton && (
         <div className="absolute right-[16px] top-[12px]">
           <Button
@@ -67,12 +55,11 @@ export function ModalFooterView({
             onClick={onNext}
             disabled={nextButtonDisabled}
           >
-            {defaultNextText}
+            {nextButtonText}
           </Button>
         </div>
       )}
 
-      {/* Custom Footer Content */}
       {footerContent}
     </div>
   );