From 248c699301e98e0082806ed5adbeeee693fe78b8 Mon Sep 17 00:00:00 2001
From: Michelle Inez <michelleinez01@gmail.com>
Date: Wed, 28 Jan 2026 16:14:40 -0800
Subject: [PATCH 1/3] feat: new credit settings page

---
 .../mutation/updateDonateRepayments.graphql   |   9 +
 ...ateInactiveCreditRecipientSettings.graphql |  15 +
 .../creditSettingsQuery.graphql               |  13 +
 .../CreditSettings/CreditSettingsPage.vue     | 214 +++++++++++++++
 .../components/CreditSettingsInactivity.vue   | 102 +++++++
 .../CreditSettingsLinkedSection.vue           |  35 +++
 .../components/CreditSettingsRepayment.vue    |  65 +++++
 .../components/CreditSettingsSidebar.vue      | 257 ++++++++++++++++++
 src/router/routes.js                          |   8 +
 9 files changed, 718 insertions(+)
 create mode 100644 src/graphql/mutation/updateDonateRepayments.graphql
 create mode 100644 src/graphql/mutation/updateInactiveCreditRecipientSettings.graphql
 create mode 100644 src/graphql/query/creditSettings/creditSettingsQuery.graphql
 create mode 100644 src/pages/Settings/CreditSettings/CreditSettingsPage.vue
 create mode 100644 src/pages/Settings/CreditSettings/components/CreditSettingsInactivity.vue
 create mode 100644 src/pages/Settings/CreditSettings/components/CreditSettingsLinkedSection.vue
 create mode 100644 src/pages/Settings/CreditSettings/components/CreditSettingsRepayment.vue
 create mode 100644 src/pages/Settings/CreditSettings/components/CreditSettingsSidebar.vue

diff --git a/src/graphql/mutation/updateDonateRepayments.graphql b/src/graphql/mutation/updateDonateRepayments.graphql
new file mode 100644
index 00000000000..285c205dc96
--- /dev/null
+++ b/src/graphql/mutation/updateDonateRepayments.graphql
@@ -0,0 +1,9 @@
+mutation updateDonateRepayments($donateRepayments: Boolean) {
+	my {
+		updateDonateRepayments(donateRepayments: $donateRepayments) {
+			success
+			error
+			value
+		}
+	}
+}
diff --git a/src/graphql/mutation/updateInactiveCreditRecipientSettings.graphql b/src/graphql/mutation/updateInactiveCreditRecipientSettings.graphql
new file mode 100644
index 00000000000..b9a10e93f7d
--- /dev/null
+++ b/src/graphql/mutation/updateInactiveCreditRecipientSettings.graphql
@@ -0,0 +1,15 @@
+mutation updateInactiveCreditRecipientSettings(
+	$recipient: InactiveCreditRecipientEnum!,
+	$emailAddress: String
+) {
+	my {
+		updateInactiveCreditRecipientSettings(
+			recipient: $recipient,
+			emailAddress: $emailAddress
+		) {
+			success
+			error
+			value
+		}
+	}
+}
diff --git a/src/graphql/query/creditSettings/creditSettingsQuery.graphql b/src/graphql/query/creditSettings/creditSettingsQuery.graphql
new file mode 100644
index 00000000000..f2b51ffa4c7
--- /dev/null
+++ b/src/graphql/query/creditSettings/creditSettingsQuery.graphql
@@ -0,0 +1,13 @@
+query creditSettingsQuery {
+	my {
+		id
+		userAccount {
+			id
+			balance
+			promoBalance
+			donateRepayments
+			inactiveAccountSetting
+			inactiveAccountEmailAddress
+		}
+	}
+}
diff --git a/src/pages/Settings/CreditSettings/CreditSettingsPage.vue b/src/pages/Settings/CreditSettings/CreditSettingsPage.vue
new file mode 100644
index 00000000000..75f3a5279b6
--- /dev/null
+++ b/src/pages/Settings/CreditSettings/CreditSettingsPage.vue
@@ -0,0 +1,214 @@
+<template>
+	<www-page
+		class="credit-settings-page"
+		:gray-background="true"
+	>
+		<template #secondary>
+			<the-my-kiva-secondary-menu />
+		</template>
+
+		<kv-default-wrapper>
+			<div class="row">
+				<div class="columns small-12 large-8">
+					<h1 class="tw-mb-4">
+						Credit Settings
+					</h1>
+
+					<credit-settings-linked-section
+						title="Subscriptions settings"
+						description="Manage your Monthly Good or Auto Deposit settings"
+						to="/settings/subscriptions"
+					/>
+					<credit-settings-linked-section
+						title="Auto-lending settings"
+						description="Turn auto-lending on or off and customize how your balance is put to work"
+						to="/settings/autolending"
+					/>
+
+					<template v-if="!loading">
+						<credit-settings-repayment
+							v-model="form.donateRepayments"
+							:disabled="loading"
+						/>
+						<credit-settings-inactivity
+							:inactive-credit-recipient="form.inactiveCreditRecipient"
+							:paypal-email-address="form.inactiveCreditEmailAddress"
+							@update:inactive-credit-recipient="form.inactiveCreditRecipient = $event"
+							@update:paypal-email-address="form.inactiveCreditEmailAddress = $event"
+							:disabled="loading"
+						/>
+					</template>
+
+					<div class="tw-mt-3">
+						<kv-button
+							:disabled="!isChanged || isSaving || v$.$invalid"
+							@click="saveSettings"
+						>
+							{{ isSaving ? 'Saving...' : 'Save settings' }}
+						</kv-button>
+						<button
+							v-if="isChanged && !isSaving"
+							class="tw-text-link tw-font-medium tw-ml-2"
+							@click="resetForm"
+						>
+							Reset
+						</button>
+					</div>
+				</div>
+
+				<div class="columns small-12 large-4">
+					<credit-settings-sidebar
+						:loading="loading"
+						:balance="balance"
+						:promo-balance="promoBalance"
+						class="tw-mt-3 lg:tw-mt-0"
+					/>
+				</div>
+			</div>
+		</kv-default-wrapper>
+	</www-page>
+</template>
+
+<script>
+import numeral from 'numeral';
+import { useVuelidate } from '@vuelidate/core';
+import { email, requiredIf } from '@vuelidate/validators';
+
+import { KvButton } from '@kiva/kv-components';
+import KvDefaultWrapper from '#src/components/Kv/KvDefaultWrapper';
+import TheMyKivaSecondaryMenu from '#src/components/WwwFrame/Menus/TheMyKivaSecondaryMenu';
+import WwwPage from '#src/components/WwwFrame/WwwPage';
+import creditSettingsQuery from '#src/graphql/query/creditSettings/creditSettingsQuery.graphql';
+import updateDonateRepaymentsMutation from '#src/graphql/mutation/updateDonateRepayments.graphql';
+import updateInactiveCreditRecipientSettingsMutation
+	from '#src/graphql/mutation/updateInactiveCreditRecipientSettings.graphql';
+
+import CreditSettingsInactivity from './components/CreditSettingsInactivity';
+import CreditSettingsLinkedSection from './components/CreditSettingsLinkedSection';
+import CreditSettingsRepayment from './components/CreditSettingsRepayment';
+import CreditSettingsSidebar from './components/CreditSettingsSidebar';
+
+const INACTIVE_RECIPIENT_OPTIONS = ['kiva', 'email_address'];
+const DEFAULT_INACTIVE_RECIPIENT = 'kiva';
+
+export default {
+	name: 'CreditSettingsPage',
+	inject: ['apollo', 'cookieStore'],
+	components: {
+		CreditSettingsInactivity,
+		CreditSettingsLinkedSection,
+		CreditSettingsRepayment,
+		CreditSettingsSidebar,
+		KvButton,
+		KvDefaultWrapper,
+		TheMyKivaSecondaryMenu,
+		WwwPage,
+	},
+	head: {
+		title: 'Credit settings',
+	},
+	data() {
+		return {
+			loading: true,
+			isSaving: false,
+			balance: 0,
+			promoBalance: 0,
+			form: {
+				donateRepayments: null,
+				inactiveCreditRecipient: '',
+				inactiveCreditEmailAddress: '',
+			},
+			initialValues: {},
+		};
+	},
+	setup() {
+		return { v$: useVuelidate() };
+	},
+	validations() {
+		return {
+			form: {
+				inactiveCreditEmailAddress: {
+					requiredIf: requiredIf(() => this.form.inactiveCreditRecipient === 'email_address'),
+					email,
+				},
+			},
+		};
+	},
+	apollo: {
+		query: creditSettingsQuery,
+		preFetch: true,
+		result({ data }) {
+			const ua = data?.my?.userAccount;
+			if (!ua) {
+				this.loading = false;
+				return;
+			}
+
+			this.balance = numeral(ua.balance ?? 0).value();
+			this.promoBalance = numeral(ua.promoBalance ?? 0).value();
+			this.form.donateRepayments = typeof ua.donateRepayments === 'boolean' ? ua.donateRepayments : false;
+			this.form.inactiveCreditRecipient = this.normalizeInactiveRecipient(ua.inactiveAccountSetting);
+			this.form.inactiveCreditEmailAddress = ua.inactiveAccountEmailAddress ?? '';
+			this.initialValues = JSON.parse(JSON.stringify(this.form));
+			this.loading = false;
+		},
+	},
+	computed: {
+		isChanged() {
+			return JSON.stringify(this.initialValues) !== JSON.stringify(this.form);
+		},
+	},
+	methods: {
+		normalizeInactiveRecipient(value) {
+			const normalized = typeof value === 'string' ? value.trim().toLowerCase() : '';
+			return INACTIVE_RECIPIENT_OPTIONS.includes(normalized) ? normalized : DEFAULT_INACTIVE_RECIPIENT;
+		},
+		resetForm() {
+			this.form = { ...this.initialValues };
+		},
+		async saveSettings() {
+			this.isSaving = true;
+			try {
+				await this.saveDonateRepayments();
+				await this.saveInactiveCreditRecipient();
+				await this.apollo.query({ query: creditSettingsQuery, fetchPolicy: 'network-only' });
+				this.initialValues = JSON.parse(JSON.stringify(this.form));
+				this.$showTipMsg('Your credit settings have been saved');
+			} catch (e) {
+				this.$showTipMsg('There was a problem saving your settings', 'error');
+			} finally {
+				this.isSaving = false;
+			}
+		},
+		async saveDonateRepayments() {
+			const res = await this.apollo.mutate({
+				mutation: updateDonateRepaymentsMutation,
+				variables: { donateRepayments: this.form.donateRepayments },
+			});
+			const result = res?.data?.my?.updateDonateRepayments;
+			if (res?.errors || result?.success === false) {
+				throw new Error(
+					result?.error || result?.value || res?.errors?.[0]?.message || 'Donate repayments update failed'
+				);
+			}
+		},
+		async saveInactiveCreditRecipient() {
+			const res = await this.apollo.mutate({
+				mutation: updateInactiveCreditRecipientSettingsMutation,
+				variables: {
+					recipient: this.form.inactiveCreditRecipient,
+					emailAddress: this.form.inactiveCreditRecipient === 'email_address'
+						? this.form.inactiveCreditEmailAddress
+						: null,
+				},
+			});
+			const result = res?.data?.my?.updateInactiveCreditRecipientSettings;
+			if (res?.errors || result?.success === false) {
+				throw new Error(
+					result?.error || result?.value || res?.errors?.[0]?.message || 'Inactivity settings update failed'
+				);
+			}
+		},
+	},
+};
+</script>
diff --git a/src/pages/Settings/CreditSettings/components/CreditSettingsInactivity.vue b/src/pages/Settings/CreditSettings/components/CreditSettingsInactivity.vue
new file mode 100644
index 00000000000..53757335a6b
--- /dev/null
+++ b/src/pages/Settings/CreditSettings/components/CreditSettingsInactivity.vue
@@ -0,0 +1,102 @@
+<template>
+	<section class="tw-py-3 tw-border-b tw-border-secondary">
+		<h2 class="tw-text-h3 tw-mb-2">
+			Inactivity settings
+		</h2>
+		<p class="tw-text-secondary tw-mb-2">
+			If my account becomes inactive:
+		</p>
+
+		<fieldset :disabled="disabled">
+			<kv-radio
+				id="inactive-kiva"
+				name="inactivity-setting"
+				value="kiva"
+				v-model="localRecipient"
+				class="tw-mb-1"
+			>
+				Donate my remaining credit to Kiva’s operating expenses
+			</kv-radio>
+			<kv-radio
+				id="inactive-paypal"
+				name="inactivity-setting"
+				value="email_address"
+				v-model="localRecipient"
+			>
+				Return my remaining credit to my PayPal account
+			</kv-radio>
+
+			<div v-if="localRecipient === 'email_address'" class="tw-mt-2">
+				<label class="tw-block tw-mb-1" for="paypal-email">
+					PayPal email address
+				</label>
+				<kv-text-input
+					id="paypal-email"
+					class="data-hj-suppress"
+					type="email"
+					autocomplete="email"
+					placeholder="name@example.com"
+					v-model="localEmail"
+				/>
+			</div>
+		</fieldset>
+	</section>
+</template>
+
+<script>
+import { KvRadio, KvTextInput } from '@kiva/kv-components';
+
+const ALLOWED_RECIPIENTS = ['kiva', 'email_address'];
+const DEFAULT_RECIPIENT = 'kiva';
+
+export default {
+	name: 'CreditSettingsInactivity',
+	components: { KvRadio, KvTextInput },
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		inactiveCreditRecipient: {
+			type: String,
+			default: 'kiva',
+		},
+		paypalEmailAddress: {
+			type: String,
+			default: '',
+		},
+	},
+	emits: [
+		'update:inactive-credit-recipient',
+		'update:paypal-email-address',
+	],
+	computed: {
+		localRecipient: {
+			get() {
+				return this.inactiveCreditRecipient;
+			},
+			set(val) {
+				this.$emit('update:inactive-credit-recipient', val);
+			},
+		},
+		localEmail: {
+			get() {
+				return this.paypalEmailAddress;
+			},
+			set(val) {
+				this.$emit('update:paypal-email-address', val);
+			},
+		},
+	},
+	watch: {
+		inactiveCreditRecipient: {
+			immediate: false,
+			handler(val) {
+				if (val && !ALLOWED_RECIPIENTS.includes(val)) {
+					this.$emit('update:inactive-credit-recipient', DEFAULT_RECIPIENT);
+				}
+			},
+		},
+	},
+};
+</script>
diff --git a/src/pages/Settings/CreditSettings/components/CreditSettingsLinkedSection.vue b/src/pages/Settings/CreditSettings/components/CreditSettingsLinkedSection.vue
new file mode 100644
index 00000000000..b483479061e
--- /dev/null
+++ b/src/pages/Settings/CreditSettings/components/CreditSettingsLinkedSection.vue
@@ -0,0 +1,35 @@
+<template>
+	<section class="tw-py-3 tw-border-b tw-border-secondary">
+		<h2 class="tw-text-h3 tw-mb-1">
+			{{ title }}
+		</h2>
+		<p class="tw-mb-0">
+			<router-link
+				:to="to"
+				class="tw-text-link tw-font-medium hover:tw-underline focus:tw-underline"
+			>
+				{{ description }}
+			</router-link>
+		</p>
+	</section>
+</template>
+
+<script>
+export default {
+	name: 'CreditSettingsLinkedSection',
+	props: {
+		description: {
+			type: String,
+			required: true,
+		},
+		title: {
+			type: String,
+			required: true,
+		},
+		to: {
+			type: [String, Object],
+			required: true,
+		},
+	},
+};
+</script>
diff --git a/src/pages/Settings/CreditSettings/components/CreditSettingsRepayment.vue b/src/pages/Settings/CreditSettings/components/CreditSettingsRepayment.vue
new file mode 100644
index 00000000000..49deb4d814a
--- /dev/null
+++ b/src/pages/Settings/CreditSettings/components/CreditSettingsRepayment.vue
@@ -0,0 +1,65 @@
+<template>
+	<section class="tw-py-3 tw-border-b tw-border-secondary">
+		<h2 class="tw-text-h3 tw-mb-2">
+			Repayment settings
+		</h2>
+		<p class="tw-text-secondary tw-mb-2">
+			When my loans are repaid:
+		</p>
+
+		<fieldset :disabled="disabled">
+			<kv-radio
+				id="repayment-deposit"
+				name="repayment-setting"
+				value="deposit"
+				v-model="localSelection"
+				class="tw-mb-1"
+			>
+				Deposit my repayments in my Kiva account so I can relend
+			</kv-radio>
+			<kv-radio
+				id="repayment-donate"
+				name="repayment-setting"
+				value="donate"
+				v-model="localSelection"
+			>
+				Donate my repayments to Kiva’s operating expenses
+			</kv-radio>
+		</fieldset>
+	</section>
+</template>
+
+<script>
+import { KvRadio } from '@kiva/kv-components';
+
+const VALUE_DONATE = 'donate';
+const VALUE_DEPOSIT = 'deposit';
+
+export default {
+	name: 'CreditSettingsRepayment',
+	components: { KvRadio },
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		modelValue: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['update:modelValue'],
+	computed: {
+		localSelection: {
+			get() {
+				if (this.modelValue === true) return VALUE_DONATE;
+				if (this.modelValue === false) return VALUE_DEPOSIT;
+				return null;
+			},
+			set(val) {
+				this.$emit('update:modelValue', val === VALUE_DONATE);
+			},
+		},
+	},
+};
+</script>
diff --git a/src/pages/Settings/CreditSettings/components/CreditSettingsSidebar.vue b/src/pages/Settings/CreditSettings/components/CreditSettingsSidebar.vue
new file mode 100644
index 00000000000..09c39a1ec14
--- /dev/null
+++ b/src/pages/Settings/CreditSettings/components/CreditSettingsSidebar.vue
@@ -0,0 +1,257 @@
+<template>
+	<aside class="credit-settings-sidebar tw-bg-primary tw-p-3">
+		<div class="tw-flex tw-items-baseline tw-gap-1">
+			<kv-loading-placeholder v-if="loading" style="width: 72px; height: 32px;" />
+			<p v-else class="tw-text-h1 tw-text-action tw-mb-0">
+				{{ $filters.numeral(availableBalance, '$0,0.00') }}
+			</p>
+		</div>
+
+		<p class="tw-text-small tw-text-secondary tw-mt-0.5 tw-mb-2">
+			AVAILABLE KIVA CREDIT
+		</p>
+
+		<nav class="tw-flex tw-flex-wrap tw-gap-1 tw-text-small">
+			<router-link
+				class="tw-text-link tw-font-medium"
+				to="/portfolio/credit/deposit"
+			>
+				Add credit
+			</router-link>
+			<span class="tw-text-secondary">|</span>
+			<router-link
+				class="tw-text-link tw-font-medium"
+				to="/donate/emailprocess"
+			>
+				Donate
+			</router-link>
+			<span class="tw-text-secondary">|</span>
+			<router-link
+				class="tw-text-link tw-font-medium"
+				to="/gifts/kiva-cards"
+			>
+				Kiva gifts
+			</router-link>
+			<span class="tw-text-secondary">|</span>
+			<router-link
+				class="tw-text-link tw-font-medium"
+				to="/withdraw"
+			>
+				Withdraw
+			</router-link>
+		</nav>
+
+		<hr class="tw-my-3 tw-border-secondary">
+
+		<h3 class="tw-text-h4 tw-mb-1">
+			Important note:
+		</h3>
+		<p class="tw-text-small tw-text-secondary tw-mb-2">
+			If you haven’t set an inactivity preference or don’t provide a valid PayPal account,
+			Kiva may be required to send your funds to a state government if your account becomes inactive.
+			<button
+				type="button"
+				class="tw-text-link tw-font-medium tw-bg-transparent tw-border-0 tw-p-0"
+				@click="showLearnMoreFaq = true"
+			>
+				Learn more
+			</button>
+		</p>
+
+		<h3 class="tw-text-h4 tw-mb-1">
+			FAQ
+		</h3>
+		<ul class="tw-text-small tw-mb-0">
+			<li v-for="faq in faqItems" :key="faq.key">
+				<button
+					type="button"
+					class="tw-text-link tw-font-medium tw-bg-transparent tw-border-0 tw-p-0"
+					@click="openFaq(faq.key)"
+				>
+					{{ faq.label }}
+				</button>
+			</li>
+		</ul>
+
+		<kv-lightbox
+			:visible="showDonationsFaq"
+			title="How does Kiva use donations?"
+			@lightbox-closed="showDonationsFaq = false"
+		>
+			<div class="tw-space-y-3">
+				<p>
+					100% of every dollar you lend on Kiva goes directly to funding loans. We rely on small optional
+					donations from you and others to keep Kiva running.
+				</p>
+				<p>
+					Every $1 donated to Kiva makes $8 in loans possible around the world. Your donation will enable us
+					to:
+				</p>
+				<ul class="tw-list-disc tw-pl-5 tw-space-y-1">
+					<li>Send expert staff to over 60 countries to vet and monitor loans and partners.</li>
+					<li>Build and maintain a website that facilitates over $1 million in loans each week.</li>
+					<li>Provide comprehensive customer support to thousands of lenders worldwide.</li>
+					<li>Train and support hundreds of volunteers -- 4 for every 1 staff member at Kiva.</li>
+				</ul>
+				<p>
+					If you live in the United States, your donation is tax-deductible. Thank you for considering a
+					donation to Kiva.
+				</p>
+			</div>
+		</kv-lightbox>
+
+		<kv-lightbox
+			:visible="showLearnMoreFaq"
+			title="Inactive credit and abandoned property laws"
+			@lightbox-closed="showLearnMoreFaq = false"
+		>
+			<div class="tw-space-y-3">
+				<p>
+					Organizations like Kiva are required by many state governments to turn over unclaimed property to
+					the state for safekeeping after several years.
+				</p>
+				<p>
+					If your account becomes inactive, Kiva will need instructions for what to do with any funds left in
+					your account.
+				</p>
+				<p>
+					Kiva accounts are considered inactive for purposes of unclaimed property laws if they have no
+					activity for 24 consecutive months.
+				</p>
+				<p>
+					“Activity” includes things like logins, loan purchases (even via autolending), repayments, and
+					withdrawals.
+				</p>
+				<p>
+					If you haven’t selected an option in your account settings for inactivity, or if you have asked us
+					to return your remaining credit to you but you haven’t provided a valid PayPal account for
+					withdrawals, Kiva will send your funds to your home state for safekeeping (or to the state of
+					California if we do not know your location).
+				</p>
+			</div>
+		</kv-lightbox>
+
+		<kv-lightbox
+			:visible="showInactiveWithdrawalFaq"
+			title="What is inactive withdrawal?"
+			@lightbox-closed="showInactiveWithdrawalFaq = false"
+		>
+			<div class="tw-space-y-3">
+				<p>
+					If your account becomes inactive, you can choose to have Kiva send your remaining Kiva credit to a
+					PayPal account of your choosing. Just select “Return my Kiva credit to my PayPal account” and enter
+					the email address you use on PayPal.
+				</p>
+				<p class="tw-font-medium">
+					Remember, there are other options for your credit if your account becomes inactive:
+				</p>
+				<ul class="tw-list-disc tw-pl-5 tw-space-y-1">
+					<li>You can automatically make a donation to Kiva’s operating expenses.</li>
+					<li>
+						You can enable auto lending.
+						<a class="tw-text-link tw-font-medium" href="/settings/autolending">Click here</a>
+						to change your auto lending settings.
+					</li>
+				</ul>
+				<p>
+					If we are unable to send Kiva credit to your PayPal account (i.e. we have the wrong email address),
+					automatic withdrawal may not be available to you. If you have questions about this, please contact
+					Kiva’s Community Support team.
+				</p>
+			</div>
+		</kv-lightbox>
+
+		<kv-lightbox
+			:visible="showAutoLendingFaq"
+			title="How does auto-lending work?"
+			@lightbox-closed="showAutoLendingFaq = false"
+		>
+			<div class="tw-space-y-3">
+				<p>
+					Kiva’s auto-lending tool enables you to make sure your funds are always active, even if you can’t
+					make a loan yourself. Lenders can customize the feature so that auto-lending happens automatically
+					after repayments reach $25, or lenders can set a window of time (up to 4 months) to make a loan
+					manually before auto-lending takes effect.
+				</p>
+				<p>
+					Auto-loan categories, as well as other details, can also be customized to match your lending
+					preferences. Please note that the system gives precedence to active lending. The amount of loans
+					being made through auto-lending depends on the supply of fundraising loans and demand from other
+					lenders choosing loans manually. This also means that for popular or very specific kinds of loans,
+					there's a chance those loans will be fully funded before auto-lending kicks in.
+				</p>
+				<p>
+					Take this into account when customizing your loan preferences - if your criteria are too narrow, we
+					may not be able to lend your funds.
+				</p>
+			</div>
+		</kv-lightbox>
+
+		<kv-lightbox
+			:visible="showAutoDepositsFaq"
+			title="Auto Deposits"
+			@lightbox-closed="showAutoDepositsFaq = false"
+		>
+			<div class="tw-space-y-3">
+				<p>
+					An auto deposit allows you to automatically add money to your Kiva account every month via PayPal,
+					making it easier for you to lend to the borrowers that inspire you the most. When you set up an
+					auto deposit you also have the option to make an automatic donation to Kiva with each new
+					contribution.
+				</p>
+			</div>
+		</kv-lightbox>
+	</aside>
+</template>
+
+<script>
+import { KvLightbox, KvLoadingPlaceholder } from '@kiva/kv-components';
+
+const FAQ_ITEMS = [
+	{ key: 'showDonationsFaq', label: 'How does Kiva use donations?' },
+	{ key: 'showInactiveWithdrawalFaq', label: 'What is inactive withdrawal?' },
+	{ key: 'showAutoLendingFaq', label: 'What is auto lending?' },
+	{ key: 'showAutoDepositsFaq', label: 'What are auto deposits?' },
+];
+
+export default {
+	name: 'CreditSettingsSidebar',
+	components: { KvLightbox, KvLoadingPlaceholder },
+	props: {
+		balance: {
+			type: Number,
+			default: 0,
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		promoBalance: {
+			type: Number,
+			default: 0,
+		},
+	},
+	data() {
+		return {
+			showAutoDepositsFaq: false,
+			showAutoLendingFaq: false,
+			showDonationsFaq: false,
+			showInactiveWithdrawalFaq: false,
+			showLearnMoreFaq: false,
+		};
+	},
+	computed: {
+		availableBalance() {
+			return (this.balance || 0) + (this.promoBalance || 0);
+		},
+		faqItems() {
+			return FAQ_ITEMS;
+		},
+	},
+	methods: {
+		openFaq(key) {
+			this[key] = true;
+		},
+	},
+};
+</script>
diff --git a/src/router/routes.js b/src/router/routes.js
index 00a608544b4..c2bf59ca2af 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -596,6 +596,14 @@ export default [
 			authenticationRequired: true,
 		}
 	},
+	{
+		path: '/settings/credit-beta',
+		component: () => import('#src/pages/Settings/CreditSettings/CreditSettingsPage'),
+		meta: {
+			authenticationRequired: true,
+			excludeFromStaticSitemap: true,
+		},
+	},
 	{
 		path: '/settings/autolending',
 		component: () => import('#src/pages/Autolending/AutolendingPage'),

From 35801d94aea852af11c6a46a4351e1865ba48eeb Mon Sep 17 00:00:00 2001
From: Michelle Inez <michelleinez01@gmail.com>
Date: Wed, 28 Jan 2026 16:44:04 -0800
Subject: [PATCH 2/3] fix: using activeLoginRequired flag

---
 src/router/routes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/routes.js b/src/router/routes.js
index c2bf59ca2af..2d9770f307d 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -600,7 +600,7 @@ export default [
 		path: '/settings/credit-beta',
 		component: () => import('#src/pages/Settings/CreditSettings/CreditSettingsPage'),
 		meta: {
-			authenticationRequired: true,
+			activeLoginRequired: true,
 			excludeFromStaticSitemap: true,
 		},
 	},

From c4e4a878227c1dfb30e6c2b6a2255084eb7efb6e Mon Sep 17 00:00:00 2001
From: Michelle Inez <michelleinez01@gmail.com>
Date: Wed, 28 Jan 2026 16:53:44 -0800
Subject: [PATCH 3/3] fix: change styles to apply white bg color for each
 section

---
 .../CreditSettings/components/CreditSettingsInactivity.vue      | 2 +-
 .../CreditSettings/components/CreditSettingsLinkedSection.vue   | 2 +-
 .../CreditSettings/components/CreditSettingsRepayment.vue       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/Settings/CreditSettings/components/CreditSettingsInactivity.vue b/src/pages/Settings/CreditSettings/components/CreditSettingsInactivity.vue
index 53757335a6b..489c38740e6 100644
--- a/src/pages/Settings/CreditSettings/components/CreditSettingsInactivity.vue
+++ b/src/pages/Settings/CreditSettings/components/CreditSettingsInactivity.vue
@@ -1,5 +1,5 @@
 <template>
-	<section class="tw-py-3 tw-border-b tw-border-secondary">
+	<section class="tw-bg-primary tw-p-3 tw-mb-3">
 		<h2 class="tw-text-h3 tw-mb-2">
 			Inactivity settings
 		</h2>
diff --git a/src/pages/Settings/CreditSettings/components/CreditSettingsLinkedSection.vue b/src/pages/Settings/CreditSettings/components/CreditSettingsLinkedSection.vue
index b483479061e..1d0aaf836ca 100644
--- a/src/pages/Settings/CreditSettings/components/CreditSettingsLinkedSection.vue
+++ b/src/pages/Settings/CreditSettings/components/CreditSettingsLinkedSection.vue
@@ -1,5 +1,5 @@
 <template>
-	<section class="tw-py-3 tw-border-b tw-border-secondary">
+	<section class="tw-bg-primary tw-p-3 tw-mb-3">
 		<h2 class="tw-text-h3 tw-mb-1">
 			{{ title }}
 		</h2>
diff --git a/src/pages/Settings/CreditSettings/components/CreditSettingsRepayment.vue b/src/pages/Settings/CreditSettings/components/CreditSettingsRepayment.vue
index 49deb4d814a..9852423fe42 100644
--- a/src/pages/Settings/CreditSettings/components/CreditSettingsRepayment.vue
+++ b/src/pages/Settings/CreditSettings/components/CreditSettingsRepayment.vue
@@ -1,5 +1,5 @@
 <template>
-	<section class="tw-py-3 tw-border-b tw-border-secondary">
+	<section class="tw-bg-primary tw-p-3 tw-mb-3">
 		<h2 class="tw-text-h3 tw-mb-2">
 			Repayment settings
 		</h2>