From 7292b11c0b40853a12c5bdd02931f9a3edbfbf00 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Tue, 14 Apr 2026 20:35:37 +0100
Subject: [PATCH] feat(member): account/profile polish + tier upgrade flow

- Timezone: curated USelectMenu dropdown (app/config/timezones.js), preserves unknown saved values
- Profile save now uses useToast() for success/error; remove inline save banner
- Nav onboarding dot nudged down 1px for optical alignment with lowercase text
- Onboarding: skip a suggestion with POST /api/onboarding/track {skip}; member.onboarding.skipped map; does not affect graduation
- CirclePicker takes :saved-value so 'Current' badge stays until save completes
- PrivacyToggle is binary (USwitch labeled Private); member schema enum reduced to ['members','private']; zod coerces legacy 'public'
- New /member/payment-setup page: HelcimPay $0 verify + update-contribution, wired from account.vue via requiresPaymentSetup redirect
- Helcim portal: NUXT_PUBLIC_HELCIM_PORTAL_URL env + account.vue 'Manage billing in Helcim' link
- Migration script: scripts/migrate-privacy-public-to-members.js
---
 app/components/AppNavigation.vue              |   1 +
 app/components/CirclePicker.vue               |  12 +-
 app/components/OnboardingWidget.vue           |  31 ++-
 app/components/PrivacyToggle.vue              |  72 +++----
 app/composables/useOnboarding.js              |  54 ++++-
 app/config/timezones.js                       |  39 ++++
 app/pages/member/account.vue                  |  48 ++++-
 app/pages/member/payment-setup.vue            | 189 ++++++++++++++++++
 app/pages/member/profile.vue                  |  67 +++----
 nuxt.config.ts                                |   1 +
 server/api/onboarding/status.get.js           |   8 +
 server/api/onboarding/track.post.js           |  10 +-
 server/models/member.js                       |  24 ++-
 server/utils/schemas.js                       |  12 +-
 .../client/composables/useOnboarding.test.js  |  80 ++++++++
 tests/server/api/onboarding-status.test.js    |  31 +++
 tests/server/api/onboarding-track.test.js     |  39 ++++
 tests/server/api/validation.test.js           |   8 +-
 18 files changed, 604 insertions(+), 122 deletions(-)
 create mode 100644 app/config/timezones.js
 create mode 100644 app/pages/member/payment-setup.vue

diff --git a/app/components/AppNavigation.vue b/app/components/AppNavigation.vue
index 1add2ef..e1c9c80 100644
--- a/app/components/AppNavigation.vue
+++ b/app/components/AppNavigation.vue
@@ -339,5 +339,6 @@ const exploreItems = [
   background: var(--candle);
   margin-left: 6px;
   vertical-align: middle;
+  transform: translateY(-1px);
 }
 </style>
diff --git a/app/components/CirclePicker.vue b/app/components/CirclePicker.vue
index 227bb3c..6a8e1e4 100644
--- a/app/components/CirclePicker.vue
+++ b/app/components/CirclePicker.vue
@@ -4,13 +4,16 @@
       v-for="circle in circles"
       :key="circle.value"
       class="circle-option"
-      :class="{ current: modelValue === circle.value }"
+      :class="{
+        selected: modelValue === circle.value,
+        current: savedValue === circle.value,
+      }"
       @click="$emit('update:modelValue', circle.value)"
     >
       <span class="circle-name">{{ circle.label }}</span>
       <span class="circle-desc">{{ circle.description }}</span>
       <span
-        v-if="modelValue === circle.value"
+        v-if="savedValue === circle.value"
         class="circle-tag"
         :style="{ color: `var(--c-${circle.value})`, borderColor: `var(--c-${circle.value})` }"
       >Current</span>
@@ -21,6 +24,7 @@
 <script setup>
 defineProps({
   modelValue: { type: String, default: '' },
+  savedValue: { type: String, default: '' },
   circles: {
     type: Array,
     default: () => [
@@ -54,7 +58,7 @@ defineEmits(['update:modelValue'])
   background: var(--surface-hover);
 }
 
-.circle-option.current {
+.circle-option.selected {
   border-color: var(--candle);
   border-style: solid;
   background: var(--surface);
@@ -67,7 +71,7 @@ defineEmits(['update:modelValue'])
   margin-bottom: 4px;
 }
 
-.circle-option.current .circle-name {
+.circle-option.selected .circle-name {
   color: var(--candle);
 }
 
diff --git a/app/components/OnboardingWidget.vue b/app/components/OnboardingWidget.vue
index cc1fb21..97c246d 100644
--- a/app/components/OnboardingWidget.vue
+++ b/app/components/OnboardingWidget.vue
@@ -26,6 +26,12 @@
         <div class="ow-progress">
           <span class="ow-bar"><span class="ow-bar-fill">{{ barFill }}</span><span class="ow-bar-empty">{{ barEmpty }}</span></span>
           {{ completedCount }} of 4 explored
+          <button
+            v-if="currentSuggestion.key"
+            type="button"
+            class="ow-skip"
+            @click="handleSkip"
+          >Skip this</button>
         </div>
       </template>
 
@@ -62,7 +68,12 @@
 </template>
 
 <script setup>
-const { goals, isComplete, currentSuggestion, trackGoal, loading } = useOnboarding()
+const { goals, isComplete, currentSuggestion, trackGoal, skipSuggestion, loading } = useOnboarding()
+
+const handleSkip = () => {
+  const key = currentSuggestion.value?.key
+  if (key) skipSuggestion(key)
+}
 
 const completedCount = computed(() => {
   const g = goals.value
@@ -144,4 +155,22 @@ const barEmpty = computed(() => '-'.repeat((4 - completedCount.value) * 2) + ']'
 .ow-bar-empty {
   color: rgba(237, 228, 208, 0.2);
 }
+
+.ow-skip {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: var(--parch-text-dim);
+  font-family: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+  text-decoration-style: dashed;
+  text-underline-offset: 2px;
+}
+
+.ow-skip:hover {
+  color: var(--parch-accent);
+}
 </style>
diff --git a/app/components/PrivacyToggle.vue b/app/components/PrivacyToggle.vue
index 2245e1a..23a2566 100644
--- a/app/components/PrivacyToggle.vue
+++ b/app/components/PrivacyToggle.vue
@@ -1,66 +1,44 @@
 <template>
-  <div class="priv segmented">
-    <span
-      v-for="opt in options"
-      :key="opt.value"
-      :class="{ on: modelValue === opt.value }"
-      @click="$emit('update:modelValue', opt.value)"
-      >{{ opt.label }}</span
-    >
-  </div>
+  <label class="priv">
+    <USwitch
+      :model-value="isPrivate"
+      aria-label="Private"
+      size="xs"
+      @update:model-value="onChange"
+    />
+    <span class="priv-label">Private</span>
+  </label>
 </template>
 
 <script setup>
-defineProps({
-  modelValue: { type: String, default: "public" },
+const props = defineProps({
+  modelValue: { type: String, default: "members" },
 });
 
-defineEmits(["update:modelValue"]);
+const emit = defineEmits(["update:modelValue"]);
 
-const options = [
-  { label: "Public", value: "public" },
-  { label: "Members", value: "members" },
-  { label: "Private", value: "private" },
-];
+// Treat legacy "public" values as "members" (visible to signed-in members).
+const isPrivate = computed(() => props.modelValue === "private");
+
+const onChange = (val) => {
+  emit("update:modelValue", val ? "private" : "members");
+};
 </script>
 
 <style scoped>
 .priv {
   display: inline-flex;
-  gap: 0;
-  font-size: 9px;
-  font-family: "Commit Mono", monospace;
-  letter-spacing: 0.02em;
-}
-
-.priv span {
-  padding: 2px 7px;
-  height: 18px;
-  display: flex;
   align-items: center;
-  justify-content: center;
-  border: 1px dashed var(--border);
+  gap: 6px;
+  font-size: 10px;
+  font-family: "Commit Mono", monospace;
+  letter-spacing: 0.04em;
   color: var(--text-faint);
-  cursor: pointer;
-  transition: all 0.12s;
   user-select: none;
-  white-space: nowrap;
-  position: relative;
+  cursor: pointer;
 }
 
-.priv span + span {
-  margin-left: -1px;
-}
-
-.priv span:hover {
-  color: var(--text-dim);
-}
-
-.priv span.on {
-  background: var(--surface);
-  color: var(--text-bright);
-  border-color: var(--candle);
-  border-style: solid;
-  z-index: 1;
+.priv-label {
+  line-height: 1;
 }
 </style>
diff --git a/app/composables/useOnboarding.js b/app/composables/useOnboarding.js
index e457f28..4ccb345 100644
--- a/app/composables/useOnboarding.js
+++ b/app/composables/useOnboarding.js
@@ -10,6 +10,13 @@ export function useOnboarding(options = {}) {
     hasClickedWiki: false,
   }))
 
+  const skipped = useState('onboarding.skipped', () => ({
+    profileTags: false,
+    visitEvent: false,
+    board: false,
+    wiki: false,
+  }))
+
   const completedAt = useState('onboarding.completedAt', () => null)
   const loading = useState('onboarding.loading', () => false)
   const recommendations = useState('onboarding.recommendations', () => ({
@@ -20,12 +27,21 @@ export function useOnboarding(options = {}) {
   // Track whether we've already fetched status this session
   const _fetched = useState('onboarding._fetched', () => false)
 
+  // For the purpose of advancing the suggestion widget, a skipped goal is
+  // treated as "done" — the underlying goal/graduation check is unchanged.
+  const effectiveGoals = computed(() => ({
+    hasProfileTags: goals.value.hasProfileTags || skipped.value.profileTags,
+    hasVisitedEvent: goals.value.hasVisitedEvent || skipped.value.visitEvent,
+    hasEngagedBoard: goals.value.hasEngagedBoard || skipped.value.board,
+    hasClickedWiki: goals.value.hasClickedWiki || skipped.value.wiki,
+  }))
+
   const isComplete = computed(() =>
     !!completedAt.value ||
-    (goals.value.hasProfileTags &&
-    goals.value.hasVisitedEvent &&
-    goals.value.hasEngagedBoard &&
-    goals.value.hasClickedWiki)
+    (effectiveGoals.value.hasProfileTags &&
+    effectiveGoals.value.hasVisitedEvent &&
+    effectiveGoals.value.hasEngagedBoard &&
+    effectiveGoals.value.hasClickedWiki)
   )
 
   const pickCategory = options.pickCategory || ((categories) => {
@@ -33,9 +49,9 @@ export function useOnboarding(options = {}) {
   })
 
   const currentSuggestion = computed(() => {
-    // Not graduated — return highest-priority incomplete goal
+    // Not graduated — return highest-priority incomplete, non-skipped goal
     if (!isComplete.value) {
-      if (!goals.value.hasProfileTags) {
+      if (!effectiveGoals.value.hasProfileTags) {
         return {
           key: 'profileTags',
           text: 'Complete your profile by adding your craft and community tags',
@@ -43,7 +59,7 @@ export function useOnboarding(options = {}) {
           actionText: 'Set up tags',
         }
       }
-      if (!goals.value.hasVisitedEvent) {
+      if (!effectiveGoals.value.hasVisitedEvent) {
         return {
           key: 'visitEvent',
           text: 'Check out upcoming events',
@@ -51,7 +67,7 @@ export function useOnboarding(options = {}) {
           actionText: 'Browse events',
         }
       }
-      if (!goals.value.hasEngagedBoard) {
+      if (!effectiveGoals.value.hasEngagedBoard) {
         return {
           key: 'board',
           text: 'Explore the board to find collaborators',
@@ -59,7 +75,7 @@ export function useOnboarding(options = {}) {
           actionText: 'Explore board',
         }
       }
-      if (!goals.value.hasClickedWiki) {
+      if (!effectiveGoals.value.hasClickedWiki) {
         return {
           key: 'wiki',
           text: 'Browse the wiki for resources and guides',
@@ -118,6 +134,9 @@ export function useOnboarding(options = {}) {
       if (data?.goals) {
         goals.value = { ...goals.value, ...data.goals }
       }
+      if (data?.skipped) {
+        skipped.value = { ...skipped.value, ...data.skipped }
+      }
       if (data?.completedAt) {
         completedAt.value = data.completedAt
       }
@@ -157,6 +176,21 @@ export function useOnboarding(options = {}) {
     }
   }
 
+  async function skipSuggestion(key) {
+    // Optimistically advance locally; server call is fire-and-forget.
+    if (skipped.value[key] !== undefined) {
+      skipped.value = { ...skipped.value, [key]: true }
+    }
+    try {
+      await $fetch('/api/onboarding/track', {
+        method: 'POST',
+        body: { skip: key },
+      })
+    } catch {
+      // Non-fatal — will re-fetch on next session
+    }
+  }
+
   // Initialize on first use
   fetchStatus()
 
@@ -166,6 +200,8 @@ export function useOnboarding(options = {}) {
     completedAt: readonly(completedAt),
     currentSuggestion,
     trackGoal,
+    skipSuggestion,
+    skipped: readonly(skipped),
     recommendations: readonly(recommendations),
     loading: readonly(loading),
   }
diff --git a/app/config/timezones.js b/app/config/timezones.js
new file mode 100644
index 0000000..fa35923
--- /dev/null
+++ b/app/config/timezones.js
@@ -0,0 +1,39 @@
+// Curated IANA timezone options for the profile editor.
+// Grouped roughly by region; values are standard IANA identifiers.
+export const TIMEZONE_OPTIONS = [
+  // Americas
+  { label: 'Pacific — Los Angeles', value: 'America/Los_Angeles' },
+  { label: 'Pacific — Vancouver', value: 'America/Vancouver' },
+  { label: 'Mountain — Denver', value: 'America/Denver' },
+  { label: 'Mountain — Edmonton', value: 'America/Edmonton' },
+  { label: 'Central — Chicago', value: 'America/Chicago' },
+  { label: 'Central — Mexico City', value: 'America/Mexico_City' },
+  { label: 'Eastern — Toronto', value: 'America/Toronto' },
+  { label: 'Eastern — New York', value: 'America/New_York' },
+  { label: 'Atlantic — Halifax', value: 'America/Halifax' },
+  { label: 'Newfoundland — St. John’s', value: 'America/St_Johns' },
+  { label: 'Brazil — São Paulo', value: 'America/Sao_Paulo' },
+  { label: 'Argentina — Buenos Aires', value: 'America/Argentina/Buenos_Aires' },
+
+  // Europe / Africa
+  { label: 'UTC', value: 'UTC' },
+  { label: 'UK — London', value: 'Europe/London' },
+  { label: 'Ireland — Dublin', value: 'Europe/Dublin' },
+  { label: 'Central Europe — Berlin', value: 'Europe/Berlin' },
+  { label: 'Central Europe — Paris', value: 'Europe/Paris' },
+  { label: 'Central Europe — Madrid', value: 'Europe/Madrid' },
+  { label: 'Eastern Europe — Helsinki', value: 'Europe/Helsinki' },
+  { label: 'Africa — Lagos', value: 'Africa/Lagos' },
+  { label: 'Africa — Johannesburg', value: 'Africa/Johannesburg' },
+
+  // Asia / Oceania
+  { label: 'Middle East — Dubai', value: 'Asia/Dubai' },
+  { label: 'India — Kolkata', value: 'Asia/Kolkata' },
+  { label: 'Southeast Asia — Bangkok', value: 'Asia/Bangkok' },
+  { label: 'China — Shanghai', value: 'Asia/Shanghai' },
+  { label: 'Japan — Tokyo', value: 'Asia/Tokyo' },
+  { label: 'Korea — Seoul', value: 'Asia/Seoul' },
+  { label: 'Australia — Sydney', value: 'Australia/Sydney' },
+  { label: 'Australia — Perth', value: 'Australia/Perth' },
+  { label: 'New Zealand — Auckland', value: 'Pacific/Auckland' },
+];
diff --git a/app/pages/member/account.vue b/app/pages/member/account.vue
index 44a8f30..c69f561 100644
--- a/app/pages/member/account.vue
+++ b/app/pages/member/account.vue
@@ -68,6 +68,15 @@
                   }}</span>
                 </div>
               </div>
+              <a
+                v-if="helcimPortalUrl && memberData.helcimCustomerId"
+                :href="helcimPortalUrl"
+                target="_blank"
+                rel="noopener"
+                class="billing-link"
+              >
+                Manage billing in Helcim &rarr;
+              </a>
             </PageSection>
 
             <PageSection divider="top">
@@ -178,6 +187,7 @@
 
               <CirclePicker
                 v-model="selectedCircle"
+                :saved-value="memberData.circle"
                 :circles="circleOptions"
               />
               <button
@@ -204,6 +214,7 @@ definePageMeta({
 const { memberData, checkMemberStatus } = useAuth();
 const { openLoginModal } = useLoginModal();
 const toast = useToast();
+const helcimPortalUrl = useRuntimeConfig().public.helcimPortalUrl || '';
 
 const selectedTier = ref(0);
 const selectedCircle = ref("");
@@ -276,13 +287,22 @@ const handleUpdateTier = async () => {
       body: { contributionTier: String(selectedTier.value) },
     });
     await checkMemberStatus();
-    toast.add({ title: "Contribution updated", color: "green" });
+    toast.add({ title: "Contribution updated", color: "success" });
   } catch (err) {
+    // Paid upgrade without a saved card — route to payment setup instead of erroring.
+    if (err.data?.data?.requiresPaymentSetup) {
+      await navigateTo(
+        `/member/payment-setup?tier=${selectedTier.value}&circle=${
+          selectedCircle.value || memberData.value?.circle || 'community'
+        }`,
+      );
+      return;
+    }
     selectedTier.value = Number(memberData.value?.contributionTier || 0);
     toast.add({
       title: "Update failed",
       description: err.data?.statusMessage || "Please try again.",
-      color: "red",
+      color: "error",
     });
   } finally {
     isUpdating.value = false;
@@ -297,13 +317,13 @@ const handleUpdateCircle = async () => {
       body: { circle: selectedCircle.value },
     });
     await checkMemberStatus();
-    toast.add({ title: "Circle updated", color: "green" });
+    toast.add({ title: "Circle updated", color: "success" });
   } catch (err) {
     selectedCircle.value = memberData.value?.circle || "community";
     toast.add({
       title: "Update failed",
       description: err.data?.statusMessage || "Please try again.",
-      color: "red",
+      color: "error",
     });
   } finally {
     isUpdating.value = false;
@@ -326,12 +346,12 @@ const handleUpdateEmail = async () => {
     });
     await checkMemberStatus();
     cancelEmailEdit();
-    toast.add({ title: "Email updated", color: "green" });
+    toast.add({ title: "Email updated", color: "success" });
   } catch (err) {
     toast.add({
       title: "Update failed",
       description: err.data?.statusMessage || "Please try again.",
-      color: "red",
+      color: "error",
     });
   } finally {
     isUpdatingEmail.value = false;
@@ -359,13 +379,13 @@ const confirmCancelMembership = async () => {
         color: "neutral",
       });
     } else {
-      toast.add({ title: "Membership cancelled", color: "orange" });
+      toast.add({ title: "Membership cancelled", color: "warning" });
     }
   } catch (err) {
     toast.add({
       title: "Cancellation failed",
       description: err.data?.statusMessage || "Please try again.",
-      color: "red",
+      color: "error",
     });
   } finally {
     isCancelling.value = false;
@@ -528,4 +548,16 @@ const confirmCancelMembership = async () => {
   text-align: center;
 }
 
+.billing-link {
+  display: inline-block;
+  margin-top: 10px;
+  font-size: 12px;
+  color: var(--candle);
+  text-decoration: none;
+}
+
+.billing-link:hover {
+  text-decoration: underline;
+}
+
 </style>
diff --git a/app/pages/member/payment-setup.vue b/app/pages/member/payment-setup.vue
new file mode 100644
index 0000000..98f78ca
--- /dev/null
+++ b/app/pages/member/payment-setup.vue
@@ -0,0 +1,189 @@
+<template>
+  <PageShell>
+    <ClientOnly>
+      <PageHeader
+        title="Set Up Payment"
+        :subtitle="targetTier ? `Upgrading to $${targetTier}/month` : 'Payment setup'"
+      />
+
+      <ColumnsLayout cols="1">
+        <PageSection>
+          <div v-if="step === 'loading'" class="status-block">
+            <p>Preparing payment setup…</p>
+          </div>
+
+          <div v-else-if="step === 'error'" class="status-block">
+            <div class="error-box">{{ errorMessage }}</div>
+            <div class="button-row">
+              <button class="btn" @click="initialize">Try again</button>
+              <NuxtLink to="/member/account" class="btn">Back to account</NuxtLink>
+            </div>
+          </div>
+
+          <div v-else-if="step === 'ready'" class="status-block">
+            <p>
+              To upgrade to <strong>${{ targetTier }}/month</strong>, we need a
+              payment method on file. Click below to open the secure payment
+              form — we'll verify your card with a $0 authorization and then
+              activate your new tier.
+            </p>
+            <div v-if="errorMessage" class="error-box">{{ errorMessage }}</div>
+            <div class="button-row">
+              <button
+                class="btn btn-primary"
+                :disabled="isProcessing"
+                @click="openModal"
+              >
+                {{ isProcessing ? 'Processing…' : 'Enter payment details' }}
+              </button>
+              <NuxtLink to="/member/account" class="btn">Cancel</NuxtLink>
+            </div>
+          </div>
+
+          <div v-else-if="step === 'success'" class="status-block">
+            <p>Payment setup complete. Redirecting to your account…</p>
+          </div>
+        </PageSection>
+      </ColumnsLayout>
+    </ClientOnly>
+  </PageShell>
+</template>
+
+<script setup>
+definePageMeta({ middleware: 'auth' });
+
+const route = useRoute();
+const router = useRouter();
+const toast = useToast();
+const { memberData, checkMemberStatus } = useAuth();
+const { initializeHelcimPay, verifyPayment, cleanup: cleanupHelcim } = useHelcimPay();
+
+const VALID_TIERS = ['5', '15', '30', '50'];
+const VALID_CIRCLES = ['community', 'founder', 'practitioner'];
+
+const targetTier = computed(() => {
+  const t = String(route.query.tier || '');
+  return VALID_TIERS.includes(t) ? t : null;
+});
+const targetCircle = computed(() => {
+  const c = String(route.query.circle || '');
+  return VALID_CIRCLES.includes(c) ? c : null;
+});
+
+const step = ref('loading'); // loading | ready | success | error
+const errorMessage = ref('');
+const isProcessing = ref(false);
+const customerId = ref('');
+const customerCode = ref('');
+
+const initialize = async () => {
+  errorMessage.value = '';
+  step.value = 'loading';
+
+  if (!targetTier.value) {
+    errorMessage.value = 'Missing or invalid target tier.';
+    step.value = 'error';
+    return;
+  }
+
+  try {
+    const customer = await $fetch('/api/helcim/get-or-create-customer', {
+      method: 'POST',
+    });
+    customerId.value = customer.customerId;
+    customerCode.value = customer.customerCode;
+
+    await initializeHelcimPay(customerId.value, customerCode.value, 0);
+    step.value = 'ready';
+  } catch (err) {
+    console.error('Payment setup init failed:', err);
+    errorMessage.value =
+      err.data?.statusMessage || err.message || 'Failed to initialize payment.';
+    step.value = 'error';
+  }
+};
+
+const openModal = async () => {
+  if (isProcessing.value) return;
+  isProcessing.value = true;
+  errorMessage.value = '';
+
+  try {
+    const result = await verifyPayment();
+    if (!result?.success) throw new Error('Payment was not completed.');
+
+    await $fetch('/api/helcim/verify-payment', {
+      method: 'POST',
+      body: {
+        cardToken: result.cardToken,
+        customerId: customerId.value,
+      },
+    });
+
+    // Update circle first if it changed — update-contribution only touches tier.
+    if (targetCircle.value && targetCircle.value !== memberData.value?.circle) {
+      await $fetch('/api/members/update-circle', {
+        method: 'POST',
+        body: { circle: targetCircle.value },
+      });
+    }
+
+    await $fetch('/api/members/update-contribution', {
+      method: 'POST',
+      body: { contributionTier: targetTier.value },
+    });
+
+    await checkMemberStatus();
+    step.value = 'success';
+    toast.add({ title: 'Payment method saved', color: 'success' });
+    setTimeout(() => router.push('/member/account'), 1500);
+  } catch (err) {
+    console.error('Payment setup error:', err);
+    errorMessage.value =
+      err.data?.statusMessage || err.message || 'Payment setup failed.';
+    // Re-initialize Helcim session so the user can try again.
+    cleanupHelcim();
+    await initialize();
+  } finally {
+    isProcessing.value = false;
+  }
+};
+
+onMounted(() => {
+  initialize();
+});
+
+onBeforeUnmount(() => {
+  cleanupHelcim();
+});
+
+useHead({ title: 'Set Up Payment - Ghost Guild' });
+</script>
+
+<style scoped>
+.status-block {
+  padding: 12px 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text);
+}
+
+.status-block p {
+  margin-bottom: 16px;
+}
+
+.error-box {
+  padding: 12px 14px;
+  border: 1px dashed var(--ember);
+  color: var(--ember);
+  font-size: 12px;
+  margin-bottom: 16px;
+}
+
+.button-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+</style>
diff --git a/app/pages/member/profile.vue b/app/pages/member/profile.vue
index 0e0364a..f24aad0 100644
--- a/app/pages/member/profile.vue
+++ b/app/pages/member/profile.vue
@@ -65,10 +65,14 @@
               </div>
               <div class="field">
                 <label>Timezone</label>
-                <input
+                <USelectMenu
                   v-model="formData.timeZone"
-                  type="text"
-                  placeholder="e.g., America/Toronto"
+                  :items="timezoneItems"
+                  value-key="value"
+                  searchable
+                  searchable-placeholder="Search timezones..."
+                  placeholder="Select a timezone"
+                  class="timezone-select"
                 />
                 <PrivacyToggle v-model="formData.timeZonePrivacy" />
               </div>
@@ -242,12 +246,6 @@
         <button type="button" class="btn" @click="resetForm">
           Reset Changes
         </button>
-        <span v-if="saveSuccess" class="save-msg save-msg-ok"
-          >Profile updated.</span
-        >
-        <span v-if="saveError" class="save-msg save-msg-err">{{
-          saveError
-        }}</span>
       </div>
     </template>
 
@@ -264,6 +262,7 @@
 
 <script setup>
 import { MEMBER_STATUSES } from "~/composables/useMemberStatus";
+import { TIMEZONE_OPTIONS } from "~/config/timezones";
 
 definePageMeta({
   middleware: 'auth',
@@ -283,6 +282,16 @@ const availableGhosts = [
   { value: "wtf", label: "WTF", image: "/ghosties/Ghost-WTF.png" },
 ];
 
+// Include the saved timezone as a custom option if it's not in the curated list.
+const timezoneItems = computed(() => {
+  const saved = formData.timeZone;
+  const list = [...TIMEZONE_OPTIONS];
+  if (saved && !list.some((t) => t.value === saved)) {
+    list.unshift({ label: saved, value: saved });
+  }
+  return list;
+});
+
 const notificationToggles = [
   { key: "events", label: "Event reminders", sub: "Get notified about upcoming events" },
   { key: "updates", label: "Community updates", sub: "New posts from members you follow" },
@@ -328,10 +337,7 @@ const formData = reactive({
 
 const loading = ref(false);
 const saving = ref(false);
-const saveSuccess = ref(false);
-const saveError = ref(null);
 const initialData = ref(null);
-let saveSuccessTimer = null;
 
 const memberId = computed(() => memberData.value?._id || memberData.value?.id);
 
@@ -376,8 +382,6 @@ const loadProfile = () => {
 
 const handleSubmit = async () => {
   saving.value = true;
-  saveSuccess.value = false;
-  saveError.value = null;
 
   try {
     await $fetch("/api/members/profile", {
@@ -385,20 +389,17 @@ const handleSubmit = async () => {
       body: { ...formData },
     });
 
-    saveSuccess.value = true;
-
     await checkMemberStatus();
     loadProfile();
 
-    if (saveSuccessTimer) clearTimeout(saveSuccessTimer);
-    saveSuccessTimer = setTimeout(() => {
-      saveSuccess.value = false;
-      saveSuccessTimer = null;
-    }, 3000);
+    toast.add({ title: "Profile updated", color: "success" });
   } catch (error) {
     console.error("Profile save error:", error);
-    saveError.value =
-      error.data?.message || "Failed to save profile. Please try again.";
+    toast.add({
+      title: "Update failed",
+      description: error.data?.statusMessage || error.data?.message || "Please try again.",
+      color: "error",
+    });
   } finally {
     saving.value = false;
   }
@@ -406,8 +407,6 @@ const handleSubmit = async () => {
 
 const resetForm = () => {
   loadProfile();
-  saveSuccess.value = false;
-  saveError.value = null;
 };
 
 onMounted(async () => {
@@ -452,10 +451,6 @@ const handleDeletePost = async (post) => {
   }
 };
 
-onBeforeUnmount(() => {
-  if (saveSuccessTimer) clearTimeout(saveSuccessTimer);
-});
-
 useHead({
   title: "Edit Profile - Ghost Guild",
 });
@@ -708,17 +703,9 @@ useHead({
   gap: 12px;
 }
 
-.save-msg {
-  font-size: 11px;
-  margin-left: auto;
-}
-
-.save-msg-ok {
-  color: var(--green);
-}
-
-.save-msg-err {
-  color: var(--ember);
+/* ---- TIMEZONE SELECT ---- */
+.timezone-select {
+  width: 100%;
 }
 
 /* ---- RESPONSIVE ---- */
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 298a555..3d86765 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -98,6 +98,7 @@ export default defineNuxtConfig({
         process.env.NUXT_PUBLIC_CLOUDINARY_CLOUD_NAME || "divzuumlr",
       appUrl: process.env.NUXT_PUBLIC_APP_URL || "http://localhost:3000",
       comingSoon: process.env.NUXT_PUBLIC_COMING_SOON || "false",
+      helcimPortalUrl: process.env.NUXT_PUBLIC_HELCIM_PORTAL_URL || "",
     },
   },
 });
diff --git a/server/api/onboarding/status.get.js b/server/api/onboarding/status.get.js
index c1aa1fa..e4e110d 100644
--- a/server/api/onboarding/status.get.js
+++ b/server/api/onboarding/status.get.js
@@ -14,6 +14,8 @@ export default defineEventHandler(async (event) => {
 
   const hasClickedWiki = !!member.onboarding?.wikiClicked
 
+  const skipped = member.onboarding?.skipped || {}
+
   return {
     goals: {
       hasProfileTags,
@@ -21,6 +23,12 @@ export default defineEventHandler(async (event) => {
       hasEngagedBoard,
       hasClickedWiki,
     },
+    skipped: {
+      profileTags: !!skipped.profileTags,
+      visitEvent: !!skipped.visitEvent,
+      board: !!skipped.board,
+      wiki: !!skipped.wiki,
+    },
     completedAt: member.onboarding?.completedAt || null,
   }
 })
diff --git a/server/api/onboarding/track.post.js b/server/api/onboarding/track.post.js
index 345d9f8..465b7a0 100644
--- a/server/api/onboarding/track.post.js
+++ b/server/api/onboarding/track.post.js
@@ -7,13 +7,21 @@ import { logActivity } from '../../utils/activityLog.js'
 
 export default defineEventHandler(async (event) => {
   const member = await requireAuth(event)
-  const { goal } = await validateBody(event, onboardingTrackSchema)
+  const { goal, skip } = await validateBody(event, onboardingTrackSchema)
 
   // Already graduated — no-op
   if (member.onboarding?.completedAt) {
     return { success: true }
   }
 
+  // Skip path: mark suggestion as skipped so the UI advances.
+  if (skip) {
+    await Member.findByIdAndUpdate(member._id, {
+      $set: { [`onboarding.skipped.${skip}`]: true },
+    })
+    return { success: true }
+  }
+
   // Idempotent — already tracked
   if (member.onboarding?.[goal]) {
     return { success: true }
diff --git a/server/models/member.js b/server/models/member.js
index 3dd5e3f..a236184 100644
--- a/server/models/member.js
+++ b/server/models/member.js
@@ -80,42 +80,42 @@ const memberSchema = new mongoose.Schema({
   privacy: {
     pronouns: {
       type: String,
-      enum: ["public", "members", "private"],
+      enum: ["members", "private"],
       default: "members",
     },
     timeZone: {
       type: String,
-      enum: ["public", "members", "private"],
+      enum: ["members", "private"],
       default: "members",
     },
     avatar: {
       type: String,
-      enum: ["public", "members", "private"],
-      default: "public",
+      enum: ["members", "private"],
+      default: "members",
     },
     studio: {
       type: String,
-      enum: ["public", "members", "private"],
+      enum: ["members", "private"],
       default: "members",
     },
     bio: {
       type: String,
-      enum: ["public", "members", "private"],
+      enum: ["members", "private"],
       default: "members",
     },
     location: {
       type: String,
-      enum: ["public", "members", "private"],
+      enum: ["members", "private"],
       default: "members",
     },
     socialLinks: {
       type: String,
-      enum: ["public", "members", "private"],
+      enum: ["members", "private"],
       default: "members",
     },
     craftTags: {
       type: String,
-      enum: ["public", "members", "private"],
+      enum: ["members", "private"],
       default: "members",
     },
   },
@@ -142,6 +142,12 @@ const memberSchema = new mongoose.Schema({
     eventPageVisited: { type: Boolean, default: false },
     boardPageVisited: { type: Boolean, default: false },
     wikiClicked: { type: Boolean, default: false },
+    skipped: {
+      profileTags: { type: Boolean, default: false },
+      visitEvent: { type: Boolean, default: false },
+      board: { type: Boolean, default: false },
+      wiki: { type: Boolean, default: false },
+    },
   },
 
   createdAt: { type: Date, default: Date.now },
diff --git a/server/utils/schemas.js b/server/utils/schemas.js
index 34d9290..e1012f7 100644
--- a/server/utils/schemas.js
+++ b/server/utils/schemas.js
@@ -1,7 +1,12 @@
 import * as z from 'zod'
 import { ADMIN_ALERT_TYPES } from '../models/adminAlertDismissal.js'
 
-const privacyEnum = z.enum(['public', 'members', 'private'])
+// Binary privacy: 'members' = visible to signed-in members, 'private' = hidden.
+// Legacy 'public' is accepted from old clients and coerced to 'members'.
+const privacyEnum = z.preprocess(
+  (v) => (v === 'public' ? 'members' : v),
+  z.enum(['members', 'private'])
+)
 
 export const emailSchema = z.object({
   email: z.string().trim().toLowerCase().email()
@@ -367,7 +372,10 @@ export const inviteAcceptSchema = z.object({
 // --- Onboarding schemas ---
 
 export const onboardingTrackSchema = z.object({
-  goal: z.enum(['eventPageVisited', 'boardPageVisited', 'wikiClicked'])
+  goal: z.enum(['eventPageVisited', 'boardPageVisited', 'wikiClicked']).optional(),
+  skip: z.enum(['profileTags', 'visitEvent', 'board', 'wiki']).optional(),
+}).refine((v) => v.goal || v.skip, {
+  message: 'Must provide goal or skip',
 })
 
 // --- Tag schemas ---
diff --git a/tests/client/composables/useOnboarding.test.js b/tests/client/composables/useOnboarding.test.js
index def57f5..7d219bd 100644
--- a/tests/client/composables/useOnboarding.test.js
+++ b/tests/client/composables/useOnboarding.test.js
@@ -378,4 +378,84 @@ describe('useOnboarding', () => {
     expect(currentSuggestion.value.key).toBe('empty')
     expect(currentSuggestion.value.text).toBe('No suggestions right now')
   })
+
+  // Skip: skipping a suggestion advances to the next incomplete, non-skipped one
+  it('skipSuggestion advances to the next suggestion and posts to track', async () => {
+    fetchMock.mockImplementation((url) => {
+      if (url === '/api/onboarding/status') {
+        return Promise.resolve({
+          goals: {
+            hasProfileTags: false,
+            hasVisitedEvent: false,
+            hasEngagedBoard: false,
+            hasClickedWiki: false,
+          },
+          skipped: {
+            profileTags: false,
+            visitEvent: false,
+            board: false,
+            wiki: false,
+          },
+          completedAt: null,
+        })
+      }
+      return Promise.resolve(null)
+    })
+
+    const { currentSuggestion, skipSuggestion, loading } = useOnboarding()
+
+    await vi.waitFor(() => {
+      expect(loading.value).toBe(false)
+    })
+
+    expect(currentSuggestion.value.key).toBe('profileTags')
+
+    await skipSuggestion('profileTags')
+
+    // Next priority advances to visitEvent
+    expect(currentSuggestion.value.key).toBe('visitEvent')
+
+    const trackCalls = fetchMock.mock.calls.filter(
+      (c) => c[0] === '/api/onboarding/track'
+    )
+    expect(trackCalls).toHaveLength(1)
+    expect(trackCalls[0][1]).toMatchObject({
+      method: 'POST',
+      body: { skip: 'profileTags' },
+    })
+  })
+
+  // Skip: skipped suggestions count toward isComplete
+  it('all skipped counts as complete for suggestion widget', async () => {
+    fetchMock.mockImplementation((url) => {
+      if (url === '/api/onboarding/status') {
+        return Promise.resolve({
+          goals: {
+            hasProfileTags: false,
+            hasVisitedEvent: false,
+            hasEngagedBoard: false,
+            hasClickedWiki: false,
+          },
+          skipped: {
+            profileTags: true,
+            visitEvent: true,
+            board: true,
+            wiki: true,
+          },
+          completedAt: null,
+        })
+      }
+      if (url === '/api/events/recommended') return Promise.resolve([])
+      if (url === '/api/wiki/recommended') return Promise.resolve([])
+      return Promise.resolve(null)
+    })
+
+    const { isComplete, loading } = useOnboarding()
+
+    await vi.waitFor(() => {
+      expect(loading.value).toBe(false)
+    })
+
+    expect(isComplete.value).toBe(true)
+  })
 })
diff --git a/tests/server/api/onboarding-status.test.js b/tests/server/api/onboarding-status.test.js
index 5030e5f..ad97c80 100644
--- a/tests/server/api/onboarding-status.test.js
+++ b/tests/server/api/onboarding-status.test.js
@@ -49,10 +49,41 @@ describe('GET /api/onboarding/status', () => {
         hasEngagedBoard: false,
         hasClickedWiki: false,
       },
+      skipped: {
+        profileTags: false,
+        visitEvent: false,
+        board: false,
+        wiki: false,
+      },
       completedAt: null,
     })
   })
 
+  // Skip flags surface from member.onboarding.skipped
+  it('returns skipped map from member document', async () => {
+    requireAuth.mockResolvedValue({
+      _id: 'member-1',
+      craftTags: [],
+      onboarding: {
+        completedAt: null,
+        eventPageVisited: false,
+        boardPageVisited: false,
+        wikiClicked: false,
+        skipped: { profileTags: true, wiki: true },
+      },
+    })
+
+    const event = createMockEvent({ method: 'GET', path: '/api/onboarding/status' })
+    const result = await handler(event)
+
+    expect(result.skipped).toEqual({
+      profileTags: true,
+      visitEvent: false,
+      board: false,
+      wiki: true,
+    })
+  })
+
   // 1.2: hasProfileTags true when craft tags present
   it('hasProfileTags is true when member has craft tags', async () => {
     requireAuth.mockResolvedValue({
diff --git a/tests/server/api/onboarding-track.test.js b/tests/server/api/onboarding-track.test.js
index 792d2bb..d60c03f 100644
--- a/tests/server/api/onboarding-track.test.js
+++ b/tests/server/api/onboarding-track.test.js
@@ -206,6 +206,45 @@ describe('POST /api/onboarding/track', () => {
     )
   })
 
+  // Skip: marks suggestion skipped without touching underlying goal
+  it('marks the suggestion skipped when skip is provided', async () => {
+    validateBody.mockResolvedValue({ skip: 'wiki' })
+
+    const event = createMockEvent({
+      method: 'POST',
+      path: '/api/onboarding/track',
+      body: { skip: 'wiki' },
+    })
+
+    const result = await handler(event)
+
+    expect(result).toEqual({ success: true })
+    expect(Member.findByIdAndUpdate).toHaveBeenCalledWith('member-1', {
+      $set: { 'onboarding.skipped.wiki': true },
+    })
+    // No goal log when skipping
+    expect(logActivity).not.toHaveBeenCalled()
+  })
+
+  it('no-ops skip path when already graduated', async () => {
+    requireAuth.mockResolvedValue({
+      _id: 'member-1',
+      onboarding: { completedAt: new Date() },
+    })
+    validateBody.mockResolvedValue({ skip: 'board' })
+
+    const event = createMockEvent({
+      method: 'POST',
+      path: '/api/onboarding/track',
+      body: { skip: 'board' },
+    })
+
+    const result = await handler(event)
+
+    expect(result).toEqual({ success: true })
+    expect(Member.findByIdAndUpdate).not.toHaveBeenCalled()
+  })
+
   // 2.15: Requires auth (401)
   it('returns 401 when not authenticated', async () => {
     requireAuth.mockRejectedValue(
diff --git a/tests/server/api/validation.test.js b/tests/server/api/validation.test.js
index 7861cd7..a94670e 100644
--- a/tests/server/api/validation.test.js
+++ b/tests/server/api/validation.test.js
@@ -180,9 +180,15 @@ describe('memberProfileUpdateSchema', () => {
     expect(result.success).toBe(false)
   })
 
-  it('accepts valid privacy values', () => {
+  it('accepts valid binary privacy values', () => {
+    expect(memberProfileUpdateSchema.safeParse({ bioPrivacy: 'members' }).success).toBe(true)
+    expect(memberProfileUpdateSchema.safeParse({ bioPrivacy: 'private' }).success).toBe(true)
+  })
+
+  it('coerces legacy "public" privacy value to "members"', () => {
     const result = memberProfileUpdateSchema.safeParse({ bioPrivacy: 'public' })
     expect(result.success).toBe(true)
+    expect(result.data.bioPrivacy).toBe('members')
   })
 })