Samir Boulahtit
b04b36a232
Some checks failed
Loyalty dashboard's "Rejoignez notre programme" CTA flashed for one render tick on a 401-triggered redirect: Alpine initialised the component with loading=false + card=null, the template rendered `x-show="!loading && !card"`, then the async API call completed with 401, apiClient.redirectIfCustomerAreaUnauthorized fired, and the browser navigated away. Flip the initial state to loading=true so both the card view (x-show="!loading && card") and the join CTA (x-show="!loading && !card") stay hidden until the API call resolves. The template's existing `x-show="loading"` spinner branch covers the in-flight window. Same fix in loyalty-history.js (same x-show pattern). Customer profile + addresses already initialise loading=true, so no flicker there. User repro'd by deleting localStorage.customer_token + F5 on /account/loyalty: pre-fix flashed the CTA for ~half a second before redirect; post-fix should jump straight to the spinner, then to /account/login. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
99 lines
3.4 KiB
JavaScript
99 lines
3.4 KiB
JavaScript
// app/modules/loyalty/static/storefront/js/loyalty-dashboard.js
|
|
// Customer loyalty dashboard
|
|
const loyaltyDashboardLog = window.LogConfig.loggers.loyaltyDashboard || window.LogConfig.createLogger('loyaltyDashboard');
|
|
|
|
function customerLoyaltyDashboard() {
|
|
return {
|
|
...storefrontLayoutData(),
|
|
|
|
// Data
|
|
card: null,
|
|
program: null,
|
|
rewards: [],
|
|
transactions: [],
|
|
locations: [],
|
|
|
|
// Wallet
|
|
walletUrls: { google_wallet_url: null, apple_wallet_url: null },
|
|
|
|
// UI state.
|
|
// `loading` starts true so the "join the program" CTA
|
|
// (x-show="!loading && !card") doesn't flash for one render tick
|
|
// before init() / loadData() fires. With loading=true initially,
|
|
// both the card view and the join CTA stay hidden until the API
|
|
// call resolves — and if a 401 triggers a redirect, the user
|
|
// never sees the wrong UI.
|
|
loading: true,
|
|
showBarcode: false,
|
|
|
|
async init() {
|
|
loyaltyDashboardLog.info('Customer loyalty dashboard initializing...');
|
|
await this.loadData();
|
|
},
|
|
|
|
async loadData() {
|
|
this.loading = true;
|
|
try {
|
|
await Promise.all([
|
|
this.loadCard(),
|
|
this.loadTransactions()
|
|
]);
|
|
} catch (error) {
|
|
loyaltyDashboardLog.error('Failed to load loyalty data:', error);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
async loadCard() {
|
|
try {
|
|
const response = await apiClient.get('/storefront/loyalty/card');
|
|
if (response) {
|
|
this.card = response.card;
|
|
this.program = response.program;
|
|
this.rewards = response.program?.points_rewards || [];
|
|
this.locations = response.locations || [];
|
|
this.walletUrls = response.wallet_urls || { google_wallet_url: null, apple_wallet_url: null };
|
|
loyaltyDashboardLog.info('Loyalty card loaded:', this.card?.card_number);
|
|
}
|
|
} catch (error) {
|
|
if (error.status === 404) {
|
|
loyaltyDashboardLog.info('No loyalty card found');
|
|
this.card = null;
|
|
} else {
|
|
throw error;
|
|
}
|
|
}
|
|
},
|
|
|
|
async loadTransactions() {
|
|
try {
|
|
const response = await apiClient.get('/storefront/loyalty/transactions?limit=10');
|
|
if (response && response.transactions) {
|
|
this.transactions = response.transactions;
|
|
}
|
|
} catch (error) {
|
|
loyaltyDashboardLog.warn('Failed to load transactions:', error.message);
|
|
}
|
|
},
|
|
|
|
formatNumber(num) {
|
|
if (num == null) return '0';
|
|
return new Intl.NumberFormat(I18n.locale).format(num);
|
|
},
|
|
|
|
formatDate(dateString) {
|
|
if (!dateString) return '-';
|
|
try {
|
|
return new Date(dateString).toLocaleDateString(I18n.locale, {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric'
|
|
});
|
|
} catch (e) {
|
|
return dateString;
|
|
}
|
|
}
|
|
};
|
|
}
|