Introduction
Recently I've been trying to gain a better understanding of using the date object in JavaScript, to do this I decided that I would build an NPM installable package for estimated deliveries that could be used on product detail pages or on checkouts.
Project details
This is a react component for configuring and displaying estimated delivery dates for ecommerce websites. This components allows users to configure how they wish the estimated delivery to work, this includes being able to set to following configuration to suit requirements.
Business Days - Set which days the business is open, this is used to dictate what days orders can be processed.
Delivery Days - Set which days the business can deliver on, for example, you could exclude weekend deliveries.
Holidays - Used for passing in an array of holidays, an example of this would be business holidays or bank holidays.
Next day delivery & Cut off time - Configured together allows the ability to have next day deliveries and display a countdown timer based on the cut off time, for example, 13:00.
Time zone & Date format - These are used to standardise the date and countdown displayed to all customers, regardless of where they are in the world.
Delivery day incrementor - Used to set number of days delivery will take, this was added because not all companies offer next day.
Date range & Date range number - In combination, this allows a date range to be displayed and configured for how many days between, for example, between Monday and Thursday.
Various text props to be used to configure the wording to suit requirements including translation.
Example Configuration
This component takes in various props to configure based on requirement, below is an example setup.
<EstimatedDeliveryComponent
businessDays={{
"monday": true,
"tuesday": true,
"wednesday": true,
"thursday": true,
"friday": true,
"saturday": false,
"sunday": false
}}
deliveryDays={{
"monday": true,
"tuesday": true,
"wednesday": true,
"thursday": false,
"friday": true,
"saturday": true,
"sunday": false
}}
cutOffTime={"23:50"}
holidays={["07/08/2024", "08/08/2024", "09/08/2024", "10/08/2024", "11/08/2024"]}
timezone={"Europe/London"}
dateFormat={"en-GB"}
enableCountDownTimer={true}
nextDayDeliveryAvailableText={"Next day delivery available."}
nextDayDeliveryNotAvailableText={"Next day delivery NOT available."}
estimatedDeliveryText={"Estimated delivery date:"}
orderWithinText={"Order within"}
timerText={{hours: "h", minutes: "m", seconds: "s"}}
isNextDayAvailable={true}
deliveryDayIncrement={1}
showDateRange={true}
dateRange={2}
loadingText={"Getting estimate..."}
>
<img alt="" src={TheIcon} height={24} width={24}></img>
</EstimatedDeliveryComponent>
This would display in the following way.
With timer for next day delivery
Without timer & date range enabled
Challenges
This project had a large number of challenges, because I had set out to learn more about the date object in JavaScript, I had to avoid adding extra dependencies to the project like Moment.js. I also need to make the component configurable and reusable an a wide array of scenarios.
When working with the date, I identified two key important things I needed to consider.
Localisation - I wanted to ensure users would see the date and timer as intended by the business configuring the estimated delivery. This meant if the business was running on a certain time zone, then the timer would be based on that time zone and not the users.
Copy configuration - To allow the user to set any of the text available, this is to allow for multiple languages, or just to match the style of language used on the site.
Finding available delivery date - I encountered two challenges with this, the first was how to handle finding an available delivery day, for example should I use a loop and look forward, or should I check a day at a time, in the end I decided on using recursion to check a day at a time, this kept things more simple and gave me greater control. The second challenge I had was what conditions I should be checking for. Originally, I just has business days and holidays, but I quicky realised that isn't how most businesses function, I also had next day delivery enabled by default, but this is not something that every company with offer. The approach I took was to make things as configurable as possible to suit a wider range of needs, but also allowing simple configuration as well.
To style, or not to style, I didn't want to impose my own style choices, so I option to add basic spacings just to keep everything clean looking, but added classes in important areas so styles could be added easily if required.
Conclusion
Often things that seem quite straightforward can turn out to be complex. Looking at the component from a reusable point of view and considering how that would work with the date added an extra level of complexity, but it was a great learning experience.