OSP Projects

Tag: orders

  • Deco Order Manager – Daily Changelog – September 29, 2025

    Deco Order Manager – Daily Changelog – September 29, 2025

    Daily Change Log – September 29, 2025

    Color Visibility & Accessibility Improvements

    Overview

    Comprehensive overhaul of the application’s color scheme to address visibility issues in both light and dark modes. All changes focused on improving contrast ratios, readability, and overall user experience.

    Files Modified

    • src/app/globals.css – Core color system updates
    • src/components/ui/button.tsx – Button component color improvements
    • src/components/ui/badge.tsx – Badge component color fixes
    • src/components/navbar.tsx – Status indicator color updates
    • src/app/dashboard/campaigns/[id]/page.tsx – Campaign details color fixes
    • src/app/dashboard/campaigns/[id]/verify/page.tsx – Verification page color improvements

    Key Changes

    1. Enhanced Color Contrast System

    • Light Mode Improvements:
    • Updated muted text from --osp-gray-600 to --osp-gray-700 for better readability
    • Enhanced border visibility with --osp-gray-400 instead of --osp-gray-300
    • Improved primary colors using --osp-primary-600 for stronger contrast
    • Enhanced secondary and status colors for better visibility
    • Dark Mode Overhaul:
    • Switched to midnight blue palette for background (--midnight-blue-950)
    • Used card background --midnight-blue-900 for better layering
    • Enhanced muted text with --midnight-blue-300 for improved contrast
    • Brightened accent colors (--osp-primary-400, --osp-blue-400) for dark backgrounds

    2. Global Table Styling Enhancements

    • Added comprehensive table styles with proper border collapse
    • Enhanced table headers with better background colors and font weights
    • Improved row hover states for better user interaction
    • Added consistent border styling using semantic color tokens

    3. Component Color Improvements

    • Button Components:
    • Fixed destructive button text to use --destructive-foreground instead of generic foreground
    • Enhanced outline button borders and focus states
    • Improved ghost button hover states
    • Badge Components:
    • Corrected destructive badge text colors for better contrast
    • Enhanced focus and hover states

    4. Semantic Color Token Migration

    Replaced all hardcoded color classes with semantic tokens:

    • bg-red-500 → bg-danger
    • text-red-600 → text-danger
    • bg-green-500 → bg-success
    • text-green-600 → text-success
    • bg-blue-500 → bg-info
    • text-blue-600 → text-info
    • bg-yellow-500 → bg-alert
    • text-yellow-600 → text-alert

    5. Enhanced Status Indicators

    • Updated scheduler status indicators in navbar to use semantic colors
    • Improved order status badges with proper contrast ratios
    • Enhanced error/success message styling throughout the application

    6. CSS Override System

    Added comprehensive CSS overrides for common color classes to ensure consistency:

    • Global text color overrides for better semantic color usage
    • Enhanced background color classes with proper transparency support
    • Improved hover and focus states across all interactive elements

    Technical Details

    Color Variables Updated

    /* Light Mode Enhancements */
--muted: var(--osp-gray-200);           /* Was: --osp-gray-100 */
--muted-foreground: var(--osp-gray-700); /* Was: --osp-gray-600 */
--primary: var(--osp-primary-600);      /* Was: --osp-primary-500 */
--border: var(--osp-gray-400);          /* Was: --osp-gray-300 */

/* Dark Mode Improvements */
--background: var(--midnight-blue-950); /* Was: --osp-gray-900 */
--card: var(--midnight-blue-900);       /* Was: --osp-gray-800 */
--muted: var(--midnight-blue-800);      /* Was: --osp-gray-700 */
--primary: var(--osp-primary-400);      /* Was: --osp-primary-500 */

    New CSS Rules Added

    • Enhanced table styling for better visibility
    • Improved button hover states
    • Semantic color class overrides
    • Better support for semi-transparent backgrounds using color-mix()

    Impact & Benefits

    • Accessibility: Improved contrast ratios meet WCAG guidelines
    • Consistency: Unified color system across all components
    • Maintainability: Centralized color management through semantic tokens
    • User Experience: Better visual hierarchy and readability
    • Theme Support: Enhanced dark mode with proper contrast ratios

    Testing Notes

    • No linting errors introduced
    • All semantic color tokens properly mapped
    • Button and badge components maintain proper contrast in both themes
    • Table styling enhanced without breaking existing layouts

    Future Considerations

    • Color system now easily extensible through CSS custom properties
    • Semantic tokens allow for easy theme variations
    • Global overrides ensure consistency even with legacy hardcoded classes
  • Fulfillment – Daily Changelog – September 22, 2025

    Fulfillment – Daily Changelog – September 22, 2025

    2025-09-22 – Order Combining Detection System

    Order Management Enhancement – Duplicate Order Detection

    Problem Identified

    • Issue: Multiple pending orders for the same customer are being fulfilled separately
    • Impact: Inefficient shipping, increased costs, poor customer experience
    • Risk: Continued waste of shipping resources and potential customer dissatisfaction
    • Priority: High – addresses operational inefficiency and cost savings opportunity

    Investigation Plan

    • [ ] Analyze current order structure and customer identification methods
    • [ ] Identify how to detect orders that can be combined
    • [ ] Evaluate combining orders in Shopify vs. internal system
    • [ ] Design UI notifications for combinable orders
    • [ ] Implement detection logic for same customer/same address orders

    Current Analysis

    • Order Structure: Need to examine mama_tried_orders and related tables
    • Customer Matching: Identify how customers are linked across orders
    • Address Matching: Determine if shipping addresses can be reliably compared
    • Shopify Integration: Evaluate feasibility of combining orders at Shopify level
    • Internal System: Assess benefits of internal order combining workflow

    Technical Implementation Plan

    Order Detection Logic ✅ IMPLEMENTED

    • Customer Matching: Use customer_id, email, shipping name, and address for identification
    • Status Filtering: Focus on pending orders that haven’t been processed yet
    • Address Validation: Implement fuzzy address matching for slight variations
    • Time Window: Consider orders placed within a reasonable time frame (e.g., same day)
    • API Endpoint: /api/orders/combinable returns groups of combinable orders

    UI/UX Enhancements ✅ IMPLEMENTED

    • Notification System: Alert staff when combinable orders are detected
    • Order Details Page: Show potential order combinations
    • Batch Processing: Option to combine orders before fulfillment
    • Visual Indicators: Clear flags for orders that can be combined

    Integration Considerations

    • Shopify API: Evaluate if Shopify supports order combining
    • Shipping Impact: Ensure combined orders maintain proper shipping calculations
    • Inventory Management: Verify stock levels can handle combined quantities
    • Workflow Integration: Integrate with existing order processing workflow

    Shopify vs Internal Order Combining Evaluation

    Shopify Order Combining Limitations

    • Shopify API Constraints: Shopify does not provide native order combining functionality
    • Order Integrity: Each Shopify order has unique identifiers that cannot be merged
    • Customer Experience: Combining at Shopify level would require order cancellation/recreation
    • Third-party Dependencies: Would need to handle refunds, notifications, and customer communication
    • Timeline Issues: Orders already in fulfillment pipeline cannot be easily combined

    Internal System Combining Advantages

    • Workflow Control: Full control over the combining process within existing workflows
    • Data Integrity: Maintain order history and audit trails for each original order
    • Customer Transparency: Keep original order numbers for customer reference
    • Flexible Logic: Implement business rules for when/how orders can be combined
    • Shipping Optimization: Better control over shipping calculations and methods

    Recommended Approach: Internal System with Notifications

    • Phase 1 (✅ Completed): Detection and notification system (implemented)
    • Phase 2 (Recommended): Internal order combining with virtual consolidation
    • Phase 3 (Optional): Shopify fulfillment grouping for shipping efficiency

    Internal Combining Strategy

    1. Virtual Consolidation: Create combined orders in internal system without modifying Shopify
    2. Batch Processing: Process combined orders together for fulfillment
    3. Shipping Optimization: Apply combined shipping rates and methods
    4. Audit Trail: Maintain links between original and combined orders
    5. Customer Communication: Reference original order numbers in combined shipments

    Current Status

    Completed

    • Analyzed order management system structure
    • Created API endpoint for detecting combinable orders (/api/orders/combinable)
    • Built UI component for displaying combinable order alerts
    • Integrated notification system into orders page
    • Implemented customer-based and address-based matching logic

    In Progress

    • Evaluating technical approaches for order detection and combining

    Next Steps

    • Test with real order data
    • Add order combining functionality (API endpoint to combine orders)
    • Enhance UI with combine action buttons
    • Evaluate Shopify vs internal combining approach

    Notes

    • Operational Efficiency: This addresses a real-world inefficiency observed in shipping
    • Customer Experience: Combined orders provide better service and potentially faster delivery
    • Cost Savings: Reduced shipping costs through order consolidation
    • Implementation Strategy: Start with detection and notifications, then evaluate combining options
  • Fulfillment – Daily Changelog – September 15, 2025

    Fulfillment – Daily Changelog – September 15, 2025

    Changelog – September 15, 2025

    Order Sync Logic Updates

    Enhanced Shipping Address Synchronization

    • Added shipping address update utility in src/lib/orderUtils.ts
    • New updateOrderShippingAddress() function to update shipping fields in mama_tried_orders
    • Updates: shipping_address, shipping_name, shipping_address1, shipping_city, shipping_state, shipping_country, shipping_zip, and updated_at

    Shopify Webhook Enhancements

    • Updated webhook handler in src/app/api/webhooks/shopify/route.ts
    • Added support for orders/updated and orders/edited webhook topics
    • Automatically refreshes shipping address when Shopify order is modified
    • Returns early for order updates to avoid duplicate processing

    Scheduled Sync Improvements

    • Enhanced order sync in src/app/api/orders/sync/route.ts
    • Added shipping address refresh for existing orders during sync
    • Ensures shipping data stays current even for orders not recently updated

    Packing-Time Final Check

    • Added final shipping verification at packing time in multiple endpoints:
    • src/app/api/shipments/route.ts – Before creating shipments
    • src/app/api/batches/[id]/send-to-shippingeasy/route.ts – Before sending to ShippingEasy
    • src/app/api/batches/[id]/bulk-weight/route.ts – Before bulk weight operations
    • Fetches latest Shopify order data and updates shipping fields as final safeguard

    Multi-Layer Protection Strategy

    • Implemented three-tier shipping address sync:
    1. Immediate: Webhook updates on orders/updated events
    2. Scheduled: Regular sync refreshes existing orders
    3. Final: Packing-time check ensures accuracy before shipment creation

    Technical Details

    • Uses existing getShopifyOrder() utility to fetch latest order data
    • Leverages transformRestOrder() for consistent data normalization
    • All updates are idempotent and safe to run multiple times
    • Graceful error handling – failures don’t break core functionality

    Visual Indicators

    • Added “Address Updated” badge on orders page (src/app/(authenticated)/orders/page.tsx)
    • Shows orange badge when shipping_updated_at is set
    • Indicates when shipping address was modified after order creation
    • Helps identify orders with address changes at a glance

    Database Schema Updates

    • Added shipping_updated_at column to mama_tried_orders table
    • Tracks timestamp of actual shipping address changes
    • Only set when address actually changes (not on every order update)
    • Used for visual indicators and change tracking

    Debug and Testing Tools

    • Created comprehensive debug endpoints:
    • /api/debug/shipping-updates – List orders with shipping updates
    • /api/debug/shipping-changes – Show before/after address changes
    • /api/debug/test-webhook-endpoint – Test webhook accessibility
    • /api/debug/webhook-diagnostics – Troubleshooting guide
    • /api/debug/latest-updates – Recent order activity
    • /api/debug/test-shipping-update – Simulate address changes
    • /api/debug/reset-shipping-updated-at – Clear false positives

    Shopify Webhook Configuration

    • Configured three webhook events in Shopify Admin:
    • Order creation → https://fulfillment.orchardstreetpress.com/api/webhooks/shopify
    • Order updated → https://fulfillment.orchardstreetpress.com/api/webhooks/shopify
    • Order edited → https://fulfillment.orchardstreetpress.com/api/webhooks/shopify
    • All webhooks use JSON format and proper HMAC signature verification

    Benefits

    • Ensures shipping addresses are always current when orders are packed
    • Handles edge cases where orders are modified after initial import
    • Provides redundancy to catch any missed updates
    • Maintains data integrity throughout the fulfillment process
    • Visual feedback for staff to quickly identify address changes
    • Comprehensive debugging tools for troubleshooting