How to create a Loyalty points wallet screen

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Loyalty Points Wallet Screen is a valuable feature in e-commerce, retail, and rewards-based apps, allowing users to view their collected points and redeem them for offers, discounts, or products. A well-designed wallet interface includes a points balance display, points guide, and available redemption options.

This guide will walk you through the steps to design and implement a Loyalty Points Wallet Screen using the Ionic Design Kit. By leveraging its pre-made UI components and the Ionic Framework, you can create a visually rewarding, easy-to-use interface that motivates users to earn and redeem points seamlessly.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start loyalty-screen blank --type=react

3. Get inside the project directory

cd loyalty-screen

4. Create a Loyalty points page

Create page LoyaltyPoints.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const LoyaltyPoints: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default LoyaltyPoints;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Select the layout structure

For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.

<IonPage>
  <IonHeader>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

6. Import necessary components

Add the required imports at the top of the file to use Ionic components and icons.

import { IonBackButton, IonButtons, IonCard, IonContent, IonHeader, IonImg, IonItem, IonLabel, IonPage, IonText, IonTitle, IonToolbar } from '@ionic/react';
import { arrowBack } from 'ionicons/icons';

7. Add header with back button

Place the IonHeader with IonToolbar and add a back button with the text 'Loyalty points' as the title.

<IonHeader>
  <IonToolbar>
    <IonButtons slot="start" className="ion-padding-start">
      <IonBackButton defaultHref="/" text="" icon={arrowBack} />
    </IonButtons>
    <IonTitle>Loyalty points</IonTitle>
  </IonToolbar>
</IonHeader>
<IonContent>
    ...
</IonContent>

8. Add content container

Place the IonContent with fullscreen attribute and center-aligned text styling.

<IonContent fullscreen className='ion-padding ion-text-center'>
  ...
</IonContent>

9. Create points display section

Add a heading showing the user's current points and a description text below it.

<IonContent fullscreen className='ion-padding ion-text-center'>
    <h1>You have 199 points</h1>
    <p className='ion-no-margin ion-margin-bottom'>
        Choose how you want to spend them
    </p>
</IonContent>

10. Create cards data array

Before rendering the cards, create an array containing the loyalty program items with their images, names, and point costs.

const cards = [
  {
    img: '/images/1.jpg',
    name: 'Sauce',
    points: 50
  },
  {
    img: '/images/2.jpg',
    name: 'Sauce',
    points: 150
  },
  {
    img: '/images/3.jpg',
    name: 'Sauce',
    points: 250
  },
  {
    img: '/images/4.jpg',
    name: 'Sauce',
    points: 400
  },
  {
    img: '/images/5.jpg',
    name: 'Sauce',
    points: 600
  },
  {
    img: '/images/6.jpg',
    name: 'Sauce',
    points: 800
  },
]

11. Create cards container

Add a flexbox container for the loyalty cards with proper spacing and responsive layout.

<div className='ion-display-flex ion-justify-content-center ion-flex-wrap' style={{ marginBottom: "32px", gap: "24px 16px" }}>
  ...
</div>

12. Render loyalty cards

Map through the cards array to display each item with its image, name, and point cost.

{cards.map((card, i) => (
  <div key={i} style={{ width: "47%" }}>
    <IonCard className='ion-no-margin'>
      <IonImg
        src={card.img}
        alt={card.name}
      ></IonImg>
    </IonCard>
    <div className='ion-display-flex ion-flex-column' style={{ marginTop: "12px", gap: "4px" }}>
      <p className='ion-no-margin' style={{ fontSize: "12px" }}>{card.name}</p>
      <IonText color='medium'>
        <p className='ion-no-margin'>{card.points} points</p>
      </IonText>
    </div>
  </div>
))}

13. Add information section

Place an IonItem button at the bottom to provide information about the loyalty program.

<IonItem button lines='none'>
  <IonLabel>
    <h2>What are loyalty points?</h2>
    <p>Learn more about our loyalty program</p>
  </IonLabel>
</IonItem>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!