Description

We should explore the possibilities of writing unit tests that will cover the JavaScript/Typescript codebase.

This task doesn't include CI work (execution or GitHub checks).

Tasks

• Fetch all shipping methods from the network /wp-json/wc/v3/shipping_methods
• Integrate them with the UI built on #103

Description

When all needed data is fetched and parsed, we should display shipping zones in a form of a list.

Description

On Android, when we open "Shipping zones" embedded React Native, navigate back and open "Shipping zones" again, the app crashes.

Description

To debug HTTP requests, we could introduce Flipper HTTP interceptor that will log every HTTP call to Flipper Desktop app:

Is under discussion internally: pe5pgL-3rk-p2

Tasks

• Support the correct color scheme when presenting a screen
• Adjust the view colors when the user changes the color scheme while a screen is presented

Description

We should introduce a feature flag to hide elements that won't be part of the release:

• Add button
• Arrows on the list

Now, when use opens "New Zone" screen and tries to navigate back on Android, it'll close the whole "Shipping Zone" screen (they'll go back to "Settings" screen).

The expected behaviour is that they'll navigate back to the list of Shipping Zones

After selecting a shipping method in #102

• Submit the new shipping zone with POST /wp-json/wc/v3/shipping/zones/<id>/methods
• Dismiss the selection UI #103

Description

Similarly to Android, we should add entry point in Settings to open "Shipping zones & classes" screen on iOS:

Description

To debug HTTP requests, we could introduce Flipper HTTP interceptor that will log every HTTP call to Flipper Desktop app:

Description

We should be able to make authenticated calls to WC API via Jetpack Tunnel.

Task

• Read store credentials from the RN environment

Add a hardcoded "Explanation" row as shown in the picture.

Why

As we are passing tokens and keys from the main app. We need to store them somehow in the react environment so they can be accessed where needed.

Task

• When a new shipping method is created the shipping zone screen should be updated to reflect the added method

Description

This task is about adding the possibility to send analytics events from React Native.

Presently, we'll focus on a lambda/closure-based idea (lambda as a parameter for React Native).

If we fail on that, we can also experiment with:

• native module (discouraged)
• writing the equivalent of Tracks in JavaScript (big effort)

Description

This task is about implementing suggestions for user typing zone region name

Tasks

• Re-enable displaying “locations not covered by your other zones” zone
• Display the zone in the bottom of the list

Description

This task is about preparing UI for "Add a shipping zone" screen except "zone region" part as it's more complex (autocomplete + chips).

Description

List of Shipping Zones should have a navigation back button, that would close the React Native embedded view.

Tasks

• Present UI when tapping the "+ Shipping Method" button.
• Consider use hardcoded shipping zones for efficiency.

Description

In order to display a list of regions to assign during a process of creating Shipping Zone, we have to fetch this list beforehand.

Description

We should integrate some way of handling navigation between screens. The first approach we might want to try is one recommended in the official documentation: https://reactnative.dev/docs/navigation

Task

• Adds button initiate the add shipping method flow

Description

We have to provide a way to make authenticated requests to REST API for users who don't use Jetpack Tunnel but Application Passwords.

Description

This task is about fetching data needed for presenting contentful list of Shipping Zones.

Unfortunately, with the current REST API, we'll have to perform a significant number of HTTP requests, according to this formula: 1 + number of shipping zones * 2 for every pagination.

We will ask for API team support (or try to introduce a new endpoint ourselves) but for now, let's use the current API so we're not blocked with further progress.

We need to find a way to do a country/state name lookup for the shipping zone list

Description

If fetching list of zones fails, we should show some error message for the user and allow them to retry the fetching.

There's no design for this operation, let's aim for "a native feeling".

Description

iOS header seems to be higher than expected

On recent trunk (c9da6c4) I've started to get following error:

ERROR  Warning: Encountered two children with the same key, `Everywhere`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Probably we can't set key of the list as zone name.

Add icons as per the designs.

We are going to use 3 types of icons:

• For the "Explanation" row
• For the regular zones
• For the “locations not covered by your other zones” zone

Tasks

• When a zone has no locations, the UI should read "Everywhere". The only exception is the "Locations not covered" zone.
• When a zone has no methods, the UI should read "No shipping methods offered to this zone".

When opening Shipping Zones user can experience TypeError: Cannot read property 'name' of undefined error. It ends up not showing list of shipping zones:

Instead of native-stack (which is problematic) we should consider using plain stack navigation as we might now need "native performance":

https://reactnavigation.org/docs/stack-navigator

Issue

Recently I found a situation on iOS where a back button IS NOT being rendered when running the demo app against the compiled framework but it is rendered when running it against the metro server.

Metro Server	Compiled Framework

Possible Cause

After digging into it:

• It seems that RN is using an asset called back-icon.png to render that button.
• I can't find that asset in the WooCommerseShared.xcframework package.

Could it be that the assets from the RN libraries we use are not being properly included in the xcframework, hence not being rendered?

@jkmassel or @mokagio does this makes any sense? Or should I look at a different angle?