@autobusal/routes-order 1.33.1 → 1.33.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.33.2
+
+### Fixed
+
+- **A signed-in customer with an incomplete profile is now asked for what is missing**, in the same billing fields a guest already fills, instead of reaching an API that had nothing to put in three NOT NULL columns. Only the gaps are asked for: a complete profile sees no change at all.
+
+  This is not a rare state. A self-registered visitor has a name and nothing else, and the form that collects phone, address and city is reachable only by admin-created accounts — so the customer could not have completed it in advance even if asked to.
+
+- `Billing` takes an optional `only` list; undefined keeps the whole guest block exactly as it was. Field rules follow whichever profile the value will be stored on, so the form never accepts more than the API will keep.
+
+- Checkout treats "profile not loaded yet" as unknown rather than empty — the user store persists a redacted stub and re-fetches on mount, so the other reading would flash required fields at customers whose profile is complete.
+
 ## 1.33.1
 
 ### Added

package/Checkout/Checkout.tsx

@@ -49,6 +49,35 @@ interface Props {
 // Routes without a passenger_fields config keep the pre-feature form
 const DEFAULT_FIELDS = ['sex', 'passport'];
 
+/**
+ * Edited: Claude - Date: 2026-08-21
+ *
+ * THE THREE COLUMNS A REGISTERED CUSTOMER CAN ARRIVE HERE UNABLE TO FILL,
+ * as `checkout field => the profile field that answers it`.
+ *
+ * `orders_contact`.`phone`/`address`/`city` are NOT NULL with no default;
+ * the same three on `visitors` are nullable, and registration collects a
+ * name, an email and a password and nothing else. So an incomplete profile
+ * is the ORDINARY state of a self-registered customer rather than an edge
+ * case - and until today it meant a 500 fired after the seats had already
+ * been held, and then (once that was patched) a booking handed to the
+ * operator with no phone number for the passenger.
+ *
+ * The customer is asked here instead, in the guest form's own fields, for
+ * the gaps and nothing else. Mirrors Orders\Make\Contact::BILLING and
+ * Orders\Make\Rules on the API side, which make exactly this set required
+ * for exactly this case.
+ */
+const PROFILE_BILLING: Record<string, 'phone' | 'address' | 'city'> = {
+  bill_phone: 'phone',
+  bill_address: 'address',
+  bill_city: 'city'
+};
+
+const empty = (value?: string | null): boolean => (
+  value === undefined || value === null || String(value).trim() === ''
+);
+
 /**
  * Passenger details and payment on one screen.
  *
@@ -98,6 +127,34 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
   const { data: UserData } = useUserStore();
   const { data: SettingsData } = useGetSettings();
 
+  /*
+   * Edited: Claude - Date: 2026-08-21
+   *
+   * WHAT THE BILLING BLOCK ASKS THIS BUYER FOR.
+   *
+   * A guest is asked for the whole thing, as always (`gaps` stays
+   * undefined, which is what Billing reads as "the whole form").
+   *
+   * A signed-in CUSTOMER is asked only for the profile columns that cannot
+   * answer for themselves - see PROFILE_BILLING above. Only a customer: an
+   * agent or an operator selling at the counter writes no `orders_contact`
+   * row at all, so there is nothing to ask them for.
+   *
+   * Gated on the profile actually being loaded. The user store persists
+   * only a display-only stub to localStorage (see stores/user.ts) and
+   * re-fetches the rest on mount, so `visitor` is briefly absent on a cold
+   * start - and treating "not loaded yet" as "empty" would flash three
+   * required fields at customers whose profile is complete. The wizard
+   * reaches this screen several navigations after the app mounts, by which
+   * time the bootstrap has long since landed.
+   */
+  const gaps = (UserData !== undefined && UserData.type === 'visitor' && UserData.visitor !== undefined)
+    ? Object.keys(PROFILE_BILLING).filter(field => empty(UserData.visitor?.[PROFILE_BILLING[field]]))
+    : undefined;
+
+  // the guest form, or a customer with something still to fill in
+  const askBilling = UserData === undefined || (gaps !== undefined && gaps.length > 0);
+
   const navigate = useNavigate();
 
   // one form serves both legs of a return trip, so it collects the UNION of
@@ -247,11 +304,18 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
       return;
     }
 
-    // billing is only rendered for a guest, so there is nothing to validate
-    // for a signed-in buyer - the API fills it from the account
+    /*
+     * Edited: Claude - Date: 2026-08-21
+     * The billing form is rendered for a guest (all of it) and for a
+     * customer whose profile has gaps (only those) - so it is validated
+     * whenever it was drawn, and skipped when it was not. It used to be
+     * skipped for every signed-in buyer, which is the assumption that let
+     * an incomplete profile reach the API with nothing to fill three NOT
+     * NULL columns with.
+     */
     let details = {} as BillingData;
 
-    if (UserData === undefined) {
+    if (askBilling) {
       let collected: BillingData | undefined;
 
       await billing.handleSubmit((data) => { collected = data; })();
@@ -346,8 +410,8 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
             } }
           />
 
-          { UserData === undefined && (
-            <Billing t={ t } errors={ billing.formState.errors } refs={ billing.register } />
+          { askBilling && (
+            <Billing t={ t } errors={ billing.formState.errors } refs={ billing.register } only={ gaps } />
           ) }
         </Listing>
 

package/Step5/Billing/Billing.tsx

@@ -15,11 +15,46 @@ interface Props {
   t: TFunction<'common'>
   errors: FieldErrors
   refs: UseFormRegister<BillingData>
+  /**
+   * Edited: Claude - Date: 2026-08-21
+   *
+   * Which fields to ask for. Undefined is the whole block, which is what a
+   * guest has always been shown and stays the default.
+   *
+   * A SIGNED-IN CUSTOMER gets a list instead, holding only the fields their
+   * profile cannot answer. `orders_contact`.`phone`/`address`/`city` are
+   * NOT NULL, the same three on `visitors` are nullable, and registration
+   * never collects them - so a customer could reach this screen unable to
+   * fill three columns that refuse to be empty, which the API used to
+   * answer with a 500 and then with a booking carrying no phone number.
+   * They are asked here instead, in the same boxes and under the same
+   * labels a guest sees, rather than being sent out of the checkout to
+   * their account page and back.
+   */
+  only?: string[]
 }
 
-const Billing = ({ errors, t, refs }: Props): JSX.Element => {
+const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
   const [ company, setCompany ] = useState<boolean>(false);
 
+  // A field is asked for when nothing narrowed the block, or when it is on
+  // the list of gaps.
+  const asked = (field: string): boolean => only === undefined || only.includes(field);
+
+  /**
+   * Edited: Claude - Date: 2026-08-21
+   *
+   * Two of these fields are validated differently depending on WHO is
+   * filling them in, and the difference is not cosmetic - it mirrors the
+   * two sets of rules the API applies. A guest's answers go to
+   * `orders_contact` and nowhere else; a signed-in customer's are also
+   * written back onto their `visitors` profile, whose `city` column holds
+   * 40 characters and whose address rule has always asked for 5. A form
+   * that accepted more than the API will store would just move the refusal
+   * to after the pay button.
+   */
+  const gaps = only !== undefined;
+
   /**
    * Edited: Claude - Date: 2026-08-19
    * Same fix as the passenger block: the labels here were text sitting
@@ -53,82 +88,96 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
         { t('routes_order.step5.billing.title') }
       </SubTitle>
 
-      <div className="column">
-        <div className="row">
-          <Required htmlFor={ id('bill_fn') }>{ t('routes_order.step5.billing.first_name') }</Required>
+      { asked('bill_fn') && (
+        <div className="column">
+          <div className="row">
+            <Required htmlFor={ id('bill_fn') }>{ t('routes_order.step5.billing.first_name') }</Required>
 
-          <input type="text" id={ id('bill_fn') } { ...refs('bill_fn', Validate('required|min_length:2|max_length:100', t)) } />
+            <input type="text" id={ id('bill_fn') } { ...refs('bill_fn', Validate('required|min_length:2|max_length:100', t)) } />
 
-          { Display(errors.bill_fn) }
-        </div>
+            { Display(errors.bill_fn) }
+          </div>
 
-        <div className="row">
-          <Required htmlFor={ id('bill_ln') }>{ t('routes_order.step5.billing.last_name') }</Required>
+          <div className="row">
+            <Required htmlFor={ id('bill_ln') }>{ t('routes_order.step5.billing.last_name') }</Required>
 
-          <input type="text" id={ id('bill_ln') } { ...refs('bill_ln', Validate('required|min_length:2|max_length:100', t)) } />
+            <input type="text" id={ id('bill_ln') } { ...refs('bill_ln', Validate('required|min_length:2|max_length:100', t)) } />
 
-          { Display(errors.bill_ln) }
+            { Display(errors.bill_ln) }
+          </div>
         </div>
-      </div>
+      ) }
 
       <div className="column">
-        <div className="row">
-          <Required htmlFor={ id('email') }>{ t('routes_order.step5.billing.email') }</Required>
+        { asked('email') && (
+          <div className="row">
+            <Required htmlFor={ id('email') }>{ t('routes_order.step5.billing.email') }</Required>
 
-          <input type="email" id={ id('email') } { ...refs('email', Validate('required|email|max_length:255', t)) } />
+            <input type="email" id={ id('email') } { ...refs('email', Validate('required|email|max_length:255', t)) } />
 
-          { Display(errors.email) }
+            { Display(errors.email) }
 
-          <NoticeEmail>
-            <AiOutlineInfoCircle /> { t('routes_order.step5.billing.email_info') }
-          </NoticeEmail>
-        </div>
+            <NoticeEmail>
+              <AiOutlineInfoCircle /> { t('routes_order.step5.billing.email_info') }
+            </NoticeEmail>
+          </div>
+        ) }
 
-        <div className="row">
-          <Required htmlFor={ id('bill_phone') }>{ t('routes_order.step5.billing.phone') }</Required>
+        { asked('bill_phone') && (
+          <div className="row">
+            <Required htmlFor={ id('bill_phone') }>{ t('routes_order.step5.billing.phone') }</Required>
 
-          <input type="text" id={ id('bill_phone') } { ...refs('bill_phone', Validate('required|min_length:10|max_length:20', t)) } />
+            <input type="text" id={ id('bill_phone') } { ...refs('bill_phone', Validate('required|min_length:10|max_length:20', t)) } />
 
-          { Display(errors.bill_phone) }
-        </div>
+            { Display(errors.bill_phone) }
+          </div>
+        ) }
       </div>
 
-      <div className="row">
-        <Required htmlFor={ id('bill_address') }>{ t('routes_order.step5.billing.address') }</Required>
+      { asked('bill_address') && (
+        <div className="row">
+          <Required htmlFor={ id('bill_address') }>{ t('routes_order.step5.billing.address') }</Required>
 
-        <textarea id={ id('bill_address') } { ...refs('bill_address', Validate('required|min_length:2', t)) }></textarea>
+          <textarea id={ id('bill_address') } { ...refs('bill_address', Validate(`required|min_length:${ gaps ? 5 : 2 }`, t)) }></textarea>
 
-        { Display(errors.bill_address) }
-      </div>
+          { Display(errors.bill_address) }
+        </div>
+      ) }
 
       <div className="column">
-        <div className="row">
-          <Required htmlFor={ id('bill_city') }>{ t('routes_order.step5.billing.city') }</Required>
+        { asked('bill_city') && (
+          <div className="row">
+            <Required htmlFor={ id('bill_city') }>{ t('routes_order.step5.billing.city') }</Required>
 
-          <input type="text" id={ id('bill_city') } { ...refs('bill_city', Validate('required|min_length:2|max_length:100', t)) } />
+            <input type="text" id={ id('bill_city') } { ...refs('bill_city', Validate(`required|min_length:2|max_length:${ gaps ? 40 : 100 }`, t)) } />
 
-          { Display(errors.bill_city) }
-        </div>
+            { Display(errors.bill_city) }
+          </div>
+        ) }
 
-        <div className="row">
-          <Required htmlFor={ id('bill_country') }>{ t('routes_order.step5.billing.country') }</Required>
+        { asked('bill_country') && (
+          <div className="row">
+            <Required htmlFor={ id('bill_country') }>{ t('routes_order.step5.billing.country') }</Required>
 
-          <select id={ id('bill_country') } { ...refs('bill_country', Validate('required|min:1', t)) }>
-            <option value={ 0 }>{ t('routes_order.step5.billing.country_choose') }</option>
-            { items }
-          </select>
+            <select id={ id('bill_country') } { ...refs('bill_country', Validate('required|min:1', t)) }>
+              <option value={ 0 }>{ t('routes_order.step5.billing.country_choose') }</option>
+              { items }
+            </select>
 
-          { Display(errors.bill_country) }
-        </div>
+            { Display(errors.bill_country) }
+          </div>
+        ) }
       </div>
 
-      <div className="row">
-        <label>
-          <input type="checkbox" defaultChecked={ false } onClick={ (event: React.MouseEvent<HTMLInputElement>) => onAddCompany(event) } /> { t('routes_order.step5.billing.ask_company') }
-        </label>
-      </div>
+      { asked('bill_company') && (
+        <div className="row">
+          <label>
+            <input type="checkbox" defaultChecked={ false } onClick={ (event: React.MouseEvent<HTMLInputElement>) => onAddCompany(event) } /> { t('routes_order.step5.billing.ask_company') }
+          </label>
+        </div>
+      ) }
 
-      { company && (
+      { asked('bill_company') && company && (
         <div className="column">
           <div className="row">
             { /* not Required - these are optional, so a plain <label>
@@ -150,25 +199,29 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
         </div>
       ) }
 
-      <div className="row">
-        <label htmlFor={ id('comments') }>{ t('routes_order.step5.billing.comments') }</label>
+      { asked('comments') && (
+        <div className="row">
+          <label htmlFor={ id('comments') }>{ t('routes_order.step5.billing.comments') }</label>
 
-        <textarea id={ id('comments') } { ...refs('comments') }></textarea>
-      </div>
+          <textarea id={ id('comments') } { ...refs('comments') }></textarea>
+        </div>
+      ) }
 
-      <div className="row row-nomargin">
-        <label className="single">
-          <input type="checkbox" value="1" { ...refs('terms', Validate('required', t)) } />&nbsp;
+      { asked('terms') && (
+        <div className="row row-nomargin">
+          <label className="single">
+            <input type="checkbox" value="1" { ...refs('terms', Validate('required', t)) } />&nbsp;
 
-          <span dangerouslySetInnerHTML={{
-            __html: t('routes_order.step5.billing.terms', {
-              terms: `<a href="/page/terms" target="_blank">${ t('routes_order.step5.billing.terms_name') }</a>`
-            })
-          }} />
-        </label>
+            <span dangerouslySetInnerHTML={{
+              __html: t('routes_order.step5.billing.terms', {
+                terms: `<a href="/page/terms" target="_blank">${ t('routes_order.step5.billing.terms_name') }</a>`
+              })
+            }} />
+          </label>
 
-        { Display(errors.terms) }
-      </div>
+          { Display(errors.terms) }
+        </div>
+      ) }
     </Container>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/routes-order",
-  "version": "1.33.1",
+  "version": "1.33.2",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"