Production Timeline

This document covers the production timeline logic for Made-to-Order (MTO) products on the tracking page.

Timeline Selection

The system determines production timelines based on the _PRODUCTION_DAYS line item property:

const DEFAULT_PRODUCTION_DAYS = 56;

const getProductionDays = (shipment) => {
  const lineItem = shipment.line_items.find((item) =>
    item.properties?.some((property) => property.name === "_PRODUCTION_DAYS")
  );
  return Number(
    lineItem?.properties?.find((property) => property.name === "_PRODUCTION_DAYS")?.value
  ) || DEFAULT_PRODUCTION_DAYS;
};

If no _PRODUCTION_DAYS property is found, the system defaults to 56 days.

Predefined Timeline Configurations

For specific _PRODUCTION_DAYS values, hardcoded timelines are used:

Production Days	Start (days)	Reminder (days)	End (days)	Total to Production Complete
49	10	11	10	31 days
56 (default)	13	13	13	39 days

Custom Timeline Calculation

For _PRODUCTION_DAYS values without a predefined configuration, the system calculates milestones dynamically:

const AVERAGE_DELIVERY_DAYS = 11;

const calculateCustomTimeline = (productionDays, averageDeliveryDays) => {
  const numOfTimelines = 3; // (start, reminder, end)
  return Math.round((productionDays - averageDeliveryDays) / numOfTimelines);
};

Formula: Math.round((productionDays - 11) / 3)

Example calculated timelines:

Production Days	Start (days)	Reminder (days)	End (days)	Total to Production Complete
21	3	3	3	9 days
28	6	6	6	18 days
35	8	8	8	24 days
42	10	10	10	30 days
63	17	17	17	51 days
70	20	20	20	60 days
77	22	22	22	66 days
84	24	24	24	72 days

Timeline Phases

Each timeline has three cumulative phases with day offsets:

Order Created (processed_at)
  ↓ + timeline.start days
────────────────────────────────
Production Starts
Message: "Your dress is in progress. ✂️ Sit tight while our team works their magic"
  ↓ + timeline.reminder days
────────────────────────────────
Production Reminder
Message: "It's almost ready! Just putting on the finishing touches ✨"
  ↓ + timeline.end days
────────────────────────────────
Production Complete
Message: "We're packing up your dress! We'll update you when it's in transit"
  ↓
────────────────────────────────
Fulfillment Created (optional secondary cycle)
  ↓ + fulfillmentTimeline.reminder days
  ↓ + fulfillmentTimeline.end days
────────────────────────────────

Timeline Calculation

// Base calculation
const calculateDate = (days) => days * 86400 * 1000; // days to milliseconds

// Get timeline based on _PRODUCTION_DAYS property
const productionDays = getProductionDays(shipment);
const timeline = productionTimeline[productionDays.toString()]
  ? productionTimeline[productionDays.toString()]
  : {
      start: calculateCustomTimeline(productionDays, AVERAGE_DELIVERY_DAYS),
      reminder: calculateCustomTimeline(productionDays, AVERAGE_DELIVERY_DAYS),
      end: calculateCustomTimeline(productionDays, AVERAGE_DELIVERY_DAYS),
    };

// Production cycle
const productionStartDate = new Date(orderCreated.getTime() + calculateDate(timeline.start));
const productionReminderDate = new Date(productionStartDate.getTime() + calculateDate(timeline.reminder));
const productionEndDate = new Date(productionReminderDate.getTime() + calculateDate(timeline.end));

// Fulfillment cycle (if order is fulfilled)
const fulfillmentStartDate = new Date(fulfillment.created_at);
const fulfillmentReminderDate = new Date(fulfillmentStartDate.getTime() + calculateDate(fulfillmentTimeline.reminder));
const fulfillmentEndDate = new Date(fulfillmentReminderDate.getTime() + calculateDate(fulfillmentTimeline.end));

"In Production" Status Rules

Status shows "In Production" only when:

1. Current date is past production start date, AND
2. No real carrier scan exists yet (no InTransit checkpoint)

Business Context: Prevents showing "In Production" before work actually begins, and automatically advances to "In Transit" once carrier scans the package.

Production Status Messages

Progressive Messaging

For "In Production" status, display messages based on timeline progress:

const messages = {
  start: "Your dress is in progress. ✂️ Sit tight while our team works their magic",
  reminder: "It's almost ready! Just putting on the finishing touches ✨",
  end: "We're packing up your dress! We'll update you when it's in transit"
};

// Show start message if past production start date
if (now > productionStartDate) {
  show messages.start
}

// Show reminder message if past reminder date
if (now > productionReminderDate) {
  show messages.reminder
}

// Show end message if past production end date
if (now > productionEndDate) {
  show messages.end
}

Business Context: Sets customer expectations during production phase without overwhelming them with technical fulfillment details. Creates transparency and reduces "where is my order?" inquiries.

Related Files

Theme Repository

• assets/tracking--order.js - Web Component with timeline logic
• assets/tracking--get-shipment-status.js - Status determination including production state
• snippets/global--store-variables.liquid - Timeline configurations