Some checks failed
Add support for linking a loyalty program's Terms & Conditions to a
CMS page, replacing the simple terms_text textarea with a scalable
content source that supports rich HTML, multi-language, and store
overrides.
- Migration loyalty_006: adds terms_cms_page_slug column to
loyalty_programs (nullable, String 200).
- Model + schemas: new field on LoyaltyProgram, ProgramCreate,
ProgramUpdate, ProgramResponse.
- Program form: new "CMS Page Slug" input field with hint text,
placed above the legacy terms_text (now labeled as "fallback").
- Enrollment page: when terms_cms_page_slug is set, JS fetches the
CMS page content via /storefront/cms/pages/{slug} and displays
rendered HTML in the modal. Falls back to terms_text when no slug.
- i18n: 3 new keys in 4 locales (terms_cms_page, terms_cms_page_hint,
terms_fallback_hint).
Legacy terms_text field preserved as fallback for existing programs.
342 tests pass.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
130 lines
5.1 KiB
JavaScript
130 lines
5.1 KiB
JavaScript
// app/modules/loyalty/static/storefront/js/loyalty-enroll.js
|
|
// Self-service loyalty enrollment
|
|
const loyaltyEnrollLog = window.LogConfig.loggers.loyaltyEnroll || window.LogConfig.createLogger('loyaltyEnroll');
|
|
|
|
function customerLoyaltyEnroll() {
|
|
return {
|
|
...storefrontLayoutData(),
|
|
|
|
// Program info
|
|
program: null,
|
|
|
|
// Form data
|
|
form: {
|
|
email: '',
|
|
first_name: '',
|
|
last_name: '',
|
|
phone: '',
|
|
birthday: '',
|
|
terms_accepted: false,
|
|
marketing_consent: false
|
|
},
|
|
|
|
// State
|
|
loading: false,
|
|
enrolling: false,
|
|
enrolled: false,
|
|
enrolledCard: null,
|
|
error: null,
|
|
showTerms: false,
|
|
termsHtml: null,
|
|
|
|
async init() {
|
|
loyaltyEnrollLog.info('Customer loyalty enroll initializing...');
|
|
await this.loadProgram();
|
|
// Load CMS T&C content if a page slug is configured
|
|
if (this.program?.terms_cms_page_slug) {
|
|
this.loadTermsFromCms(this.program.terms_cms_page_slug);
|
|
}
|
|
},
|
|
|
|
async loadTermsFromCms(slug) {
|
|
try {
|
|
const response = await apiClient.get(`/storefront/cms/pages/${slug}`);
|
|
if (response?.content_html) {
|
|
this.termsHtml = response.content_html;
|
|
}
|
|
} catch (e) {
|
|
loyaltyEnrollLog.warn('Could not load CMS T&C page:', e.message);
|
|
}
|
|
},
|
|
|
|
async loadProgram() {
|
|
this.loading = true;
|
|
try {
|
|
const response = await apiClient.get('/storefront/loyalty/program');
|
|
if (response) {
|
|
this.program = response;
|
|
loyaltyEnrollLog.info('Program loaded:', this.program.display_name);
|
|
}
|
|
} catch (error) {
|
|
if (error.status === 404) {
|
|
loyaltyEnrollLog.info('No loyalty program available');
|
|
this.program = null;
|
|
} else {
|
|
loyaltyEnrollLog.error('Failed to load program:', error);
|
|
this.error = I18n.t('loyalty.enrollment.errors.load_failed');
|
|
}
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
async submitEnrollment() {
|
|
if (!this.form.email || !this.form.first_name || !this.form.terms_accepted) {
|
|
return;
|
|
}
|
|
|
|
this.enrolling = true;
|
|
this.error = null;
|
|
|
|
try {
|
|
const response = await apiClient.post('/storefront/loyalty/enroll', {
|
|
email: this.form.email,
|
|
customer_name: [this.form.first_name, this.form.last_name].filter(Boolean).join(' '),
|
|
customer_phone: this.form.phone || null,
|
|
customer_birthday: this.form.birthday || null,
|
|
marketing_email_consent: this.form.marketing_consent,
|
|
marketing_sms_consent: this.form.marketing_consent
|
|
});
|
|
|
|
if (response) {
|
|
const cardNumber = response.card?.card_number || response.card_number;
|
|
loyaltyEnrollLog.info('Enrollment successful:', cardNumber);
|
|
|
|
// Store wallet URLs for the success page (no auth needed)
|
|
if (response.wallet_urls) {
|
|
sessionStorage.setItem('loyalty_wallet_urls', JSON.stringify(response.wallet_urls));
|
|
}
|
|
|
|
// Store enrollment context for the success page
|
|
sessionStorage.setItem('loyalty_enroll_context', JSON.stringify({
|
|
already_enrolled: response.already_enrolled || false,
|
|
allow_cross_location: response.allow_cross_location ?? true,
|
|
enrolled_at_store_name: response.enrolled_at_store_name || null,
|
|
merchant_locations: response.merchant_locations || [],
|
|
}));
|
|
|
|
// Redirect to success page — pass already_enrolled in the
|
|
// URL so the message survives page refreshes (sessionStorage
|
|
// is supplementary for the location list).
|
|
const currentPath = window.location.pathname;
|
|
const alreadyFlag = response.already_enrolled ? '&already=1' : '';
|
|
const successUrl = currentPath.replace(/\/join\/?$/, '/join/success') +
|
|
'?card=' + encodeURIComponent(cardNumber) + alreadyFlag;
|
|
window.location.href = successUrl;
|
|
}
|
|
} catch (error) {
|
|
loyaltyEnrollLog.error('Enrollment failed:', error);
|
|
if (error.message?.includes('already')) {
|
|
this.error = I18n.t('loyalty.enrollment.errors.email_exists');
|
|
} else {
|
|
this.error = error.message || I18n.t('loyalty.enrollment.errors.failed');
|
|
}
|
|
} finally {
|
|
this.enrolling = false;
|
|
}
|
|
}
|
|
};
|
|
}
|