@officialaccount/components-dev

Official Account component hub (DEV/DEBUG ONLY)

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

Implementation

package.json
"@officialaccount/components": "latest"

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

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
          }} 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,
          limit: 3,
          latitude: 10.7741709,
          longitude: 106.7014805,
        }} 
        header={{
          title: 'Cửa hàng gần bạn',
          isShowHeader: false, //default is true,
          styleHeaderTitle: { fontWeight: 'bold', fontSize: 16, color: 'rgba(86, 86, 86)' }
        }}
        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 
          latitude: 10.7741709, //optional 
          longitude: 106.7014805, //optional 
          storeCodes: "store_id1, store_id2, store_id3" , //optional 
        }} 
        header={{
          title: '',
          isShowHeader: true, //default is true,
          isShowArrow: true, //default is true,
        }}
        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