@officialaccount/components v1.2.1

Official Account component hub

OA Block will display the OA Recommend, OA Nearby, Promotion nearby. The kind of OA Nearest, Similar, Suggestion

Implementation

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

Required webpack.config.js
include: [
  // ...
  /node_modules(.*[/\\])+@momo-platform[/\\](.*)+/,
  /node_modules(.*[/\\])+@officialaccount[/\\](.*)+/,
]

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',
    LIST_NEARBY: 'LIST_NEARBY'
}

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

Props

Params Props

1 - Usage 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 - Usage size LIST_MEDIUM

TYPE = TypeDisplay.DEFAULT 
SIZE = DisplaySize.LIST_MEDIUM 
LOCATION is optional 
return (
    <SafeAreaView>
        <OaHub 
        type={ TypeDisplay.DEFAULT }
        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 - Usage size SINGLE_MEDIUM

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

return (
    <SafeAreaView>
        <OaHub 
        type={ TypeDisplay.DEFAULT }
        size={ DisplaySize.SINGLE_MEDIUM }
        params={{
          oa_id: 1237, //required 
          oaIds: '1237,1240,1241,1243,1244,1247,1253,1259,1262', //required 
          latitude: 10.7741709, //optional 
          longitude: 106.7014805, //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>
)

Version 0.3.20 or newest

OA LISTING screen by Type LIST_NEARBY & sorting Neaby first OA LISTING screen by Type LIST_NEARBY & sorting Rating first

4- OA Statistics

Version 0.3.6 or newest

import { OAStats } from '@officialaccount/components';
<OAStats 
  params={{
    merchantCode, 
    storeCode, 
    filter: 'LAST_7_DAYS',
    title: 'Trang doanh nghiệp',
    styleContainer,
    styleContent,
    styleBlockTitle,
    styleTextTitle,
  }}
  onloadDone={callback}
/>

5 - Usage size SINGLE_SMALL

TYPE = TypeDisplay.DEFAULT 
SIZE = DisplaySize.SINGLE_SMALL

return (
    <SafeAreaView>
        <OaHub 
        type={TypeDisplay.DEFAULT} 
        size={DisplaySize.SINGLE_SMALL}
        styleSection={{}}
        params={{
            merchantCode,
            oaId,
            hasContainer: true,
        }}/>
    </SafeAreaView>
)

Version 1.1.31
Handle Error token expired (errorCode 21) and token invalid  (errorCode 22)

Container