Kigo Context

The Kigo Context is a powerful configuration object that allows you to customize the behavior, appearance, and functionality of the Kigo Loyalty Wallet SDK. This context can be set and updated both synchronously and asynchronously, providing flexibility depending on your application’s needs.

Setting the Kigo Context

Initial Setup

You can set the KigoContext when the Kigo Loyalty Wallet SDK is initialized. This is typically done inside the Kigo.onReady function, which is called once the SDK is fully loaded and ready to be configured:

Kigo.onReady = function (kigo) {
  kigo.setContext({
    theme: {
      palette: {
        primary: "#FF5733", // Custom primary color
      },
    },
    user: {
      name: "John Doe", // Set the user's name
    },
  });
};

Updating the Context Asynchronously

The KigoContext can also be updated asynchronously at any point in your application. This is useful if you need to modify the context after the SDK has already been initialized:

// Updating the context asynchronously
Kigo.setContext({
  components: {
    ApplyClaimCode: {
      defaultProps: {
        supportUrl: "https://support.example.com",
      },
    },
  },
});

Deep Merging Behavior

When you set or update the KigoContext, the SDK uses a deep merge strategy. This means that your custom context will be merged with the existing default context. Only the properties you specify will override the defaults, while the rest will remain unchanged.

For example, if you only want to update the primary color in the theme, you don’t need to specify the entire theme object:

Kigo.setContext({
  theme: {
    palette: {
      primary: "#28B463", // Only the primary color is updated
    },
  },
});

In this case, the secondary color and typography settings will retain their default values.

Accessing the Kigo Context

The KigoContext is readily available during the SDK's initialization and at any time during your application’s lifecycle:

• During Initialization: Use kigo.setContext within the Kigo.onReady function to set the context as the SDK loads.
• Asynchronous Updates: Use Kigo.setContext directly off the global Kigo object to update the context dynamically as your application runs.

Example Usage

Here’s an example that sets the context initially and then updates it later asynchronously:

// Initial setup
Kigo.onReady = function (kigo) {
  kigo.setContext({
    theme: {
      palette: {
        primary: "#FF5733",
        secondary: "#CCFFFE",
      },
      typography: {
        fontFamily: "Roboto, sans-serif",
      },
    },
    loggerOptions: {
      level: "debug",
    },
  });
};

// Asynchronous update
setTimeout(() => {
  Kigo.setContext({
    user: {
      name: "Jane Doe",
    },
    contacts: {
      supportEmail: "[email protected]",
    },
  });
}, 5000); // Updates the context 5 seconds after initial setup

Summary

• Initial Setup: Configure KigoContext during SDK initialization using kigo.setContext.
• Asynchronous Updates: Update the context at any time using Kigo.setContext on the global object.
• Deep Merging: Custom context settings are merged with the default context, preserving unspecified properties.
• Flexible Configuration: Customize components, theme, user settings, logging, and more through the KigoContext.

By leveraging the Kigo Context, you can fine-tune the Kigo Loyalty Wallet SDK to meet your application’s specific requirements, ensuring a seamless and consistent user experience.