As a user, I want to see Order Notes in my order details screen so that I can keep up on any status updates and keep track of extra information relevant to the order.

To Do

• Order notes section title
• "Add a note" button cell
• Event cell: icon, vertical line. Display data: time, private / public note, note text
• If there are no events: "Add a note" button and do not display any event cells.

Do not make "Add a note" button action or note view controller - will be a separate issue.

• import assets
• change login image to follow positioning requirements below

origin: { -10, height + 10 - bottomcard }
width: screenwidth + 20
proportion: 1 to 1 (height to width!)

woo-login-screen-with-bleed.pdf
woo-no-store.pdf
woo-waiting-customers.pdf
woo-mobile-sync.pdf
woo-error-state.pdf

Create the infrastructure required to make networking calls and persist them into a database.

Infrastructure:

• Flux: Base Flux Architecture Framework
• Networking: Jetpack Tunneling Mechanisms
• Networking: Remote Architecture
• Storage: Basic Mechanisms + API

Details: Service Layer

• Yosemite Action to allow us to add a new Note
• Add Networking unit test(s)

Details: User Interface

• Present modal view controller
• "Dismiss" button that resigns keyboard, dismisses view controller
• "Add" button with custom action, //TODO: listed, resigns keyboard, dismisses view controller
• "WRITE NOTE" section title
• Note writing row - textview with note icon inside of the textview
• Email to customer row - switch defaulted to off state

Email: (supplied)
Subject: WooCommerce iOS x.x support

Stories / Tasks

• Order List View #3
• Order List View: Table Section Headers #7
• Order List: Wire Up to FluxC #25

Epic Story

As a store owner I want to see all past and incoming orders within the app so I can fulfill them, and see the order types and amount.

From MVLP document: Quickly list out orders that is contextually important - when I want to fulfill orders show unfulfilled, let me search, see important details like customer information, where to ship it, what’s included, and any notes associated.

Details:

Implement the Order List interface. We should deal with:

• Grouping by date.
• Rendering each order's top level data.
• Deal with the details transition.
• UISearchController support.

Notes:

Authentication, networking, and live data feed will be dealt with later on. At this stage, let's work with mockup data.

Live Sample:

Available here! courtesy of @olaolusoga (loved it!!!).

Mockup:

As a user, I want to filter my orders by payment status.

Acceptance Criteria

• filter button displayed on nav bar
• tapping the button presents an action sheet, with these options:
• All, Pending, Processing, On Hold, Failed, Canceled, Completed, Refunded, Custom, Dismiss
• Where Custom will filter all custom payment statuses into one result set
• upon tapping any button the results are show or
• if no results are available, display a basic tableview cell explaining there are no results (placeholder for future empty state design)
• Selecting "All" will clear the filter results and return the order list to its original state

Demo of completed task

List of Android Events

Application opened, Application closed, Application installed (maybe)

Tracks is part of the WordPress-iOS-Shared framework. Add the Tracks service and report the above 3 events.

We need a safe mechanism to persist the oAuth tokens. Alternatives:

A. KeychainStorage: To be implemented in the main app
B. AccountAction.loadActiveCredentials

Details:

This interface should be displayed after the authentication flow.

• We need to figure out what to do in the scenario in which the user has no sites. Should the app let you thru, and see placeholders? or stay in an eternal Site Picker?
• Make sure to handle the scenario in which the app is killed, before the user picks a blog.
• Wire up Davide's awesome Assets

Searching the order list crashes because it's not fully implemented. Remove the experimental code to keep the build stable until it's time to build the search feature.

i6 Design

Corresponding Android PR can be found here: woocommerce/woocommerce-android#293

Part of #14

Display a Single Order view with payment information.

To Do

• Payment section title
• Payment details: subtotal, discount, shipping, taxes, total
• Custom border and payment received note (don't make the received note a separate cell)

As a store owner I want to see quick stats about my stores performance within the app so I can know how well my business is doing: revenue, visitors, orders volume.

Android equivalent epic: woocommerce/woocommerce-android#65

• Spike: See what can be reused from WPiOS
• Spike: Find graphing library to use
• Create Store stats card
• Scrollable segmented control component for card header
• Store stats card header - Today / Week / Month / Year / Years
• Fetch and store stats data from endpoints
• Visitors / Orders / Revenue stats
• Add graph
• Apply styling to graph

From MVLP discussion: Provide a quick glance at important sales-related information that makes app users want to come back often to see how things are going.

Stick with the data available through the WordPress.com API, not through the Jetpack tunnel.

(There are more possibilities from the current iOS app we can draw from for future iterations:
Revenue, New Orders, New Customers, Top Selling Items, Processed Orders, Pending Orders, Held Orders.)

Details: User Interface

• Section header title: PRODUCT / QTY (Make flexible so that a single label displays for all other section header titles)
• List product in first column
• List quantity in second column
• Fulfill order button

Mockup:

Display a single order view with the first cell's data.

To Do

• ViewController title: Order #N
• Hide the header section title
• Display the order number, first name, last name
• Display created date
• Display payment status label

Order List Master Issue

• Networking: Retrieve Orders
• Storage: Store a collection of Orders
• Service Layer: Request Batch of Orders, w/"starting at"
• Displaying Order Cells
• Infinite Scroll
• Pull-to-refresh
• Filtering
• Search
• Group orders in fuzzy date sections

partial-payment and pending-deposit are lowercase and contain a hyphen. Compared to the core statuses, it looks unpolished / incomplete.

Spike - research if it's not too much work to run some string manipulation on the raw custom payment statuses we receive and keep a user-facing text variable and a property with the .custom(_) enum property stored on the cell.

Dependencies:

• Orders Networking Layer. #54
• Orders Persistance #97
• Orders Store #98
• OrdersViewController: Integrate Yosemite! #102
• OrdersViewController: Infinite Scrolling
• Pull To Refresh #118

Mockup i5:

Display a single order view with the third cell's data.

To Do

• Customer provided note table section header
• quote icon
• customer note
• do not display this section if the customer note is empty

• add an Oxford comma to the prologue text …your orders, and get…
• change the second line of text to say Read the configuration instructions
• confirm configuration instructions is linked to https://jetpack.com/support/getting-started-with-jetpack/
• investigate why Magic Link isn't working

Details:

• Remove Mockup Data
• Wire up Yosemite Layer
  • Section: Summary
  • Section: Product list with fulfill button
  • Section: Customer note
  • Section: Customer Info (shipping / billing)
  • Section: Payment
  • Section: Order Notes (add a note, notes)
    Section: Extension warning (Use #108 for tracking this)

Problem: OrderDetailsViewController was becoming a Massive View Controller under the MVC pattern.

Solution: Use MVVM instead.

To Do

• Convert the CustomerNote section to use MVVM

As a store owner I want to see all past and incoming orders within the app so I can fulfill them, and see the order types and amount.

From MVLP document: Quickly list out orders that is contextually important - when I want to fulfill orders show unfulfilled, let me search, see important details like customer information, where to ship it, what’s included, and any notes associated.

Refactor OrderDetailsViewController to contain a better organized tableview data source.

Internal ref: p1526054950000029-slack-C6H8C3G23

Design:

We're implementing a new entity, to be called OrderSearchResults, which will allow us to map a given Keyword to a collection of Orders.

This allows us to display cached search results, when in offline mode, and also makes it possible to rely on ResultsController and EntityListener to keep all of the involved ViewControllers in sync.

Yosemite:

• Search Orders Action #558

Orders List:

• Wire the new Search UI #557
• Exclude Orders not retrieved via regular scrolling (Search Results Cache) #559

New Search UI:

• Wire OrderAction.search #559
• Infinite Scroll Support #559
• Wire Details UI #559
• Loading + Empty States #559
• Verify (all of the) Order Detail Flows work fine! #559

• Wire up WordPressAuthenticator.framework
• Mechanism to remember the credentials!

MVLP Order Details

(Note: search is not part of Order Details MVLP)

• Order Details screen has two states: Completed (order fulfilled) and Processing (order not yet fulfilled)
• Section: Summary #23
• Section: Extension warning #108
• Section: Product list with fulfill button #9
• Section: Customer note #27
• Section: Customer Info (shipping / billing) #53
• Section: Payment #67
• Section: Order Notes (add a note, notes) #73
• Separate screen: Add a note #75

Android equivalent epic: woocommerce/woocommerce-android#105

TODO

• Dashboard settings button
• Dashboard title bar
• Revenue and vistors (#177)
• New Orders (#35)
• Top performers (#178)
• Dashboard loading state (#181)
• Dashboard empty state (#179)
• Dashboard error state (#180)

The currently planned implementation for order notes is to fetch the notes from the server when opening the order detail view for an order.

We might want to look into a small optimization where we pre-fetch up to some number of notes for important orders (processing primarily, perhaps recent failed ones too), so they're instantly available when the order is opened (and will be available if the order is opened offline).

The WP API has some batching capabilities - perhaps we'd be able to bundle the order fetches up into a single call when the order list is loaded and do it in the background.

Android counterpart: woocommerce/woocommerce-android#197

This is most likely the full plugin install and convincing the user to install it.

Details:

Implement WordPress.com Authentication Mechanisms. This requires few tasks to be performed on both, the Authenticator and WC repositories:

Authenticator:

• Split WordPressAuthenticator from the WordPress App. Master PR Here
• Disable Signup + Self Hosted Login PR Here
• New Authenticator handleAuthUrl API. PR Here
• Relocate Relocate GoogleSignInRepacked. Moved Here

WC:

• Secrets Storage Mechanism. PR Here
• Integrate WordPressAuthenticator. PR Here
• WooCommerce Prologue

To Do

• Import and use WordPressShared's date helpers to convert JSON date string object > Date object > fuzzy date "Today", "Yesterday", "Tuesday", etc.
• Sort order objects into sections. Each day is a section.
• Section headers use fuzzy date, with oldest orders listed first

Display a Single Order view with the customer information section. Note that the Shipping section does not support a phone number property. See API reference.

To Do

• Customer information section title
• Localize addresses
• Localize phone numbers
• Validate phone numbers

Shipping

• Shipping details title. Display data: customer name, full address

Billing

• Billing details title. Display data: customer name, full address
• billing phone number, "more" button icon
• "more" action sheet: Call, Message
• billing email, email button
• email button (action): email message presenter
• Show/hide billing (button)
• Show/hide billing (action)

The following document was effectively breaking authentication / sync'ing in the legacy app.

Let's ensure the new app is handling this properly:

• Add a new unit test!'
• Verify that this order, in broken state, either gets default values, OR it gets skipped while parsing [TBD].

[{"id":85,"parent_id":0,"number":"85","order_key":false,"created_via":"","version":"","status":"draft","currency":"GBP","date_created":null,"date_created_gmt":null,"date_modified":"2018-04-30T20:07:57","date_modified_gmt":"2018-04-30T20:07:57","discount_total":"0.00","discount_tax":"0.00","shipping_total":"0.00","shipping_tax":"0.00","cart_tax":"0.00","total":"0.00","total_tax":"0.00","prices_include_tax":false,"customer_id":0,"customer_ip_address":"","customer_user_agent":"","customer_note":"","billing":{"first_name":"","last_name":"","company":"","address_1":"","address_2":"","city":"","state":"","postcode":"","country":"","email":"","phone":""},"shipping":{"first_name":"","last_name":"","company":"","address_1":"","address_2":"","city":"","state":"","postcode":"","country":""},"payment_method":"","payment_method_title":"","transaction_id":"","date_paid":null,"date_paid_gmt":null,"date_completed":null,"date_completed_gmt":null,"cart_hash":"","meta_data":[],"line_items":[],"tax_lines":[],"shipping_lines":[{"id":1,"method_title":"Shipping","method_id":"","total":"0.00","total_tax":"0.00","taxes":[],"meta_data":[]},{"id":2,"method_title":"Shipping","method_id":"","total":"0.00","total_tax":"0.00","taxes":[],"meta_data":[]},{"id":3,"method_title":"Shipping","method_id":"","total":"0.00","total_tax":"0.00","taxes":[],"meta_data":[]}],"fee_lines":[],"coupon_lines":[],"refunds":[],"_links":{"self":[{"href":"https:\/\/plasticfreepartybags.com\/wp-json\/wc\/v2\/orders\/85"}],"collection":[{"href":"https:\/\/plasticfreepartybags.com\/wp-json\/wc\/v2\/orders"}]}}]

When the V3 Woo API is rolled out, notes returned from the /wc/v3/orders/$orderId/notes/ endpoint will have a new author field, which is either a username on the site, or "system". This will allow us to style system vs user-created notes differently in the list.

We'll also be able set added_by_user = true (default is false) when creating a new note, which will mark the created note as being site user-created rather than system-generated. added_by_user == false corresponds to author = "system" in the note returned from the server.

Relevant class in the V3 dev API: link

Also see: woocommerce/wc-api-dev#109

Android counterpart: woocommerce/woocommerce-android#206

Main tasks:

• Implement and wire the StoreManager initialization (Requires #92)
• Support single Authenticated / Deauthenticated states. (Requires #94)
• Consider "Disconnected" state

Pendings:

• Unit Tests
• Documentation in few spots
• We should probably figure a way to prevent global dispatchers (maybe even nuke the .global)
• Move the StoreManagerStates to their own files

Requirements:

• Verify all Tracks calls are implemented for notifications (@bummytime)

Networking: Notifications

• Data Model (@jleandroperez) #378
• Fetch All (@jleandroperez) #381
• Mark as Read (@jleandroperez) #381
• Mark as Seen (@jleandroperez) #381

Networking: Comments

• Mark as Spam (@bummytime) #415
• Trash (@bummytime) #415
• Approve / Unapprove (@bummytime) #415

Storage: Notifications

• Entity Persistance (@bummytime) #390

Yosemite: Notifications

• Sync'ing Mechanism (@bummytime) #396
• Mark as Read (@bummytime) #405
• Mark as Seen (@bummytime) #401

Yosemite: Comments

• Mark as Spam (@bummytime) #420
• Trash (@bummytime) #420
• Approve / Unapprove (@bummytime) #420

Notifications List

• Formatters (@jleandroperez) #395
• Display Notifications collection, grouped by time frame (@jleandroperez) #402
• Pull to Refresh #412
• Fine Tune UI: Match Mockups #413
• Filters by Notification Type #423
• Loading + Empty State #425
• Push OrderDetails for .store_order(s) #431
• Wire Mark all as Read #432
• Filter Active Site Notifications
• Remove NukeMe Struct / Wire the actual required UIColor(s) (@bummytime) #436
• Wire Mark as Seen (@bummytime) #447
• Wire Mark as Read (@bummytime) #448
• Ensure Dynamic Type is supported (@bummytime) #438
• Add star rating UI control to table cell (@bummytime) #477
• Green "unread" dot on Notifications tab (@bummytime) #443
• Add notification filter (right nav bar button) (@bummytime) #453

Notification Details (Single ViewController, generic blocks)

• Block Groups Logic #418
• Pull to Refresh #426
• Product Review (@jleandroperez) #442
• Adjust Cell Separators
• Wire Product Review Actions (@bummytime) #457
• Product Review Header
• Add star rating UI control (@bummytime) #477
• Ensure Dynamic Type is supported

Blueprints:

Order list: reverse chronological order - plan ahead for filtering and sorting.
Show: order status, number, customer name, order total.

To Do List

• Grouped UITableView
• Order list table view cell, with room for 2 labels where the order status label is located
• Connect the model to the view, displaying mockup data for order number, customer name, order total and order status