Official Account component hub

User can view the OA collection, PromoCom. The kind of OA Nearest, Similar, Suggestion

Implementation

Required package.json
"react": "17.0.1"
"react-native"
"@momo-kits/core"
"@momo-platform/api"
"@momo-platform/utils"
"@momo-kits/skeleton"
"@momo-kits/rating-star"
"@officialaccount/components": "latest"

Required webpack.config.js
include: [
  // ...
  /node_modules(.*[/\\])+@officialaccount[/\\]components/
]

IMPORT
import { OaHub, TypeDisplay, DisplaySize } from '@officialaccount/components';

enum TypeDisplay  
{
    DEFAULT: 'SUGGESTION',
    SUGGESTION: 'SUGGESTION',
    NEARBY: 'NEARBY',
    NEARBY_OA: 'NEARBY_OA',
    SIMILAR_TO_OA: 'SIMILAR_TO_OA',
    REVIEW: 'REVIEW',
}

enum DisplaySize
{
  DEFAULT: 'SLIDER_SMALL',
  SINGLE_MEDIUM: 'SINGLE_MEDIUM',
  SINGLE_LARGE: 'SINGLE_LARGE',
  SLIDER_SMALL: 'SLIDER_SMALL',
  LIST_MEDIUM: 'LIST_MEDIUM',
}

Props

| Name | Type | Default | Description | | ----------------------------- | ----------------------- | ------------------------ | ------------------------------------------ | | params | Object | {} | | | header | Object | {} | | | type | String | DEFAULT | | | size | String | LIST_MEDIUM | | | styleSection | Object | '' | style content |

Params Props

| Name | Type | Required | | ----------------------------- | -------------------------------------------------- | ------------------------------------------ | | merchant_id | String | Required | | store_id | String | | | oa_id | Number | | | oaIds | List<Number> | | | storeCodes | List<String> | | | latitude | Number | | | longitude | Number | | | track | Object | { source, service_name, screen_name } |

1 - Using size SLIDER_SMALL

TYPE = TypeDisplay.SIMILAR_TO_OA 
SIZE = DisplaySize.SLIDER_SMALL 
return (
    <SafeAreaView>
        <OaHub params={{
            oa_id: oa_id,
            store_id: store_id,
            limit: 5,
            track: { source, service_name, screen_name }
          }} header={{
            title: 'QUÁN TƯƠNG TỰ',
            rightButton: {
              buttonTitle: 'Xem thêm',
              refId: 'oa_local_discovery'
            },
            isShowHeader: true, //default is true
          }}
          type={ TypeDisplay.SIMILAR_TO_OA }
          size= { DisplaySize.SLIDER_SMALL }/>
    </SafeAreaView>
)

2 - Using size LIST_MEDIUM

TYPE = TypeDisplay.NEARBY 
SIZE = DisplaySize.LIST_MEDIUM 
LOCATION is optional 
return (
    <SafeAreaView>
        <OaHub 
        type={ TypeDisplay.NEARBY }
        size={ DisplaySize.LIST_MEDIUM }
        params={{
          merchant_id: merchant_id,
          store_id: store_id,
          oaIds: '1,2,3', 
          storeCodes: '1,2,3', 
          limit: 3,
          latitude: 10.7741709,
          longitude: 106.7014805,
          distance: 20, //unit = km
          locationRequired: true, //default is true - show popup location if need
          track: { source, service_name, screen_name }
        }} 
        header={{
          title: 'Cửa hàng gần bạn',
          isShowHeader: false, //default is true,
          styleHeaderTitle: { fontWeight: 'bold', fontSize: 16 },
        }}
        styleSection={{
          marginHorizontal: 0,
          paddingHorizontal: 0
        }}
        />
    </SafeAreaView>
)

3 - Using size SINGLE_MEDIUM

TYPE = TypeDisplay.DEFAULT 
SIZE = DisplaySize.SINGLE_MEDIUM 
LOCATION is optional 

return (
    <SafeAreaView>
        <OaHub 
        type={ TypeDisplay.DEFAULT }
        size={ DisplaySize.SINGLE_MEDIUM }
        params={{
          merchant_id: merchant_id, //required 
          store_id: store_id, //optional 
          oa_id: oa_id, //optional 
          oaIds: '1,2,3', //optional 
          storeCodes: '1,2,3', //optional 
          latitude: 10.7741709, //optional 
          longitude: 106.7014805, //optional 
          storeCodes: "store_id1, store_id2, store_id3" , //optional 
          track: { source, service_name, screen_name }
        }} 
        header={{
          title: '',
          isShowHeader: true, //default is true,
          styleHeaderTitle: {
            fontSize: 15,
            fontWeight: 'bold',
          }
          isShowArrow: true, //default is true,
          enableViewAll: true, //default is true. Set false In case disable click on header title
        }}
        styleSection={{
          marginHorizontal: 0,
          paddingHorizontal: 0
        }}
        />
    </SafeAreaView>
)

4-Manual redirect to OA Listing by merchantId, storeCode

import MaxApi from '@momo-platform/api';
const redirectToOAListing = () => {
    MaxApi.startFeatureCode('oa_listing', {
        type: TypeDisplay.DEFAULT, //required 
        size: DisplaySize.SINGLE_MEDIUM, //required 
        merchant_id: merchant_id, //required 
        storeCodes: "storeCode1, storeCode2, storeCode3" , //optional 
        latitude: 10.7741709, //optional 
        longitude: 106.7014805, //optional 
    });
};

Container DEFAULT TYPE: NEARY_OA