externalCode/inappProducts.js

import * as React from "react";

/**
 * @typedef {Object} IAPDisabledMessageComponentProps Props listed below are props related to IAP. Actual prop might contain more data.
 * @property {CourseViewModel} course
 * @property {Function} loadProducts Function to load products for the course
 * @property {Boolean} inAppEnabled Returns `true` if IAP is enabled
 * @property {Array} products Products available for purchase
 */
/**
 * @typedef {Object} ProductListComponentProps Props listed below are props related to IAP. Actual prop might contain more data.
 * @property {Array<Object>} storeProductPairs Information about loaded products
 * @property {Array} productsIds Ids of products
 * @property {Object} iapSettings Settings related to in-app purchases
 */

/**
 * @class
 * Inapp Products Hooks.
 * Instance name: inappProductsHooksApi
 
   You can customize the in-app products using these hooks such as displaying specific products, providing components for the product lists and more.
 * @example
 * externalCodeSetup.inappProductsHooksApi.METHOD_NAME
 */
export class InappProductsApi {
	ProductsListComponent = null;

	IAPDisabledMessageComponent = null;

	/**
	 * You can use this to provide a component for the Products List in the app.
	 * @method
	 * @param {ProductListComponentProps} ProductsListComponent
	 * @example <caption>Show specific products for a certain user while maintaining the default buddyboss components and styling</caption>
	 * ...
	 *
	 * //Import BuddyBoss components...
	 * import { ProductsList } from "@src/components/inAppPurchases/ProductList";
	 * import ScreenHeader from "@src/components/ScreenHeader";
	 * import { isMainNavigator } from "@src/utils/configUtils";
	 * import { backButton } from "@src/utils";
	 * import { getBottomTabBarHeight } from "@src/navigators/AppBottomTabBar";
	 * import { correctBottomSafeArea } from "@src/styles/global";
	 * export const applyCustomCode = externalCodeSetup => {
	 *
	 *  externalCodeSetup.inappProductsHooksApi.setProductsListComponent((props) => {
	 *
	 *    const { navigation, screenProps } = props;
	 *    const { t, global, colors, calcFontSize } = screenProps;
	 *
	 *    //Display 1 product for a specific user
	 *    const productsToDisplay = props.storeProductPairs && props.user.id == 1 ? [props.storeProductPairs[0]] : props.storeProductPairs
	 *
	 *    const mainNavigator = isMainNavigator(navigation);
	 *
	 *    const headerLeft = useMemo(
	 *      () =>
	 *        !mainNavigator
	 *          ? backButton({
	 *            navigation,
	 *            styles: { marginLeft: 0 },
	 *            headerColor: colors.headerIconColor,
	 *            text: t("common:back"),
	 *            textStyle: global.headerText
	 *          })
	 *          : null,
	 *      [mainNavigator]
	 *    );
	 *
	 *    const headerTitle = <Text style={global.appHeaderTitle} numberOfLines={1}>
	 *      {t("productsScreen:title")}
	 *    </Text>;
	 *
	 *    return <View
	 *      style={{
	 *        flex: 1,
	 *        backgroundColor: colors.bodyBg,
	 *        paddingBottom:
	 *          mainNavigator && Platform.OS === "ios"
	 *            ? getBottomTabBarHeight() +
	 *            correctBottomSafeArea(insets.bottom) -
	 *            10
	 *            : 0
	 *      }}
	 *    >
	 *      <ScreenHeader
	 *        global={global}
	 *        colors={colors}
	 *        headerLeft={headerLeft}
	 *        headerTitle={headerTitle}
	 *	        style={[
	 *          global.header,
	 *          {
	 *            borderBottomColor: colors.borderColor,
	 *            borderBottomWidth: StyleSheet.hairlineWidth,
	 *            backgroundColor: colors.headerBg
	 *          }
	 *        ]}
	 *      />
	 *      <Text style={{ paddingVertical: 10 }}> Hey {props.user.name}! Check out these latest deals for you </Text>
	 *      <ProductsList
	 *        {...props}
	 *        storeProductPairs={productsToDisplay} //Customize products to display
	 *      />
	 *    </View>
	 *  });
	 * }
	 *
	 * const getStyles = (colors, calcFontSize) =>
	 *  StyleSheet.create({
	 *    htmlViewContainer: {
	 *      paddingHorizontal: 16,
	 *      paddingTop: 20,
	 *      alignItems: "center"
	 *    }
	 *  });
	 */
	setProductsListComponent = ProductsListComponent => {
		this.ProductsListComponent = ProductsListComponent;
	};

	/**
	 * It is used in the course screen to provide a component to render when the IAP feature is disabled.
	 * @method
	 * @param {IAPDisabledMessageComponentProps} IAPDisabledMessageComponent
	 * @example
	 * externalCodeSetup.inappProductsHooksApi.setIAPAreDisabledComponent((props) => <Text> IAP Purchases are disabled </Text>)
	 */
	setIAPAreDisabledComponent = IAPDisabledMessageComponent => {
		this.IAPDisabledMessageComponent = IAPDisabledMessageComponent;
	};
}