@globalpoints/cashback-mobile-ui v4.5.0
@globalpoints/cashback-mobile-ui
Documentação atualizada em 25/06/2023
Módulo de cashback para o Super App da VR. Desenvolvido e mantido por Global Points
Instalação das dependências
Use o comando abaixo para instalar o pacote em seu projeto. Lembre-se: Você precisará de uma permissão para acessar o pacote (fornecido pela Global Points)
yarn add @globalpoints/cashback-mobile-ui
Este pacote possui algumas dependências que devem ser instaladas antes de começar a utilizá-lo (peerDependencies). Se certifique de estar utilizando as versões corretas para evitar qualquer conflito.
{
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"@sentry/react-native": "3.4.1",
"expo-media-library": "^15.6.0",
"expo-screen-orientation": "^6.2.0",
"expo-sharing": "11.7.0",
"react": "18.2.0",
"react-native": "0.71.14",
"react-native-gesture-handler": "^2.9.0",
"react-native-permissions": "^3.3.1",
"react-native-reanimated": "3.5.3",
"react-native-safe-area-context": "^4.5.1",
"react-native-screens": "^3.20.0",
"react-native-svg": "13.9.0",
"react-native-view-shot": "^3.3.0",
"react-native-vision-camera": "2.16.1",
"vision-camera-code-scanner": "^0.2.0",
"@react-native-clipboard/clipboard": "^1.8.5",
"@wootric/react-native-wootric": "1.5.0",
"expo": "48.0.10",
"expo-file-system": "14.0.0",
"expo-linear-gradient": "^12.1.2",
"react-native-fast-image": "8.5.11",
"react-native-get-random-values": "1.8.0",
"react-native-webview": "^11.17.2",
"rn-scratch-card": "1.0.0-beta7"
}
Com excessão do react-native-reanimated
, react-native-vision-camera
, react-navigation
e react-native-permissions
, todos os outros pacotes são de instalação simples.
Após a instalação de todos, lembre-se de rodar pod install
ou npx pod-install
para a devida configuração do iOS.
Para react-native-reanimated
, siga os passos de instalação a seguir:
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation
Para react-navigation
, siga os passos de instalação a seguir:
https://reactnavigation.org/docs/getting-started/
Para react-native-vision-camera
, siga os passos de instalação a seguir:
https://www.react-native-vision-camera.com/docs/guides
Para react-native-permissions
, siga os passos de instalação a seguir:
https://github.com/zoontek/react-native-permissions
IMPORTANTE: além da instalação da lib de permissões, também é necessário seguir os passos de instalação para a permissão de acesso à câmera. (passo a passo descrito abaixo).
Para expo-file-system
, siga os passos de instalação a seguir:
https://github.com/expo/expo/tree/sdk-45/packages/expo-file-system
Além das bibliotecas acima, é fundamental que o seu projeto siga as configurações abaixo:
- Info.plist
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
- Podfile
target 'YourAwesomeProject' do
...
# Para controle de permissão de uso de câmera do Cashback
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
...
end
- android/build.gradle
ext: {
...
minSdkVersion = 22
...
}
Ao final do processo, rode pod install
novamente.
Caso tenha algum problema com dependências no lado do iOS, aconselhamos a rodar pod deintegrate
seguido de pod install --repo-update
Workaround (Somente RN >= 0.71)
O projeto utiliza o plugin vision-camera-code-scanner para ler códigos de barra e qrcode. Para funcionar no react native 0.71 faça o seguinte:
Para o android basta alterar a versão do kotlin para 1.7.0
Para o iOS, abra o PodFile e adicione ao final do post_install:
installer.pods_project.build_configurations.each do |config|
config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
end
- Rode o pod install e tudo certo.
Como utilizar
O primeiro passo para começar a usar este pacote é injetar o módulo de cashback dentro das suas rotas.
Para isso, utilize o método makeCashbackStackRoutes
na configuração das suas rotas.
...
import { makeCashbackStackRoutes, AnalyticsProps } from '@globalpoints/cashback-mobile-ui';
const { Navigator, Screen } = createNativeStackNavigator();
// Exemplo Analytics (Opcional)
const analytics: AnalyticsProps = {
analyticsInstance: {
event: (name: string, params?: any) => {
console.log(name, params);
},
pageView: ({ screen_name }: { screen_name: string }) => {
console.log(screen_name);
},
},
defaultAnalyticsEventData: {
userId: '1234',
vrId: '1234',
issuer: 'ISSUER',
},
serviceName: 'VR Ofertas',
eventPrefix: 'offers',
routeNamingMap: {
HOME: 'VR Ofertas / Home',
QRCODE_SCANNER: 'VR Ofertas / Home / QR Code Scan',
RECEIPT_MANUAL_TYPING: 'VR Ofertas / Home / QR Code Scan / Codigo NF Manual',
RECEIPT_SUCCESS: 'VR Ofertas / Home / QR Code Scan / Sucesso',
RECEIPT_LIST: 'VR Ofertas / Home / Extrato',
SCRATCH_CARD_LIST: 'VR Ofertas / Home / Raspadinhas',
SCRATCH_CARD_SCRAPING: 'VR Ofertas / Home / Raspadinhas / Raspar',
INSTITUTIONAL: 'VR Ofertas / Regulamento',
MARKETPLACE: 'VR Ofertas / Home / Usar Saldo',
PROMOTIONS_LIST: 'VR Ofertas / Home / Cashback',
PROMOTIONS_DETAILS: 'VR Ofertas / Home / Cashback / Detalhes Oferta',
PRODUCT_DETAILS: 'VR Ofertas / Home / Cashback / Detalhes Oferta / Detalhes do Produto',
ONLINE_STORE_LIST: 'VR Ofertas / Home / Lojas Online',
ONLINE_STORE_DETAILS: 'VR Ofertas / Home / Lojas Online / Detalhes',
ONLINE_STORE_WEBVIEW: 'VR Ofertas / Home / Lojas Online / Detalhes / WebView',
ONLINE_STORE_COUPON_DETAILS: 'VR Ofertas / Home / Lojas Online / Detalhes do Cupom',
FAQ_LIST: 'VR Ofertas / Home / Central de Ajuda',
FAQ_DETAILS: 'VR Ofertas / Home / Central de Ajuda / Detalhes',
RAFFLE_HOME: 'VR Ofertas / Home / Sorteios',
RAFFLE_LIST: 'VR Ofertas / Home / Sorteios / Meus Sorteios',
RAFFLE_DETAILS: 'VR Ofertas / Home / Sorteios / Detalhes',
RAFFLE_REGULATION: 'VR Ofertas / Home / Sorteios / Regulamento',
BALANCE_TRANSFER: 'VR Ofertas / Home / Usar Saldo / Transferencia de Saldo',
BALANCE_TRANSFER_SUCCESS: 'VR Ofertas / Home / Usar Saldo / Transferencia de Saldo / Sucesso',
UNAVAILABLE_SERVICE: 'VR Ofertas / Serviço Indisponivel',
HTML_VIEWER: '',
}
};
export const Routes: React.FC =() => {
return (
<NavigationContainer>
<Navigator>
<Screen name="SUA_TELA_1" component={Home} />
<Screen name="SUA_TELA_2" component={Home} />
{makeCashbackStackRoutes(
{
document: '05211005260',
name: 'Peter Parker',
email: 'miranha@gmail.com',
mobilePhone: '11986266756',
},
'development',
analytics,
{
financeiro: {
available: true,
onCreditBannerNavigate: () => {
navigation.navigate("CreditoFGTS")
}
}
}
)}
</Navigator>
</NavigationContainer>
);
};
Parâmetros necessários:
- Dados do usuário
document
: CPF ou CNPJ, apenas númerosname
: Nome completo do usuárioemail
: E-mail do usuáriomobilePhone
: Número de celular, apenas números
- Ambiente
- As opções possíveis são:
development
,staging
,production-v2
,production-v3
production-v2
: Envio de NF e Lojas online. Esta versão está depreciada e deve ser removida em breve.production-v3
: production-v2 + VR Sorteios
- As opções possíveis são:
Após injetar o módulo de cashback dentro do seu app, basta navegar o usuário no momento mais apropriado:
...
import { CASHBACK_INITIAL_ROUTE_NAME } from '@globalpoints/cashback-mobile-ui';
export const Home: React.FC = () => {
...
<MenuItem onPress={() => navigation.navigate(CASHBACK_INITIAL_ROUTE_NAME)} text="Cashback" />
}
Analytics
O parâmetro de analytics é opcional e será ignorado caso não seja informado. Para inicializar o módulo de analytics, é necessário seguir a seguinte interface:
export interface AnalyticsProps {
analyticsInstance: {
event: (name: string, params?: any) => void;
pageView: ({ screen_name }: { screen_name: string }) => void;
};
serviceName?: string;
defaultAnalyticsEventData?: any;
routeNamingMap?: RoutingMappingProps;
}
Sendo:
analyticsInstance
: a instância do objeto de analytics contendo os métodos que serão chamados para gravar um novo evento e registrar "page views".defaultAnalyticsEventData
: qualquer objeto com dados que devem ser enviados em todos os eventos, e.g.: nome, userId, etcserviceName
: o nome do serviço que será enviado ao Analytics. Exemplo: VR OfertasrouteNamingMap
: um objeto de mapeamento que permite customizar o nome das rotas que serão enviadas ao Analytics. Este objeto é utilizado exclusivamente para registrar "page views". Caso não seja informado, as page views serão enviadas com o nome interno das rotas utilizadas peloreact-navigation
.
Exemplo de routeNamingMap
:
const ROUTE_MAPPING: RoutingMappingProps = {
HOME: 'VR Ofertas/Home',
QRCODE_SCANNER: 'VROfertas/Home/ScanearQRCode',
RECEIPT_MANUAL_TYPING: 'VROfertas/Home/Extrato/',
RECEIPT_SUCCESS: 'VROfertas/Home/Extrato/Sucesso',
RECEIPT_LIST: 'VROfertas/Home/Extrato',
SCRATCH_CARD_LIST: 'VROfertas/Home/Raspadinha',
SCRATCH_CARD_SCRAPING: 'VROfertas/Home/Raspadinha/Detalhes',
INSTITUTIONAL: 'VROfertas/Home/Regulamento',
MARKETPLACE: 'VROfertas/Home/UseSeuSaldo',
PROMOTIONS_LIST: 'VROfertas/Home/VRDeVolta',
PROMOTIONS_DETAILS: 'VROfertas/Home/VRDeVolta/DetalheDaOferta',
PRODUCT_DETAILS: 'VROfertas/Home/DetalhesDoProduto',
ONLINE_STORE_LIST: 'VROfertas/Home/CupomDeDesconto',
ONLINE_STORE_DETAILS: 'VROfertas/Home/CupomDeDesconto/DetalhesDoDesconto',
ONLINE_STORE_WEBVIEW: 'VROfertas/Home/CupomDeDesconto/DetalhesDoDesconto/UsarCupom',
ONLINE_STORE_COUPON_DETAILS: 'VROfertas/Home/CupomDeDesconto/DetalhesDoDesconto/DetalhesDoCupom',
HTML_VIEWER: '',
FAQ_LIST: 'VROfertas/Home/Faq',
FAQ_DETAILS: 'VROfertas/Home/Faq/DetalhesDaPergunta',
RAFFLE_HOME: 'VROfertas/Home/Sorteios',
RAFFLE_LIST: 'VROfertas/Home/ListagemSorteios',
RAFFLE_DETAILS: 'VROfertas/Home/Sorteios/MeusSorteios',
RAFFLE_REGULATION: 'VROfertas/Home/Sorteios/Regulamento',
};
Premissas
Este módulo foi desenvolvido com o intuito de se encaixar dentro do Super App para que a navegação seja transparente e que não haja a impressão de serem dois aplicativos diferentes. Para tal, além de seguir o mesmo design system para elaboração das telas, também estaremos utilizando as mesmas fontes. A principal premissa neste caso é que os arquivos de fonte estejam nomeados da seguinte forma:
- Montserrat-Bold.ttf
- Montserrat-Medium.ttf
- Montserrat-Regular.ttf
- Montserrat-SemiBold.ttf
Caso haja qualquer alteração nesses arquivos ou no design system, essas alterações devem ser comunicadas com a Global Points para a devida atualização do módulo, mantendo assim a compatibilidade.
Suporte
Para qualquer problema com a instalação ou utilização deste pacote, entre em contato diretamente com a Global Points. E-mail para contato: bruno.mayer@globalpoints.com.br
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago