Skip to content

refactor(weekly-time-slots): switch placement, overlays, dynamic time format#3307

Open
MdAsifHossainNadim wants to merge 3 commits into
refactor/simplify-settings-to-flat-arrayfrom
feat/weekly-time-slots-ui-refinements
Open

refactor(weekly-time-slots): switch placement, overlays, dynamic time format#3307
MdAsifHossainNadim wants to merge 3 commits into
refactor/simplify-settings-to-flat-arrayfrom
feat/weekly-time-slots-ui-refinements

Conversation

@MdAsifHossainNadim

Copy link
Copy Markdown
Contributor

Summary

Refines the shared WeeklyTimeSlots component (introduced in #3305) based on a design review of the admin Delivery Days schedule. UI/UX polish and time-format correctness — no public API changes.

Changes

  • Switch placement — the day toggle now sits beside the time pickers, aligned in a fixed column across every row (natural "day → toggle → times" order, like the legacy store-hours UI).
  • Disabled days — pickers stay visible under an opacity overlay (read-only, non-interactive) instead of being hidden. Disabling a day that is in an error state resets it to valid default times, so a disabled row never shows a stale error or empty Opens at / Closed at placeholders.
  • Full Day — the closing field renders as a static, read-only, overlayed (dimmed, white background) "Full Day" placeholder; only the opening stays editable.
  • Validation message — nests directly under the day name (desktop + mobile), text-sm, red.
  • Dynamic time format — times render with the exact WP time format (Settings → General → Time Format), so presets (g:i a, g:i A, H:i) and custom formats all display faithfully and localize the meridiem (verified in Bengali).

Files

  • src/components/WeeklyTimeSlots/index.tsx
  • src/components/WeeklyTimeSlots/TimeDropdown.tsx — new readOnly prop
  • src/components/WeeklyTimeSlots/utils.ts

Testing

  • ESLint + production build clean.
  • Verified live on the admin Delivery Days page (Chrome): switch alignment, disabled opacity overlay, disable-with-error reset to valid times, Full Day overlayed read-only closing, error message under the day name, and dynamic time-format switching (including a custom format), with no component console errors.

Related

🤖 Generated with Claude Code

MdAsifHossainNadim and others added 2 commits July 7, 2026 14:25
Introduce a reusable weekly time-slot schedule editor exported from the
Dokan components library so both Lite (store open-close) and Pro
(delivery-time) can share one implementation.

- WeeklyTimeSlots supports single (one range/day) and multiple (N ranges
  with add/remove) modes with pluggable validation and messages.
- TimeDropdown renders a preset list ("Full Day" + step increments) and
  stores canonical `g:i a` values; display localizes via dateI18n so it
  honours WP 12/24-hour format and translated meridiem.
- Extract DokanSwitch into its own Switch.tsx so the barrel can export
  WeeklyTimeSlots without a circular import.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
… format

- Place the day toggle beside the time pickers, aligned in a fixed column.
- Keep disabled days' pickers visible under an opacity overlay instead of
  hiding them; disabling a day that is in error resets it to valid default
  times (no stale error, no empty placeholders).
- Show the Full Day static closing field overlayed (dimmed, white background)
  and read-only; only the opening stays editable.
- Nest the validation message directly under the day name (desktop + mobile).
- Render times with the exact WP time format (Settings -> General), so presets
  and custom formats all display faithfully.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f20452a5-e2ce-424d-b96c-7d02cb8af416

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/weekly-time-slots-ui-refinements

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@MdAsifHossainNadim MdAsifHossainNadim self-assigned this Jul 7, 2026
Base automatically changed from feat/weekly-time-slots-component to refactor/simplify-settings-to-flat-array July 7, 2026 11:04
…e-slots-ui-refinements

Resolve add/add conflicts in src/components/WeeklyTimeSlots/{TimeDropdown,index,utils}
by keeping the refinements branch's versions. The base absorbed the #3305 component
(pre-refinement); ours is that same component plus the switch-placement, read-only
overlay, and dynamic time-format refinements — a strict superset, so nothing from
base is lost.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant