calblueprint/dccentralkitchen

Customer mobile app and rewards program for DC Central Kitchen's Healthy Corners initiative

dccentralkitchen

Healthy Corners Rewards (DC Central Kitchen)

All documentation lives at https://healthycorners-rewards.netlify.app - for new contributors, we recommend starting with the project overview.

• The documentation for this repo can be found here: https://healthycorners-rewards.netlify.app/customer/.
• The traditional README lives at the "Getting Started" page: https://healthycorners-rewards.netlify.app/customer/getting-started.html

Companion projects

• Clerk-facing tablet application: dccentralkitchen-clerks
• Backend server: dccentralkitchen-node

dccentralkitchen's Issues

Blank screen on user's first sign in

Context:

• Happens upon the user's first time entering the app after allowing location permissions with "allow while using the app".
• Testers waited 1-3 minutes on the blank screen before restarting the app and getting it to work.
• No related Sentry error logged.
• Noted by several testers using both iOS and Android in the 4/18 Bug Bash, including @ukyerdua @cindyzhang12 @adowski

what happened?

after I created an account to sign up blank page appears

When I swipe away the app history and click the app again I am logged in

Originally submitted here by @ukyerdua

Add dedicated tab for How It Works

• User testers wanted this to be easily accessible/viewable
• Add tab in rewards for How It Works

reCaptcha Bug

Swiping down to close the reCaptcha during signup/password reset will prevent the user from proceeding, or even reopening the verifier. The only fix is to restart the app currently. This is likely due to swiping down not properly closing the modal, so some function calls are missed.

Clicking close before verifying will take the user to enter their code, despite not having been sent one. The fix here is to click 'resend code', not an optimal solution.

Scrolling in the products list is cut off

https://www.loom.com/share/6c9d85096f794ef9bec2add39e5c55e5

[BUG] Password text entry is not hidden on Android

Describe the bug
Password text fields show the full password in plain text.

Device (please complete the following information):
Tested on Android emulators: Pixel 2 and Nexus S running Android 28

Environment:
development

Additional context
Encountered and resolved this issue in #121, but the solution doesn't appear to be working anymore.

This is likely related to incompatible react-native upgrades with https://github.com/petrogad/react-native-materialui-textfield. Since it hasn't been updated in several years, we probably need to move to a different text input package soon.

Clicking "Open in Google Maps" leads to a store in Sacramento (Nam's)

Tbh this is probably just because there are multiple Nam's markets in the world/might not be an issue if everyone using the app is in DC specifically, but here are the steps to recreate:

1. Click on Nam's (either logged in or as guest)
2. Click on info
3. Click on the address
4. Open in Google Maps
5. Land in Sacramento

Phone number tap interactions

((Not super high priority; consistency fix))

• Map view lets you tap location but not phone number
• Store detail lets you tap both
• Add phone number tap interactions (call/copy) on map view to match store detail

Inconsistent Current Location indicator sizing

• Originally mentioned by Gaby on iPhone 6
  

Updates.reload() to be removed in next Expo version

After we add Updates.reload() to the instances of logout within the app, it will break on expo 38 because it will be removed. Be sure to use something else before updating.

[Android//Pixel 3] Could not log in as guest

To replicate:

• On Pixel 3, click the log in as guest text/button
• Nothing happens for me

Rundown

Not much to add to above

text not centered for "ebt" "wic" and "snap match"

[ERROR] ExpoHaptics requires VIBRATE permission for Android

Sentry Issue: DCCENTRALKITCHEN-4G

Error: Encountered an exception while calling native method: Exception occurred while executing exported method impactAsync on module ExpoHaptics: Requires VIBRATE permission
  at _performSideEffectsForTransition ([native code])
  at _receiveSignal ([native code])
  at touchableHandleResponderRelease ([native code])
  at forEach ([native code])
  at value ([native code])

offset icons / text overflow

• "Accepts Healthy Rewards" almost cut off at bottom.
• Icons not centered.
  
  

Upgrade react-navigation to v5, upgrade Expo to SDK 37

React Navigation 5 was released in February (a breaking release): https://reactnavigation.org/blog/2020/02/06/react-navigation-5.0/

Expo SDK 36 was released in December: https://blog.expo.io/expo-sdk-36-is-now-available-b91897b437fe

Creating a single issue because I feel like these are best addressed together.

• Note that it looks like they'll be doing some updates in SDK 37 to work with the new react-navigation v5 changes; at the very least with the stack, so as the comment says YMMV with the two interacting for now
  https://expo.canny.io/feature-requests/p/support-react-navigation-5x-native-stack

Text misaligned in onboarding

Noted by @anniero98 (iPhone X with accessibility large text) and @12aschen (Pixel 2, regular text)

White screen and no "Location Error" dialog when deny location

On Pixel 2 with location off for entire device
When making new account:

• Open app -> splash screen -> onboarding slides -> get started -> sign up ->location permission dialog -> "No thanks" -> white screen
• Restart app -> splash screen -> location permission dialog -> "No thanks" -> white screen (will always fail)
• Restart app -> splash screen -> location permission dialog -> "ok" -> works and logs me in with the account i just made

When trying to log in:

• Open app -> splash screen -> onboarding slides -> log in -> input info -> location permission dialog -> "No thanks" -> white screen
• Same restart functionalities as above

When previously logged in:

• Open app -> splash screen -> location permission dialog -> "No thanks" -> white screen (will always fail)
• Same restart functionalities as above

Unable to access guest mode

[Android] Location button doesn't work properly

Clicking the location button, which i assume is my current location? does not go to my current location

Product detail hidden on map view

On map view (Holiday Market) of a store with products, the second detail line of products is hidden by the Your Rewards banner. Visible if drawer is forcibly scrolled up more (bounces a bit)

scrolled to the bottom of the drawer

forcibly pulled up further

[Android] the Android Back Button does not work

Most Android phones have a universal "magic" back button that roughly takes you to the previous thing you were looking at. It does not work as expected in the Android app. For example, if you log in, search a store, select the store, then hit the Android back button, you'd expect to be taken back to the search screen. But instead, it takes you to the login page.

(iphone x) pressed allow location once -> blank screen

Fix keyboard covering issues on Login and Signup

Replace the temporary fix of shrunken spacing on login and signup from #56 with keyboardAvoidingView or some long-term solution. With the current spacing, it can still be blocked by the keyboard (iPhone 8 on the left)

Store details scrolling is cut off on smaller devices

Originally discovered by @12aschen

Change main fork to DC Central Kitchen fork

Hey all,
Even though we have created another fork under the new DC Central Kitchen Repo. Is there a way that we could make this the new Main fork. Every time I open a PR it defaults to the CalBlueprint Repo.

The other option is to just start over with a completely new repo. Let me know if this is something that you all could do on your end.

CC: @wangannie

[Styling] Store names overlap when you zoom out

The store names are super cluttered when you zoom out (maybe have the names disappear at a certain zoom out point?):

Can't navigate to Products List or Product Details on Android

Tapping See all __ on the map screen to see all products for a given store doesn't do anything, but also doesn't error. The same thing happens for the product cards.

https://www.loom.com/share/5da95bda2f3640ccbc5cfb25c08403e1

Password no more than 20 characters--security risk?

Would having an upper limit on password length be a security risk? I didn't take 161 or anything so I maybe be wrong but it sounds like we don't need to enforce a low max length for passwords: https://security.stackexchange.com/questions/33470/what-technical-reasons-are-there-to-have-low-maximum-password-lengths

[Android] give option to hide password when logging in

'Stores' from the hamburger drawer does nothing

It also does not appear highlighted (with green background). The only way to open the hamburger menu at the moment is from the Map screen, so clicking 'Stores' from there should just close the hamburger menu. It was working before, so it was likely caused by adjustments from #46 .

[IOS] Customer App, couldn't swipe down point history card

I clicked healthy rewards, i tried to click the down arrow but it didn't work. I swiped down, and it kept getting stuck halfway and crashed the app.

I reopened, and didn't swipe it down, and it crashed again :/

Happened on iPhone Xs latest ios

Change `Login` and `Logout` to `Log In` and `Log Out`

For consistency with Sign Up / SignUpScreen, update both copy and variable names to be two words for Login and LogOut

UI nitpick: Can't see your exact current location on map

Consolidate hardcoded styling constants into a file in constants

For example in getMaxWidth in mapUtils.js` in #51

'Closed until' is incorrect when a store opens later in the same day

In this screenshot, I was testing at 7:28am on Tuesday and the store would open at 8:30am on Tuesday, but instead it displayed 'Closed until Wednesday 8:30am'. I suspect this is because in computeNextOpenDay it automatically starts at the next day index?

Update styling to accommodate system accessibility settings

Context: On our 3/30 NPO call, it was brought to our attention that older individuals using accessibility settings on their devices would be a significant portion of the user base, and the customer app should adjust accordingly.

To accommodate these settings, we need to adjust spacing and some areas of the designs to accommodate settings like Larger Text and Increase Contrast. Currently, text size is handled automatically, but in many areas, the spacing could be improved with tweaks like reducing the use of hard-coded pixel dimensions and making things more responsive instead.

Get Directions shows multiple stores

• Switch Get Directions button back to showing exact coordinates

• Came up from a user tester that Uptown Market (her local store) showed two stores, one in DC and one in Arlington

• Told her about coordinates as alternative and she said she much preferred that, since she would be checking it for directions rather than for store info (already provided in our app!)

• Have found similar issues with DC Food Market, Capitol Market, Kwik Stop, but it seems to vary by user (screenshots below of what is pulled up)

(DC Food Market shows every DC store that sells food and has 'market' in the name :'))

Product cards in See All Products are cut off on some devices

Device: Pixel 3XL on emulator (narrower screen)

Product card text overflow and spacing issues

• Need to add spacing between product cards
• Need to truncate or somehow handle overflow text for long titles or descriptions

Can't rotate the map on Map Screen

The map snaps back to true north whenever it's rotated.

(Brought up by @12aschen on #78 , but it's an issue on both iOS and Android)

No error message for incorrect phone number length in Login

Since we don't have any input formatting, it's difficult to tell when a user has entered the correct number of digits for the phone number. The field does not show any error if the phone number is not the correct number of digits, so the only way to tell that it's wrong is that the Log In button will stay in a disabled state. This could be really confusing for users who may accidentally mistype their phone numbers but don't get any error message or indication of what is wrong.

We should maybe consider adding the same check we have for phone number length in Sign Up, but maybe make the error message more specific about the input length.

^ trying to log in with a 9-digit phone number

[Android//Pixel 3] Clicking on one store then another while zooming into the first store resets zoom in

To Replicate:

• Click on a store in the map
• As it begins to zoom (and before it stops), click on another store
• The zoom level resets but continues to zoom in on the first store again
• Repeat above to continue experiencing the bug

Rundown

Essentially, you can't switch from zooming in to one store to clicking on another. You're stuck zooming in on the first store regardless of the other stores you click. The issue goes away after the store is fully zoomed in on.

location and hamburger menu icon a little off center

don't know if this was intentional or not but just in case!!

[BUG] Blank map screen if no network is detected

Describe the bug
If there is no network connection, the map screen get stuck on a white screen. This isn't an issue if I'm not logged in (Onboarding images appear) but once I try to access an account, I get stuck on the white screen.

To Reproduce
Steps to reproduce the behavior:

1. Log in as a guest (or an account)
2. Turn off cellular and wifi on the device
3. Force close the app
4. Open the app again
5. See blank screen

Expected behavior
Needs to have some sort of 'Network Error' message or screen.

Screenshots
If applicable, add screenshots to help explain your problem.
n/a

Device (please complete the following information):

• Device Model: [e.g. iPhone6] iPhone X
• OS: [e.g. iOS8.1] iOS13.3.1

Environment:
Which environment(s) is this bug located in?
Production

If the bug is located in production, find the version number under Menu > Settings

• Version [e.g. 1.1.0] v1.3.0

Additional context
Add any other context about the problem here.

[BUG] Forgot password sends verification code even if the phone number doesn't exist

Describe the bug
Forgot password sends verification code even if the phone number doesn't exist. When I try to reset a password linked to a non-existent account, I get [Unhandled promise rejection: TypeError: null is not an object (evaluating '_this.state.customer.id')]

To Reproduce
Steps to reproduce the behavior:

1. Go to Forgot Password from Log In
2. Enter a phone number that you have access to but does not exist as a customer in the database.
3. Complete the captcha and enter the verification code you received
4. Try to enter a new password
5. Get stuck on the null is not an object error

Expected behavior
If there is no registered customer under a phone number, trying to reset the password should not send a real code.

Screenshots
If applicable, add screenshots to help explain your problem.

Device (please complete the following information):

• Device Model: [e.g. iPhone6] iPhone X
• OS: [e.g. iOS8.1] iOS 13.3.1

Environment:
production

If the bug is located in production, find the version number under Menu > Settings

• Version [e.g. 1.1.0] v1.3.0

Additional context
Originally, the purpose of letting customers continue in the Forgot Password process even if the phone number did not have a real account linked was for security (so you wouldn't be able to enter a phone number and see if there is an account under that number).

Styling bugs and inconsistencies on Android

• The map view is buggy and sometimes map markers randomly jump around (see videos and screenshots on #56).
• Sometimes the font on buttons and text fields becomes the default system font.
• Drop shadows don't work at all.

[UX][Android] Unable to swipe left on Android to show the hamburger menu

On most Android apps you can open a hamburger menu by swiping left from the left edge of the phone (or swipe right if your hamburger menu opens from the right). For a real-life example, if you swipe left on your Uber or Lyft app, it would open the menu. I think it's common enough that it's kind of an expected behavior for apps, but DC doesn't have it. It would increase usability a lot if you could implement it!

[BUG] Hamburger menu drawer width issues

Describe the bug
Hamburger menu drawer sometimes shows up like this:

and the green part sometimes pokes out in the main screen when the menu should be collapsed.

For signup screen, the keyboard cuts off the bottom half oy the app

iPhone 8

Update store distance calculation

Currently, store distance 'miles away' from the user's current location is calculated by the distance between long/lat coordinates. This is pretty inaccurate and not very helpful in real use, so we should look into a way to calculate the distance by walking or driving directions.

Scaling the map

When the user zooms out on the map, it becomes clustered and nothing can be seen. Maybe get rid of the text with such interaction and remain only the location icons.