Invite people after review, then finish the Rule, with login before inviting and Invite your members on Profile.

app/components/modals/Login/LoginForm.tsx

@@ -44,7 +44,11 @@ function MailIconInline() {
 
 const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
-export type LoginFormVariant = "default" | "saveProgress" | "keepRule";
+export type LoginFormVariant =
+  | "default"
+  | "saveProgress"
+  | "keepRule"
+  | "invite";
 
 function loginFormHeading(
   variant: LoginFormVariant,
@@ -66,6 +70,12 @@ function loginFormHeading(
       description: t("keepRuleSubtitle"),
     };
   }
+  if (variant === "invite") {
+    return {
+      title: t("inviteTitle"),
+      description: t("inviteSubtitle"),
+    };
+  }
   return { title: t("title"), description: t("subtitle") };
 }
 
@@ -74,7 +84,11 @@ function shouldAttachCreateFlowDraft(
   nextPath: string,
 ): boolean {
   if (variant === "keepRule") return false;
-  return variant === "saveProgress" || nextPath.includes("syncDraft=1");
+  return (
+    variant === "saveProgress" ||
+    variant === "invite" ||
+    nextPath.includes("syncDraft=1")
+  );
 }
 
 export type LoginFormProps = {
@@ -266,46 +280,48 @@ export default function LoginForm({
               {emailError}
             </p>
           ) : null}
-          <Button
-            type="submit"
-            size="large"
-            buttonType="filled"
-            palette="default"
-            disabled={submitting}
-            className="w-full !justify-center text-center px-[var(--space-400)] py-[var(--space-300)]"
-          >
-            {t("sendMagicLink")}
-          </Button>
-          {onDismiss ? (
+          <div className="flex flex-col gap-4 max-md:sticky max-md:bottom-0 max-md:bg-[var(--color-surface-default-primary)] max-md:pt-2">
             <Button
-              type="button"
+              type="submit"
               size="large"
-              buttonType="ghost"
+              buttonType="filled"
               palette="default"
               disabled={submitting}
-              onClick={onDismiss}
               className="w-full !justify-center text-center px-[var(--space-400)] py-[var(--space-300)]"
             >
-              {t("continueWithoutSaving")}
+              {t("sendMagicLink")}
             </Button>
-          ) : null}
-          <p className="text-center text-small-paragraph text-[var(--color-content-default-tertiary)]">
-            {t("legalPrefix")}
-            <Link
-              href={tFooter("legal.termsOfServiceHref")}
-              className="text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2"
-            >
-              {tFooter("legal.termsOfService")}
-            </Link>
-            {t("legalAnd")}
-            <Link
-              href={tFooter("legal.privacyPolicyHref")}
-              className="text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2"
-            >
-              {tFooter("legal.privacyPolicy")}
-            </Link>
-            {t("legalSuffix")}
-          </p>
+            {onDismiss ? (
+              <Button
+                type="button"
+                size="large"
+                buttonType="ghost"
+                palette="default"
+                disabled={submitting}
+                onClick={onDismiss}
+                className="w-full !justify-center text-center px-[var(--space-400)] py-[var(--space-300)]"
+              >
+                {t("continueWithoutSaving")}
+              </Button>
+            ) : null}
+            <p className="text-center text-small-paragraph text-[var(--color-content-default-tertiary)]">
+              {t("legalPrefix")}
+              <Link
+                href={tFooter("legal.termsOfServiceHref")}
+                className="text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2"
+              >
+                {tFooter("legal.termsOfService")}
+              </Link>
+              {t("legalAnd")}
+              <Link
+                href={tFooter("legal.privacyPolicyHref")}
+                className="text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2"
+              >
+                {tFooter("legal.privacyPolicy")}
+              </Link>
+              {t("legalSuffix")}
+            </p>
+          </div>
         </form>
       ) : null}
     </div>