Walk Create Community through the Figma screens and restore a chosen logo after reload, so a guest can leave without saving until they reach the email step.

app/(app)/create/screens/text/CreateFlowTextFieldScreen.tsx

@@ -6,6 +6,7 @@ import TextArea from "../../../../components/controls/TextArea";
 import type { HeaderLockupJustificationValue } from "../../../../components/type/HeaderLockup/HeaderLockup.types";
 import { useTranslation } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
+import { useCreateFlowContinueAttempt } from "../../context/CreateFlowContinueAttemptContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import {
@@ -14,6 +15,7 @@ import {
 } from "../../components/CreateFlowStepShell";
 import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "../../components/createFlowLayoutTokens";
 import { CREATE_FLOW_COMMUNITY_SAVE_FORM_ID } from "../../utils/createFlowPaths";
+import { isValidCreateFlowSaveEmail } from "../../../../../lib/create/isValidCreateFlowSaveEmail";
 import type { CreateFlowTextStateField } from "../../types";
 
 type Props = {
@@ -31,6 +33,9 @@ type Props = {
   headerJustification?: HeaderLockupJustificationValue;
   /** Top spacing under top chrome (`CreateFlowStepShell` / `CreateFlowContentTopBelowMd`). */
   contentTopBelowMd?: CreateFlowContentTopBelowMd;
+  autoFocus?: boolean;
+  /** Optional city/region field under the description. */
+  locationField?: boolean;
 };
 
 /**
@@ -47,35 +52,38 @@ export function CreateFlowTextFieldScreen({
   showCharacterCount = true,
   headerJustification = "left",
   contentTopBelowMd = "space-1400",
+  autoFocus = false,
+  locationField = false,
 }: Props) {
   const { markCreateFlowInteraction, updateState, state } = useCreateFlow();
+  const { attempted } = useCreateFlowContinueAttempt();
   const mdUp = useCreateFlowMdUp();
   const t = useTranslation(messageNamespace);
 
-  const readFromState = (): string => {
-    const raw = state[stateField];
+  const readFromState = (field: CreateFlowTextStateField): string => {
+    const raw = state[field];
     return typeof raw === "string" ? raw : "";
   };
 
-  const [value, setValue] = useState(() => readFromState());
+  const [value, setValue] = useState(() => readFromState(stateField));
+  const [locationValue, setLocationValue] = useState(() =>
+    readFromState("communityLocation"),
+  );
 
   useEffect(() => {
-    const incoming = readFromState();
+    const incoming = readFromState(stateField);
     if (incoming.length === 0) return;
     // eslint-disable-next-line react-hooks/set-state-in-effect -- sync when context hydrates from server/local
     setValue((prev) => (prev === "" ? incoming : prev));
   }, [state, stateField]);
 
-  const characterCount = value.length;
-  const hint =
-    showCharacterCount === false
-      ? false
-      : t("characterCountTemplate")
-          .replace("{current}", String(characterCount))
-          .replace("{max}", String(maxLength));
-
-  const mainItems =
-    mainAlign === "center" ? "items-center" : "items-start";
+  useEffect(() => {
+    if (!locationField) return;
+    const incoming = readFromState("communityLocation");
+    if (incoming.length === 0) return;
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- sync when context hydrates from server/local
+    setLocationValue((prev) => (prev === "" ? incoming : prev));
+  }, [locationField, state]);
 
   const isEmail = inputType === "email";
   const persistValue = (next: string) => {
@@ -83,6 +91,42 @@ export function CreateFlowTextFieldScreen({
     markCreateFlowInteraction();
     updateState({ [stateField]: next } as Record<string, string>);
   };
+  const persistLocation = (next: string) => {
+    setLocationValue(next);
+    markCreateFlowInteraction();
+    updateState({ communityLocation: next });
+  };
+
+  const nameError =
+    required &&
+    !isEmail &&
+    !multiline &&
+    attempted &&
+    value.trim().length === 0;
+  const emailError =
+    isEmail &&
+    attempted &&
+    !isValidCreateFlowSaveEmail(value);
+  const showFieldError = nameError || emailError;
+  const errorCopy = nameError
+    ? t("errorMessage")
+    : emailError
+      ? t("errorMessage")
+      : "";
+
+  const characterCount = value.length;
+  const hint = showFieldError
+    ? errorCopy
+    : isEmail
+      ? t("skipHint")
+      : showCharacterCount === false
+        ? false
+        : t("characterCountTemplate")
+            .replace("{current}", String(characterCount))
+            .replace("{max}", String(maxLength));
+
+  const mainItems =
+    mainAlign === "center" ? "items-center" : "items-start";
 
   const fieldLabel = t("inputLabel");
 
@@ -101,7 +145,7 @@ export function CreateFlowTextFieldScreen({
             justification={headerJustification}
           />
         </div>
-        <div className="w-full">
+        <div className="flex w-full flex-col gap-[var(--space-800)]">
           {multiline ? (
             <TextArea
               className="!transition-none"
@@ -119,6 +163,7 @@ export function CreateFlowTextFieldScreen({
               textHint={hint}
               maxLength={maxLength}
               required={required}
+              autoFocus={autoFocus}
               rows={4}
             />
           ) : (
@@ -149,13 +194,33 @@ export function CreateFlowTextFieldScreen({
               formHeader={false}
               showHelpIcon={false}
               textHint={hint}
+              error={showFieldError}
               maxLength={maxLength}
               required={required || isEmail}
               autoComplete={isEmail ? "email" : undefined}
               inputMode={isEmail ? "email" : undefined}
               form={isEmail ? CREATE_FLOW_COMMUNITY_SAVE_FORM_ID : undefined}
+              autoFocus={autoFocus}
             />
           )}
+          {locationField ? (
+            <TextInput
+              className="!transition-none"
+              type="text"
+              label={t("locationLabel")}
+              placeholder={t("locationPlaceholder")}
+              value={locationValue}
+              onChange={(e) => persistLocation(e.target.value)}
+              onBlur={() => {
+                const trimmed = locationValue.trim();
+                if (trimmed !== locationValue) persistLocation(trimmed);
+              }}
+              inputSize={mdUp ? "medium" : "small"}
+              formHeader
+              showHelpIcon={false}
+              textHint={t("locationHint")}
+            />
+          ) : null}
         </div>
       </div>
     </CreateFlowStepShell>