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

1. Info.plist

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

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

3. 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:

1. Para o android basta alterar a versão do kotlin para 1.7.0

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

3. 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úmeros
  • name: Nome completo do usuário
  • email: E-mail do usuário
  • mobilePhone: 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

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, etc
• serviceName: o nome do serviço que será enviado ao Analytics. Exemplo: VR Ofertas
• routeNamingMap: 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 pelo react-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