kylegach

Plan: Add Order Scheduling UI

Context

The checkout flow has no way to choose delivery timing — orders are implicitly "ASAP" and the success page shows a hardcoded "13:23 today". This adds a UI for users to choose between ASAP delivery and scheduling for a specific date/time, with Storybook stories for all new/updated UI. No backend changes needed.

---

Approach

Add scheduling as part of the existing "Delivery details" step (not a new step). Scheduling is a delivery concern and the current step only has 3 fields, so there's room. This avoids changing the step count, StepIndicator, or navigation logic.

kylegach

// .storybook/preview.ts
// Replace your-renderer with the renderer you are using (e.g., react, vue3)
import { Preview } from '@storybook/your-renderer';

const defaultRulesets = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice'];

const preview: Preview = {
  parameters: {
    a11y: {
      /*

kylegach

kylegach

// app/src/app.js

// This will _not_ throw the 'first-child' warning
const sampleStyles = {
  '&:first-child': {
    emotionIgnore: 'ssr-warning',
    color: 'rebeccapurple'
  }
}

kylegach

import React from 'react';
import styled, { ThemeProvider, css } from 'styled-components'
import { darken, lighten } from 'polished'
import { space, width, fontSize, color } from 'styled-system'

import { storiesOf } from '@storybook/react';
// import { action } from '@storybook/addon-actions';
// import { linkTo } from '@storybook/addon-links';

//Theme for Layers

kylegach

#deviceFrame, hr {
    box-sizing: content-box
}
.footnotes, .markdown pre, .markdown table {
    font-size: .875rem
}
a:link, abbr[title] {
    text-decoration: none
}
#deviceFrame {

kylegach

// ----
// libsass (v3.2.5)
// ----

@mixin cp-context($contexts) {
  @each $context in $contexts {
    @each $current in $cp-currentContext {
      @if $context == $current {
        @if $context == 'system' {
          .cp-AdminWrap & {

kylegach

Keybase proof

I hereby claim:

• I am kylegach on github.
• I am kylegach (https://keybase.io/kylegach) on keybase.
• I have a public key whose fingerprint is 68C2 1F87 8541 E890 15FB 485F 1114 1634 8283 3B57

To claim this, I am signing this object:

kylegach

According to http://quirksmode.org/mobile/metaviewport/, iOS Safari has an issue with using 'width=device-width' when in landscape orientation. This fits with our experience: our responsive sites (e.g. http://mo-springfield.civicplus.com & http://wa-snohomishcounty.civicplus.com) are not resizing properly if loaded in portrait then rotated to landscape.

I noticed that http://filamentgroup.com is _not_ subject to the issue, despite using the same meta viewport values we are, so I was hoping you could take a moment to explain how you've managed that.

Additionally, you cannot pinch-to-zoom on our sites, but we, like you, are not using 'user-scalable=no'.

Btw, I was astonished at how quickly you were able to get the FG site loaded. Very nice work!