date input pre-fills with next billing date & cannot press go if the input has value (#24)

Author: iisa

src/form-sections/date.ts

@@ -19,13 +19,15 @@ type InvalidDateErrorCode =
   | 'date_too_early'
   | 'second_donation_this_month'
   | 'date_out_of_range'
+  | 'same_next_billing_date'
   | '';
 
 enum InvalidDateErrorMessages {
   invalid_date = 'Please enter a valid date format (YYYY-MM-DD)',
   date_too_early = 'Date must be at least tomorrow.',
   second_donation_this_month = 'The date you selected will result in an additional donation for this month.',
   date_out_of_range = 'New donation date must be within the next 12 months.',
+  same_next_billing_date = '',
 }
 @customElement('ia-mgc-edit-date')
 export class MGCEditPlanDate extends LitElement {
@@ -141,6 +143,13 @@ export class MGCEditPlanDate extends LitElement {
     this.newDate = undefined;
   }
 
+  formatDateToYYYYMMDD(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+    const dateNum = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${dateNum}`;
+  }
+
   async clearStatusMessaging() {
     this.errorMessage = '';
     this.warningMessage = '';
@@ -180,6 +189,18 @@ export class MGCEditPlanDate extends LitElement {
     const chosenDate = new Date(validDate);
     chosenDate.setHours(0, 0, 0, 0);
 
+    // check input value against next billing date
+    const isNextBillingDate = this.plan?.nextBillingDate
+      ? this.formatDateToYYYYMMDD(new Date(this.plan.nextBillingDate)) ===
+        this.formatDateToYYYYMMDD(chosenDate)
+      : false;
+    if (isNextBillingDate) {
+      return {
+        valid: false,
+        errorCode: 'same_next_billing_date',
+      };
+    }
+
     if (chosenDate < today) {
       return {
         valid: false,
@@ -246,6 +267,10 @@ export class MGCEditPlanDate extends LitElement {
   }
 
   get editDateForm(): TemplateResult {
+    const nextBillingDateYYYYMMDD = this.plan?.nextBillingDate
+      ? this.formatDateToYYYYMMDD(new Date(this.plan.nextBillingDate))
+      : '';
+    const inputValueToUse = this.dateInput?.value ?? nextBillingDateYYYYMMDD;
     return html`
       <section>
         <form id="edit-date">
@@ -264,7 +289,7 @@ export class MGCEditPlanDate extends LitElement {
               name="edit-date"
               min=${this.minDate}
               max=${this.maxDate}
-              value=""
+              .value=${inputValueToUse}
               @focus=${() => this.clearStatusMessaging()}
               @change=${async () => {
                 this.clearStatusMessaging();

src/models/plan.ts

@@ -65,14 +65,15 @@ export class MonthlyPlan {
     this.plan.amount = newAmount;
   }
 
-  setNextBillingDate(newDate: string): void {
-    this.payment.nextBillingDate.oldDate = this.payment.nextBillingDate.date;
-    this.payment.nextBillingDate.date = newDate;
+  get nextBillingDate(): string {
+    // iso08601 date string
+    return this.payment.nextBillingDate.date;
   }
 
-  get startDate(): string {
-    const date = new Date(this.plan.start_date);
-    return date.toLocaleDateString();
+  setNextBillingDate(newDate: string) {
+    // iso08601 date string
+    this.payment.nextBillingDate.oldDate = this.payment.nextBillingDate.date;
+    this.payment.nextBillingDate.date = newDate;
   }
 
   get nextBillingDateLocale(): string {

test/form-sections/date.test.ts

@@ -66,6 +66,13 @@ const plan = new MonthlyPlan({
   },
 });
 
+const nextBillingDateYYYYMMDD = `${nextPaymentFirstOfMonth.getFullYear()}-${String(
+  nextPaymentFirstOfMonth.getMonth() + 1
+).padStart(2, '0')}-${String(nextPaymentFirstOfMonth.getDate()).padStart(
+  2,
+  '0'
+)}`;
+
 describe('<ia-mgc-edit-date>', () => {
   it('input validates before allowing form submission', async () => {
     const el = await fixture<MGCEditPlanDate>(
@@ -130,10 +137,11 @@ describe('<ia-mgc-edit-date>', () => {
         '0'
       )}`
     );
+    expect(dateInput!.value).to.equal(nextBillingDateYYYYMMDD);
 
     // checks if input value is invalid
     // date before today
-    dateInput!.setAttribute('value', '2008-11-11');
+    dateInput!.value = '2008-11-11';
     dateInput!.dispatchEvent(new Event('change'));
     await el.updateComplete;
 
@@ -144,7 +152,7 @@ describe('<ia-mgc-edit-date>', () => {
     const twoYearsFromNowStr = `${twoYearsFromNow.getFullYear()}-${String(
       twoYearsFromNow.getMonth() + 1
     ).padStart(2, '0')}-${String(twoYearsFromNow.getDate()).padStart(2, '0')}`;
-    dateInput!.setAttribute('value', twoYearsFromNowStr);
+    dateInput!.value = twoYearsFromNowStr;
     dateInput!.dispatchEvent(new Event('change'));
     await el.updateComplete;
 
@@ -162,7 +170,7 @@ describe('<ia-mgc-edit-date>', () => {
     const lastDayOfCurrentMonthStr = `${lastDayOfCurrentMonth.getFullYear()}-${String(
       lastDayOfCurrentMonth.getMonth() + 1
     ).padStart(2, '0')}-${lastDayOfCurrentMonth.getDate()}`;
-    dateInput!.setAttribute('value', lastDayOfCurrentMonthStr);
+    dateInput!.value = lastDayOfCurrentMonthStr;
     dateInput!.dispatchEvent(new Event('change'));
     await el.updateComplete;
 
@@ -187,7 +195,7 @@ describe('<ia-mgc-edit-date>', () => {
     const nextMonthStr = `${nextMonth.getFullYear()}-${String(
       nextMonth.getMonth() + 1
     ).padStart(2, '0')}-${String(nextMonth.getDate()).padStart(2, '0')}`;
-    dateInput!.setAttribute('value', nextMonthStr);
+    dateInput!.value = nextMonthStr;
     dateInput!.dispatchEvent(new Event('change'));
 
     await el.updateComplete;