Openfoodnetwork: Shoppers are not notified when reaching max stock level of a product

[RachL]

Description

Shoppers who reach the max stock left on a product are not notified. This used to be in place before the new design. Currently adding quantities just stop working at some point without any more explanation for the shopper.

Expected Behavior

What we had before (yeah it was ugly but it worked :) )

Actual Behaviour

You can click on the "+" button as much as you want it won't do anything

Steps to Reproduce

1. Go to a shop and try to order more quantity of a product that what the product has in stock
2. See the quantity is correctly caped, but you don't get any notification

You can use last product here: https://staging.coopcircuits.fr/last-spree-farm/shop#/shop and try to put more than 7 quantities in your cart.

Workaround

No workaround except contacting the hub.

Severity

bug-s2: a non-critical feature is broken, no workaround

Your Environment

• Version used: V.3.2.5
• Browser name and version: All
• Operating System and version (desktop or mobile): Both

[lin-d-hop]

I noticed this and thought that the behaviour as is was fine. You just can't add any more to the cart. Seems clear to me.

I'd be interested to know if we are hearing about this from users.... that would be how I'd make the decision on that.

[RachL]

You just can't add any more to the cart.

Then at least the button should be disabled? Here it just makes it look like a bug. But we can wait and hear for support feedback here, I have no strong opinion.

[Matt-Yorkley]

The button does get disabled though?

[RachL]

The button does get disabled though?

yeah apparently, sorry guys I was not seeing it. Closing.

[jaycmb]

Even if the logic works, the change of the button colour is very subtle and might not be enough to make clear to the user that the button is disabled (and why).

To make clearer:

• Change of button colour: Actually greying out vs lighter red
• Explanation Why: adding a hint to indicate that max stock quantity is reached

[Erioldoesdesign]

Agreed re. make the [ + ] button our 'deactivate' grey until the minus is clicked.

Deactivate grey on the shop front looks to be... #6C6C6C

[Erioldoesdesign]

Side note: Even though the greying out is visually significant and most sighted people will be able to see this means 'I can't order more' sight impaired people would benefit from a message like 'Cannot buy more than X of X product' but i wouldn't put it in an overlay modal. I would find an inline place for it.

That kind of message is also good for sighted people who might still ask:
"Is it grey because there are only 7 to buy or is there more but the producer/hub only wants to sell 7 at a time". I imagine there's shoppers that still would email in the circumstance of a grey button because they want more. 🤷

[Erioldoesdesign]

Does this need more than just my design comments above? Does this need mock-ups?

[jaycmb]

As discussed in delivery train @mkllnk could do an easy fix to indicate users that thy reached the max quantity

1. make the [ + ] button our ‘deactivate’ grey until the minus is clicked.
   Deactivate grey on the shop front looks to be... #6C6C6C

Expected behaviour:

• when max quantity is reached, [ + ] button changes colour to 'deactivate’ grey
• when user clicks [ - ], i.e. reduces quantity < max., the [ + ] button changes to 'active red' #f27052

Next step would be

1. Explanation Why: adding a hint to indicate that max stock quantity is reached
   -> Possibly we need a design for this @Erioldoesdesign

[mkllnk]

@Erioldoesdesign Where did you get the #6c6c6c from?

I can't find that to be used as a background color. We are using #bbb (grey-400) for the same purpose in the bulk quantity modal already though. It would make sense to re-use that.

[Erioldoesdesign]

@mkllnk Got #6c6c6c from inspect element so not surprised it's not right 🤷 would be good to get a pattern library for the CSS and styles done at some point so I don't rely on inspect element.

As long as #bbb is high contrast enough and passes AA accessibility I'm fine with that one :)

[jaycmb]

would be good to get a pattern library for the CSS and styles done at some point so I don't rely on inspect element.

Absolutely. A pattern library or styleguide would guide when developing new features but also help detecting & getting rid of inconsistencies currently in play.
I created an issue here: https://app.zenhub.com/workspaces/product--inception-pipe-5f82e534db531f000f8c09ff/issues/openfoodfoundation/inception-pipe/34

Not sure if there might not have been already earlier attempts for such a guide/library so it doens´t need to be done from scratch?

[mkllnk]

Yuko created the current design in Zeplin and it includes a style guide: https://app.zeplin.io/project/59532764a6c78ff3c534b372/styleguide

[Erioldoesdesign]

@mkllnk I don't have access to that Zeplin style guide, Yuko might need to 'give' me access

Probably best we're looking at moving a style guide outside of a restricted 'owned' account like Zeplin. One that can be accessed via a weblink or repo would be nice!

[mkllnk]

Yes, that would be awesome. Here are the colours and fonts that Yuko used:

:root {
  --black: rgba(0, 0, 0, 0.75);
  --grey-800: #333333;
  --grey-700: #555555;
  --grey-600: #777777;
  --grey-500: #999999;
  --grey-400: #bbbbbb;
  --grey-300: #cccccc;
  --grey-200: #dddddd;
  --grey-100: #e6e6e6;
  --orange-600: #d7583a;
  --orange-500: #f27052;
  --orange-400: #ff9466;
  --orange-300: #ffaf8c;
  --teal-500: #0096ad;
  --teal-400: #4cb5c5;
  --teal-300: #80d3df;
  --red-700: #c1122b;
  --red-500: #e54e47;
  --red-400: #ff8173;
}

@font-face {
  font-family: Oswald;
  src: local(Oswald),
    url(/path/to/Oswald.woff2) format("woff2"),
    url(/path/to/Oswald.woff) format("woff"),
    url(/path/to/Oswald.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: Roboto;
  src: local(Roboto-Italic),
    url(/path/to/Roboto-Italic.woff2) format("woff2"),
    url(/path/to/Roboto-Italic.woff) format("woff"),
    url(/path/to/Roboto-Italic.ttf) format("truetype");
  font-weight: normal;
  font-style: italic;
  font-stretch: normal;
}

@font-face {
  font-family: Roboto;
  src: local(Roboto-Regular),
    url(/path/to/Roboto-Regular.woff2) format("woff2"),
    url(/path/to/Roboto-Regular.woff) format("woff"),
    url(/path/to/Roboto-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}

.h1-Title-Case {
  font-family: Oswald;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: 0.67px;
  color: var(--grey-800);
}

.Body-copy-large {
  font-family: Roboto;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--grey-800);
}

.Body-copy-large---mobile {
  font-family: Roboto;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: var(--grey-800);
}

.h1-Title-Case---mobile {
  font-family: Oswald;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: 0.5px;
  color: var(--grey-800);
}

.h2---mobile {
  font-family: Oswald;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.5px;
  color: var(--grey-800);
}

.h3-Title-Case {
  font-family: Oswald;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: 0.2px;
  color: var(--grey-800);
}

.Body-copy-italic {
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: italic;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: left;
  color: var(--grey-800);
}

.Body-copy-italic---mobile {
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: italic;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: left;
  color: var(--grey-800);
}

.Body-copy {
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: var(--grey-800);
}

.Body-copy---mobile {
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: var(--grey-800);
}

.Body-copy-small {
  font-family: Roboto;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--grey-800);
}

.Body-copy-small---mobile {
  font-family: Roboto;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.07;
  letter-spacing: normal;
  color: var(--grey-800);
}

.h3-Title-Case---mobile {
  font-family: Oswald;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: 0.2px;
  color: var(--grey-800);
}

I don't know good open design tools. I guess that our source of truth is in the code:
https://github.com/openfoodfoundation/openfoodnetwork/blob/master/app/assets/stylesheets/darkswarm/branding.scss