several fixes to payment applet styling & script
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Disco DeDisco
2026-03-24 14:13:44 -04:00
parent f347af7eff
commit 18898c7a0f
3 changed files with 44 additions and 28 deletions

View File

@@ -21,27 +21,7 @@ const initWallet = () => {
saveBtn.hidden = false;
cancelBtn.hidden = false;
const section = addBtn.closest('section');
const rowPx = 3 * parseFloat(getComputedStyle(document.documentElement).fontSize);
const updateRows = () => {
const sectionTop = section.getBoundingClientRect().top;
let maxBottom = sectionTop;
for (const child of section.children) {
if (child.hidden) continue;
maxBottom = Math.max(maxBottom, child.getBoundingClientRect().bottom);
}
const padBot = parseFloat(getComputedStyle(section).paddingBottom);
const rows = Math.ceil((maxBottom - sectionTop + padBot) / rowPx) + 1;
section.style.setProperty('--applet-rows', String(rows));
};
paymentEl.on('ready', () => {
updateRows();
const stripeContainer = document.getElementById('id_stripe_payment_element');
if (stripeContainer) {
const obs = new ResizeObserver(updateRows);
obs.observe(stripeContainer);
section._stripeObs = obs;
}
});
section.style.setProperty('--applet-rows', '15');
});
saveBtn.addEventListener('click', async () => {
@@ -68,8 +48,7 @@ const initWallet = () => {
saveBtn.hidden = true;
cancelBtn.hidden = true;
const section = cancelBtn.closest('section');
section.style.setProperty('--applet-rows', '2');
if (section._stripeObs) { section._stripeObs.disconnect(); section._stripeObs = null; }
section.style.setProperty('--applet-rows', '3');
});
cancelBtn.addEventListener('click', () => {
@@ -81,8 +60,7 @@ const initWallet = () => {
saveBtn.hidden = true;
cancelBtn.hidden = true;
const section = cancelBtn.closest('section');
section.style.setProperty('--applet-rows', '2');
if (section._stripeObs) { section._stripeObs.disconnect(); section._stripeObs = null; }
section.style.setProperty('--applet-rows', '3');
});
};

View File

@@ -61,7 +61,7 @@ class WalletViewAppletContextTest(TestCase):
)
Applet.objects.get_or_create(
slug="wallet-payment",
defaults={"name": "Payment Methods", "grid_cols": 6, "grid_rows": 2, "context": "wallet"},
defaults={"name": "Payment Methods", "grid_cols": 6, "grid_rows": 3, "context": "wallet"},
)
self.client.force_login(self.user)
@@ -96,7 +96,7 @@ class ToggleWalletAppletsTest(TestCase):
)[0]
Applet.objects.get_or_create(
slug="wallet-payment",
defaults={"name": "Payment Methods", "grid_cols": 6, "grid_rows": 2, "context": "wallet"},
defaults={"name": "Payment Methods", "grid_cols": 6, "grid_rows": 3, "context": "wallet"},
)
self.client.force_login(self.user)

View File

@@ -12,7 +12,7 @@ class WalletDisplayTest(FunctionalTest):
for slug, name, cols, rows in [
("wallet-balances", "Wallet Balances", 3, 3),
("wallet-tokens", "Wallet Tokens", 3, 3),
("wallet-payment", "Payment Methods", 6, 2),
("wallet-payment", "Payment Methods", 6, 3),
]:
Applet.objects.get_or_create(
slug=slug,
@@ -141,6 +141,44 @@ class WalletDisplayTest(FunctionalTest):
)
)
def test_user_can_cancel_adding_payment_method(self):
# 1. Log in, navigate to wallet page
self.create_pre_authenticated_session("capman@test.io")
self.browser.get(self.live_server_url + "/dashboard/wallet/")
# 2. Click Add Payment Method
self.wait_for_slow(
lambda: self.browser.find_element(By.ID, "id_add_payment_method")
).click()
# 3. Wait for Cancel button to appear (visible after setup-intent fetch returns)
self.wait_for_slow(
lambda: self.assertFalse(
self.browser.find_element(By.ID, "id_cancel_payment_method").get_attribute("hidden")
)
)
# 3a. Assert applet expanded to 15 rows
rows = self.browser.execute_script(
"return document.getElementById('id_payment_methods')"
".style.getPropertyValue('--applet-rows').trim()"
)
self.assertEqual(rows, '15')
# 4. Click Cancel
self.browser.find_element(By.ID, "id_cancel_payment_method").click()
# 5. Assert Cancel + Save buttons are hidden again
self.wait_for_slow(
lambda: self.assertTrue(
self.browser.find_element(By.ID, "id_cancel_payment_method").get_attribute("hidden")
)
)
self.assertTrue(
self.browser.find_element(By.ID, "id_save_payment_method").get_attribute("hidden")
)
# 6. Assert applet collapses back to 3 grid rows
rows = self.browser.execute_script(
"return document.getElementById('id_payment_methods')"
".style.getPropertyValue('--applet-rows').trim()"
)
self.assertEqual(rows, '3')
def test_user_can_purchase_tithe_token_bundle(self):
# 1. Log in, navigate to wallet page
self.create_pre_authenticated_session("capman@test.io")