several fixes to payment applet styling & script
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
@@ -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');
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
@@ -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")
|
||||
|
||||
Reference in New Issue
Block a user