Add a mobileIconId property to the Ugrade page cards (Strapi)

Goal

Be able to define the mobile's icons on the Upgrade screen cards. The current implementation is mapping the frontend icon values to local values.

What needs to be done

Add a new string property mobileIconId to the Strapi's Upgrade cards attributes

query UpgradePage {
  upgradePages(sort: "bulletOrderWithinCard:ASC", pagination: { limit: 30 }) {
    data {
      attributes {
        cardId
        rowType
        displayText
        iconId
        mobileIconId # <--- mobile Icon
        iconSource
      }
    }
  }
}

Values:

const map = {
  visibility_off: 'eye_off',
  trending_up: 'boost',
  add_to_queue: 'queue',
  '/badges/proDark.svg': 'pro',
  '/icons/network-pos.svg': 'network',
  '/icons/binoculars.svg': 'binoculars',
  palette: 'creator',
  '/icons/web-plus.svg': 'web_plus',
  '/icons/palette-swatch.svg': 'palette_swatch',
  '/icons/account-edit.svg': 'account_edit',
};

QA

UX/Design

Mobile

Once implemented the icon mapping should be removed from mobile

Acceptance Criteria

• all the attributes with iconId should contain a mobileIconId

Definition of Ready Checklist

• Definition Of Done (DoD)
• Acceptance criteria
• Weighted
• QA
• UX/Design
• Personas
• Experiments