Components within the Loyalty Wallet SDK can be customized via the KigoContext to apply additional branding, support links, and messaging to your application.

Defaults

The code below illustrates setting the KigoContext with the default values for the components:

const kigoContext = {
  components: {
    ApplyClaimCode: {
      defaultProps: {
        supportUrl: "",
      },
    },
    KigoErrorSnackbar: {
      defaultProps: {
        actionText: "Contact Support",
        actionUrl: "https://help.kigo.io/hc/en-us/requests/new",
      },
    },
    SwipeToClaimInput: {
      defaultProps: {
        programImgSrc: "",
      },
    },
    WalletEmptyState: {
      defaultProps: {
        programImgSrc: "",
        descriptionText: "",
      },
    },
    WalletHeader: {
      defaultProps: {
        walletLabelPosition: "left",
        textColor: "#000000",
        backgroundColor: "#FFFFFF",
      },
    },
    UploadHeader: {
      defaultProps: {
        image:
          "https://d1a4n83cq9sj78.cloudfront.net/assets/frontend-assets/john-deere/upload-phone-icon.png",
      },
    },
    UploadRequirementsModal: {
      defaultProps: {
        image:
          "https://d1a4n83cq9sj78.cloudfront.net/assets/frontend-assets/john-deere/invoice-requirements.png",
      },
    },
    WalletWelcomeModal: {
      defaultProps: {
        display: false,
        imageSrc: "",
        title: "",
        subtitle: null,
        cta: null,
      },
    },
    WalletBanner: {
      defaultProps: {
        title: "Have another invoice?",
        body: 'Tap the same "Smooth Savings Oil Promotion" token and follow the same process. You can repeat this as many times as needed!',
      },
    },
    WalletMenu: {
      defaultProps: {
        showApplyClaimCodeMenu: true,
        showViewHiddenRewardsMenu: true,
        showHistoryMenu: true,
      },
    },
  },
};

Each component has a set of defaultProps that define its initial behavior and appearance. These properties can be customized through the KigoContext to better align with your specific application needs. Below is a breakdown of the defaultProps available for each component.

Components Properties

ApplyClaimCode `defaultProps`

supportUrl - URL for the "Contact Support" text displayed when the user is on the Apply a Claim Code form.
- Default: "" - If set to "", the support link will be omitted.```
- ```
supportUrl: ""
```
- Valid values: string
- Example:
```
{
  supportUrl: "https://support.example.com/contact",
}
```
- Storybook Link: View Apply Claim Code in Storybook

KigoErrorSnackbar `defaultProps`

actionText - The text displayed on the action button, e.g., "Contact Support".
- Default: "Contact Support" - If set to undefined, no button will be displayed.
- ```
actionText: "Contact Support"
```
- Valid values: string
- Example:
```
actionText: "Contact Support"
```
- Storybook Link: View KigoErrorSnackbar in Storybook
actionUrl - The URL that the action button navigates to, e.g., "https://help.kigo.io/hc/en-us/requests/new".
- Default: https://help.kigo.io/hc/en-us/requests/new - If set to undefined, the action button will not direct the user anywhere.
- ```
actionUrl: "https://help.kigo.io/hc/en-us/requests/new"
```
- Valid values: string
- Example:
```
actionUrl: "https://help.example.com/support"
```
- Storybook Link: View KigoErrorSnackbar in Storybook

SwipeToClaimInput `defaultProps`

programImgSrc - Image source URL used as an icon in the Swipe input.
- Default: "" - If set to "", a Kigo-branded image will be used.
- Valid values: string
- Example:
```
programImgSrc: "https://example.com/image.png"
```
- Storybook Link: View SwipeToClaimInput in Storybook

WalletEmptyState `defaultProps`

programImgSrc - Image source URL used as an icon when no tokens are present, and the Wallet is considered empty.
- Default: "" - If set to "", a generic wallet icon will be shown.
- Valid values: string
- Example:
```
programImgSrc: "https://example.com/image.png"
```
- Storybook Link: View WalletEmptyState in Storybook
descriptionText - Custom message displayed when no tokens are present, and the Wallet is considered empty.
- Default: "" - If set to "", no message will be shown.
- Valid values: string
- Example:
```
descriptionText: "Your wallet is empty. Please apply a claim code to proceed."
```
- Storybook Link: View WalletEmptyState in Storybook
textColor - Text color of the header.
- Default: ""#000000"" - If not set, the wallet header will be set to the default value.
- Valid values: string
- Example:
```
textColor: "#000000"
```
- Storybook Link: View WalletHeader in Storybook

WalletHeader `defaultProps`

walletLabelPosition - Determines the horizontal positioning of the walletLabel within the WalletHeader.
- Default: "left"
- Valid values: "left" | "center"
- Example:
```
walletLabelPosition: "center"
```
- Storybook Link: View WalletHeader in Storybook
backgroundColor - Determines the background color of the header within the WalletHeader.
- Default: "#FFFFFF"
- Valid values: Valid CSS color value e.g. HEX, RGB value passed in as a string
- Example:
```
backgroundColor: "#FFFFFF"
```
- Storybook Link: View WalletHeader in Storybook

UploadHeader `defaultProps`

image - Image source URL used as an icon in the header of the Scan screen where users upload images.
- Default: "https://d1a4n83cq9sj78.cloudfront.net/assets/frontend-assets/john-deere/upload-phone-icon.png"
- Valid values: string
- Example:
```
image: "https://example.com/upload-icon.png"
```
- Storybook Link: View Scan in Storybook

UploadRequirementsModal `defaultProps`

image - Image source URL used as an image in modal containing the requirements for uploads by the user in the UploadRequirementsModal on the Scan screen (opened by clicking 'View upload requirements'
- Default: "https://d1a4n83cq9sj78.cloudfront.net/assets/frontend-assets/john-deere/invoice-requirements.png"
- Valid values: string
- Example:
```
image: "https://d1a4n83cq9sj78.cloudfront.net/assets/frontend-assets/john-deere/invoice-requirements.png"
```
- Storybook Link: View UploadRequirementsModal in Storybook (click 'View upload requirements on Scan screen)

WalletWelcomeModal `defaultProps`

display - Determines whether or not to display the welcome modal when the user logs in to the Wallet for the first time.
- Default: false
- Valid values: boolean
- Example:
```
display: false
```
imageSrc - Image source URL for the image rendered on the welcome modal.
- Default: "" - If not set then no image will be rendered on the welcome modal.
- Valid values: string
- Example:
```
imageSrc: "https://example.com/welcome-img.png"
```
title - Title for the welcome modal.
- Default: "" - If not set then no title will be rendered on the welcome modal.
- Valid values: string
- Example:
```
title: "Welcome to the Loyalty Program!"
```
subtitle - Subtitle for the welcome modal.
- Default: "" - If not set then no subtitle will be rendered on the welcome modal.
- Valid values: string
- Example:
```
subtitle: "Here are some quick tips to get you started."
```

WalletBanner `defaultProps`

title - Determines the title of the campaign message shown on the WalletBanner
- Default: "Have another invoice?"
- Valid values: string
- Example:
```
title: "Have another invoice?"
```
- Storybook Link: View Banner in Storybook
body - Determines the body of the campaign message shown on the WalletBanner
- Default: "Tap the same "Smooth Savings Oil Promotion" token and follow the same process. You can repeat this as many times as needed!"
- Valid values: string
- Example:
```
body: "Tap the same \"Smooth Savings Oil Promotion\" token and follow the same process. You can repeat this as many times as needed!"
```
- Storybook Link: View Banner in Storybook

WalletMenu `defaultProps`

showApplyClaimCodeMenu - Determines the showing/hiding Apply Claim Code within the WalletMenu.
```
showApplyClaimCodeMenu: true,
```
showViewHiddenRewardsMenu - Determines the showing/hiding View Hidden Reward within the WalletMenu.
```
showViewHiddenRewardsMenu: true,
```
showHistoryMenu - Determines the showing/hiding History within the WalletMenu.
```
showHistoryMenu: true,
```

Additional Components

Other components, such as the Button, IconCircle, and Loadings, are also affected by the KigoContext, particularly through theme settings like primary and secondary colors.

Button: The appearance of buttons can be customized via theme colors.
- Storybook Link: View Buttons in Storybook
IconCircle: This component's styling is influenced by the theme settings.
- Storybook Link: View IconCircle in Storybook
Loadings: The loading indicators can be styled according to the theme.
- Storybook Link: View Loadings in Storybook

This is just a subset of the components available. You can find many more detailed in Storybook.

Locale Customization

Locale changes, such as locale.walletLabel.singular, affect many components across the application. For more details on how to customize locale settings, visit our Locale Customization page.

For example, the Wallet Archive screen can be customized to reflect these locale settings.

Wallet Archive: The screen's labels and messages can be adjusted based on locale settings.
- Storybook Link: View Wallet Archive in Storybook

By utilizing the KigoContext, you can ensure that all components are styled and localized consistently with your application's branding and language requirements.

Defaults

Components Properties

ApplyClaimCode defaultProps

KigoErrorSnackbar defaultProps

SwipeToClaimInput defaultProps

WalletEmptyState defaultProps

WalletHeader defaultProps

UploadHeader defaultProps

UploadRequirementsModal defaultProps

WalletWelcomeModal defaultProps

WalletBanner defaultProps

WalletMenu defaultProps