Improvements to account feature

apps/frontend/src/components/menus/HistoryMenu/HistoryMenuButton/index.tsx

@@ -1,8 +1,16 @@
 import { ClockIcon } from "@heroicons/react/24/outline";
+import { useSelector } from "@xstate/react";
+import { useRampActor } from "../../../../contexts/rampState";
 import { useRampHistoryStore } from "../../../../stores/rampHistoryStore";
 
 export function HistoryMenuButton() {
+  const rampActor = useRampActor();
   const { isActive, actions } = useRampHistoryStore();
+  const isAuthenticated = useSelector(rampActor, state => state.context.isAuthenticated);
+
+  if (!isAuthenticated) {
+    return null;
+  }
 
   return (
     <>

apps/frontend/src/components/menus/SettingsMenu/index.tsx

@@ -34,7 +34,7 @@ const MenuItem = ({ label, onClick, icon, disabled }: MenuItemProps) => {
 };
 
 export const SettingsMenu = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const isOpen = useSettingsMenuState();
   const { closeMenu } = useSettingsMenuActions();
   const rampActor = useRampActor();
@@ -63,7 +63,7 @@ export const SettingsMenu = () => {
     },
     {
       label: t("menus.settings.item.termsAndConditions"),
-      onClick: () => handleExternalLink("https://www.vortexfinance.co/terms-conditions")
+      onClick: () => handleExternalLink(`https://www.vortexfinance.co/${i18n.language}/terms-and-conditions`)
     },
     {
       label: t("menus.settings.item.imprint"),

apps/frontend/src/components/widget-steps/AuthEmailStep/index.tsx

@@ -5,6 +5,7 @@ import * as yup from "yup";
 import { useRampActor } from "../../../contexts/rampState";
 import { cn } from "../../../helpers/cn";
 import { useQuote } from "../../../stores/quote/useQuoteStore";
+import { MenuButtons } from "../../MenuButtons";
 import { QuoteSummary } from "../../QuoteSummary";
 
 const emailSchema = yup.string().email().required();
@@ -43,6 +44,9 @@ export const AuthEmailStep = ({ className }: AuthEmailStepProps) => {
 
   return (
     <div className={cn("relative flex min-h-[506px] grow flex-col", className)}>
+      <div className="flex items-center justify-between">
+        <MenuButtons />
+      </div>
       <form className="flex flex-1 flex-col pb-36" onSubmit={handleSubmit}>
         <div className="mt-4 text-center">
           <h1 className="mb-4 font-bold text-3xl text-blue-700">{t("components.authEmailStep.title")}</h1>

apps/frontend/src/components/widget-steps/AuthOTPStep/index.tsx

@@ -6,6 +6,7 @@ import { useRampActor } from "../../../contexts/rampState";
 import { cn } from "../../../helpers/cn";
 import { useQuote } from "../../../stores/quote/useQuoteStore";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "../../InputOTP";
+import { MenuButtons } from "../../MenuButtons";
 import { QuoteSummary } from "../../QuoteSummary";
 
 export interface AuthOTPStepProps {
@@ -41,6 +42,10 @@ export function AuthOTPStep({ className }: AuthOTPStepProps) {
 
   return (
     <div className={cn("relative flex min-h-[506px] grow flex-col", className)}>
+      <div className="flex items-center justify-between">
+        <MenuButtons />
+      </div>
+
       <div className="flex-1 pb-36">
         <div className="mt-4 text-center">
           <h1 className="mb-4 font-bold text-3xl text-blue-700">{t("components.authOTPStep.title")}</h1>
@@ -56,6 +61,7 @@ export function AuthOTPStep({ className }: AuthOTPStepProps) {
             <div className="mb-4 flex justify-center">
               <InputOTP
                 autoFocus
+                containerClassName="justify-center gap-x-2 gap-y-3 max-[420px]:flex-wrap"
                 disabled={isVerifying}
                 maxLength={6}
                 onChange={handleChange}
@@ -64,13 +70,13 @@ export function AuthOTPStep({ className }: AuthOTPStepProps) {
                 ref={inputRef}
                 value={otp}
               >
-                <InputOTPGroup className="gap-2">
+                <InputOTPGroup className="justify-center gap-2">
                   <InputOTPSlot index={0} />
                   <InputOTPSlot index={1} />
                   <InputOTPSlot index={2} />
                 </InputOTPGroup>
-                <span className="mx-2 text-gray-400">-</span>
-                <InputOTPGroup className="gap-2">
+                <span className="text-gray-400 max-[420px]:hidden">-</span>
+                <InputOTPGroup className="w-auto justify-center gap-2 max-[420px]:w-full">
                   <InputOTPSlot index={3} />
                   <InputOTPSlot index={4} />
                   <InputOTPSlot index={5} />
@@ -85,15 +91,6 @@ export function AuthOTPStep({ className }: AuthOTPStepProps) {
             {isVerifying && (
               <p className="mb-4 text-center text-blue-600 text-sm">{t("components.authOTPStep.status.verifying")}</p>
             )}
-
-            <button
-              className="w-full font-medium text-blue-600 text-sm underline hover:text-blue-800 disabled:text-gray-400 disabled:no-underline"
-              disabled={isVerifying}
-              onClick={() => rampActor.send({ type: "CHANGE_EMAIL" })}
-              type="button"
-            >
-              {t("components.authOTPStep.buttons.useDifferentEmail")}
-            </button>
           </div>
         </div>
       </div>

apps/frontend/src/hooks/useStepBackNavigation.ts

@@ -15,14 +15,21 @@ export const useStepBackNavigation = () => {
   const searchParams = useSearch({ strict: false });
   const isExternalProviderEntry = !!searchParams.externalSessionId;
   const hasQuoteIdInUrl = !!searchParams.quoteId;
+  const isAuthStep =
+    rampState === "CheckAuth" ||
+    rampState === "EnterEmail" ||
+    rampState === "CheckingEmail" ||
+    rampState === "RequestingOTP" ||
+    rampState === "EnterOTP" ||
+    rampState === "VerifyingOTP";
 
   // When user removes quoteId from URL while in QuoteReady state (and they entered via form),
-  // send GO_BACK to return to Idle/Quote form
+  // send GO_BACK to return to Idle/Quote form.
   useEffect(() => {
-    if (!hasQuoteIdInUrl) {
+    if (!hasQuoteIdInUrl && rampState === "QuoteReady" && enteredViaForm) {
       rampActor.send({ type: "GO_BACK" });
     }
-  }, [rampActor, hasQuoteIdInUrl]);
+  }, [rampActor, hasQuoteIdInUrl, rampState, enteredViaForm]);
 
   const shouldHide =
     rampState === "RampFollowUp" ||
@@ -50,7 +57,7 @@ export const useStepBackNavigation = () => {
     const isQuoteReady = rampState === "QuoteReady";
     const isIdle = rampState === "Idle";
 
-    if (isQuoteReady || isIdle) {
+    if (isQuoteReady || isIdle || isAuthStep) {
       navigate({ replace: true, search: {}, to: "." });
     }