Improve the main card and tagline

[g123k]

Hi everyone,

As part of https://github.com/openfoodfacts/smooth-app/issues/5300, we will change a little bit the design of the homepage. The idea is to keep the carousel but to improve the main card.

Basically, here's a mockup of the change:

• There will be a clear hint to scan or search (= this sentence may be hidden on small devices)
• The tagline is now in a dedicated card

That's why we have to evolve the content of tagline's JSON to add - at least -:

• A title
• An image

And to ease the maintenance for @teolemon, a tagline can contain multiple items that will be randomly displayed. Here's a proposal of the new JSON:

[
   {
      "language":"en",
      "items":[
         {
            "url":"https://translate.openfoodfacts.org/project/openfoodfacts/af",
            "title":"My awesome title",
            "message":"My awesome content",
            "button_label":"Read more",
            "image":{
               "url":"http://world.openfoodfacts.org/logo.png",
               "width":"0.2"
            },
            "start_date":"1717161456000",
            "end_date":"1717161456000",
            "visible":true
         },
         {
            "url":"https://translate.openfoodfacts.org/project/openfoodfacts/af",
            "title":"My awesome title",
            "message":"My awesome content",
            "button_label":"Read more",
            "image":{
               "url":"http://world.openfoodfacts.org/logo.png",
               "width":"0.2"
            },
            "start_date":"1717161456000",
            "end_date":"1717161456000",
            "visible":true
         },
      ]
   }
]

Optional fields:

• button_label
• start_date and end_date
• visible (by default: true)
• image (width is in %)

All items will be displayed by their position in the JSON: first item in the first position… As we now require items, instead of data, I suggest creating separate files and not in /files/tagline-off-ios-v2.json.

If you have any suggestion, feel free to comment 😇

[teolemon]

@g123k was mentionned on the server side call yesterday 👍

[g123k]

Here is the new proposal for the JSON:

{
    "news": {
        "nutriscore_v2": {
            "start_date": "08/06/2024 00:00:00",
            "end_date": "31/06/2024 23:59:59",
            "url": "https://openfoodfacts.org/nutriscore-v2",
            "translations": {
                "default": {
                    "title": "It's new!",
                    "message": "The **New Calculation** of the NutriScore is available in the application",
                    "button_label": "Learn more",
                    "image": {
                        "url": "https://static.openfoodfacts.org/images/attributes/dist/nutriscore-a-new-en.svg",
                        "width": 0.2,
                        "alt": "NutriScore A logo",
                    }
                },
                "en_us": {
                    "title": "It's brand new!"
                },
                "fr": {
                    "title": "C’est tout nouveau !",
                    "message": "Le **Nouveau Calcul** du NutriScore est disponible dans l’application",
                    "button_label": "En savoir plus",
                    "image": {
                        "url": "https://static.openfoodfacts.org/images/attributes/dist/nutriscore-a-new-fr.svg",
                        "width": 0.2,
                        "alt": "Le logo du NutriScore A",
                    }
                }
            }
        },
        "demo": {
            "start_date": "",
            "end_date": "",
            "url": "https://translate.openfoodfacts.org/project/openfoodfacts/af",
            "style": {
                "title_background": "#000000",
                "title_text_color": "#FFFFFF",
                "title_indicator_color": "#EB5757",
                "message_background": "#000000",
                "message_text_color": "#FFFFFF",
                "button_background": "#000000",
                "button_text_color": "#FFFFFF",
                "content_background_color": "#219653"
            },
            "translations": {
                "default": {
                    "url": "https://translate.openfoodfacts.org/project/openfoodfacts/en",
                    "title": "My title",
                    "message": "My message",
                    "button_label": "My button",
                    "image": {
                        "url": "https://static.openfoodfacts.org/images/attributes/dist/nutriscore-a-new-en.svg",
                        "width": 0.2
                    }
                },
                "fr": {
                    "url": "https://translate.openfoodfacts.org/project/openfoodfacts/fr",
                    "title": "C’est tout nouveau !",
                    "message": "Le **Nouveau Calcul** du NutriScore est disponible dans l’application",
                    "button_label": "En savoir plus",
                    "image": {
                        "url": "https://static.openfoodfacts.org/images/attributes/dist/nutriscore-a-new-fr.svg",
                        "width": 0.2
                    }
                }
            }
        }
    },
    "tagline_feed": {
        "default": {
            "news": [
                {
                    "id": "nutriscore_v2"
                }
            ]
        },
        "fr_FR": {
            "news": [
                {
                    "id": "nutriscore_v2",
                    "override": {
                        "start_date": "12/06/2024 10:00:00"
                    }
                }
            ]
        }
    }
}

We now define a list of news and on the other side, we have the tagline_feed, allowing this JSON to be used for potentially other use cases (e.g.: full-screen message).

For each piece of news, all fields provided in demo are available, including the ability to style it. Mandatory items are:

• id (the key of the item)
• url
• translations->default

And in the default translation:

• title
• message

In each translation, we can override the url, but that's the only "overridable" field. This is how a translation is managed:

1. The default is loaded
2. If my language/country is available, I'll take it -> eg "fr_FR"
3. Otherwise, if my language is available, I'll take it -> eg "fr"
4. If I have an "overridden" translation, it will replace items from default (to clear a field, it needs to be a blank entry)

For the tagline_feed, we need to provide at least a default entry with a list of news For each news, we can override all items from the news.

Last point of attention: to override a date, it needs to be a blank entry and not NULL one.

[teolemon]

• "In each translation, we can override the url, but that's the only "overridable" field." Why @g123k ?
• Is the news key nested in the tagline_feed key mobilizing items from the top level news key ?
• Blank is to avoid unintentional overrride, I believe. if you override a date with blank, what happens ? what's the use case ?

@g123k

[g123k]

• "In each translation, we can override the url, but that's the only "overridable" field." Why @g123k ?

The idea is to distinguish the pure content to how and where it will be displayed. When I say the url is the only field "overridable", it's because start_date and end_date actually are… but on the tagline_feed.

• Is the news key nested in the tagline_feed key mobilizing items from the top level news key ?

Yes, the idea is to say, I want this, this and this news. (it doesn't require a visible field anymore). That way, we can later add a popup_screen for example, where we say, I want this particular content. Or why not, a full feed of news: the idea is to be as generic as possible.

• Blank is to avoid unintentional overrride, I believe. if you override a date with blank, what happens ? what's the use case ?

Eg: You have an end_dateon a news, but in Italy, you don't wan't it -> no more end_date

[g123k]

Updated JSON with:

• Image -> alt
• Style -> title_indicator_color and content_background_color

An example is available here: https://mock_18ef88079f344225853f73970c3fa2b2.mock.insomnia.rest/files/tagline-off-ios-v3.json