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

| 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 - 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

| props key | Type | Required | Description | | ----------------------------- | ----------------------- | ------------------------ | ------------------------------------------ | | type | enum | required | TypeDisplay.DEFAULT | | size | enum | required | DisplaySize.LIST_MEDIUM | | params | object | required | slocation | | onloadDone | Function | option | function callback api response
| header | object | option | custom header view
| styleSection | object | option | custom header style |

| params key | Type | Required | Description | | ----------------------------- | ----------------------- | ------------------------ | ------------------------------------------ | | merchant_id | String | required | Default value is 0 | | oaIds | String | option | list oaId | | latitude | number | option | location | | longitude | number | option | location |

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

| props key | Type | Required | Description | | ----------------------------- | ----------------------- | ------------------------ | ------------------------------------------ | | type | enum | required | DEFAULT or LIST_NEARBY | | size | enum | required | DisplaySize.SINGLE_MEDIUM | | params | object | required | | | onloadDone | Function | option | function callback api response
| header | object | option | custom header view
| styleSection | object | option | custom header style |

| params key | Type | Required | Description | | ----------------------------- | ----------------------- | ------------------------ | ------------------------------------------ | | oaId | number | required | number oaId | | oaIds | String | required | list oaId | | latitude | number | required | location | | longitude | number | option | location | | track | object | required | tracking source |

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

| Name | Type | Required | Description | | ----------------------------- | ----------------------- | ------------------------ | ------------------------------------------ | | merchantCode | String | required | | | storeCode | String | option | | | filter | String | required | ALL, TODAY, YESTERDAY, LAST_7_DAYS, LAST_14_DAYS, LAST_30_DAYS | | onloadDone | Function | option | function callback api response | | styleContainer | Object | option | style of Container | | styleContent | Object | option | style of content | | styleBlockTitle | Object | option | style of header | | styleTextTitle | Object | option | style of title header |

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

| props key | Type | Required | Description | | ----------------------------- | ----------------------- | ------------------------ | ------------------------------------------ | | type | enum | required | DisplaySize.DEFAULT | | size | enum | required | DisplaySize.SINGLE_SMALL | | params | object | required | | | onloadDone | Function | option | function callback api response
| styleSection | object | option | custom container style | | styleContent | object | option | custom inner style | | params key | Type | Required | extra data param | | ----------------------------- | ----------------------- | ------------------------ | ------------------------------------------ | | oaId | number | required | number oaId | | merchantCode | String | required | merchantCode |

TYPE = TypeDisplay.DEFAULT 
SIZE = DisplaySize.SINGLE_SMALL

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

Container