4.5.0 • Published 1 year ago

@globalpoints/cashback-mobile-ui v4.5.0

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

@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>
  1. 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
  1. 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
  1. 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

4.5.0

1 year ago

4.4.0

1 year ago

4.4.0-beta.0

1 year ago

4.3.0

1 year ago

4.3.0-next-.1

1 year ago

4.2.1

1 year ago

4.2.0

1 year ago

4.1.0

1 year ago

4.0.1

1 year ago

4.0.0

2 years ago

3.3.0

2 years ago

3.2.1

2 years ago

3.2.0

2 years ago

3.2.0-beta.5

2 years ago

3.1.6

2 years ago

3.1.5

2 years ago

3.1.4

2 years ago

3.1.3

2 years ago

3.1.2

2 years ago

3.2.0-beta.4

2 years ago

3.2.0-beta.3

2 years ago

3.2.0-beta.2

2 years ago

3.1.1

2 years ago

3.2.0-beta.1

2 years ago

3.1.0

2 years ago

3.1.0-beta.6

2 years ago

3.1.0-beta.5

2 years ago

3.1.0-beta.4

2 years ago

3.1.0-beta.3

2 years ago

3.1.0-beta.2

2 years ago

3.1.0-beta.1

2 years ago

3.0.0-beta.9

2 years ago

3.0.0-beta.8

2 years ago

3.0.0-beta.7

2 years ago

3.0.0-beta.6

2 years ago

3.0.0-beta.5

2 years ago

3.0.0-beta.4

2 years ago

2.7.2

2 years ago

2.7.1

2 years ago

3.0.0-beta.3

2 years ago

2.7.0

2 years ago

2.6.2

2 years ago

3.0.0-beta.2

2 years ago

3.0.0-beta.1

2 years ago

3.0.0-beta.0

2 years ago

3.0.0

2 years ago

2.6.1

2 years ago

2.6.0

2 years ago

2.5.1

2 years ago

2.5.0

2 years ago

2.4.5

2 years ago

2.4.4

2 years ago

2.4.3

2 years ago

2.4.2

2 years ago

2.4.1

2 years ago

2.4.0

2 years ago

2.3.27

2 years ago

2.3.26

2 years ago

2.3.25

2 years ago

2.3.24

2 years ago

2.3.23

2 years ago

2.3.22

2 years ago

2.3.20

2 years ago

2.3.19

2 years ago

2.3.18

2 years ago

2.3.16

2 years ago

2.3.15

2 years ago

2.3.13

2 years ago

2.3.12

2 years ago

2.3.11

2 years ago

2.3.10

2 years ago

2.3.9

2 years ago

2.3.8

2 years ago

2.3.7

2 years ago

2.3.6

2 years ago

2.3.5

2 years ago

2.3.4

2 years ago

2.3.3

2 years ago

2.3.2

2 years ago

2.3.1

2 years ago

2.3.0

2 years ago

2.0.30

2 years ago

2.0.28

2 years ago

2.0.27

2 years ago

2.0.26

2 years ago

2.0.25

3 years ago

2.0.24

3 years ago

2.0.23

3 years ago

2.0.22

3 years ago

2.0.21

3 years ago

2.0.20

3 years ago

2.0.19

3 years ago

2.0.18

3 years ago

2.0.17

3 years ago

2.0.16

3 years ago

2.0.15

3 years ago

2.0.14

3 years ago

2.0.13

3 years ago

2.0.12

3 years ago

2.0.11

3 years ago

2.0.10

3 years ago

2.0.9

3 years ago

2.0.8

3 years ago

2.0.7

3 years ago

2.0.6

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

1.0.2

3 years ago

2.0.3

3 years ago

1.0.1

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.0.0

3 years ago

0.0.74

3 years ago

0.0.73

3 years ago

0.0.72

3 years ago

0.0.71

3 years ago

0.0.70

3 years ago

0.0.69

3 years ago

0.0.68

3 years ago

0.0.67

3 years ago

0.0.66

3 years ago

0.0.65

3 years ago

0.0.64

3 years ago

0.0.63

3 years ago

0.0.62

3 years ago

0.0.61

3 years ago

0.0.60

3 years ago

0.0.59

3 years ago

0.0.58

3 years ago

0.0.57

3 years ago

0.0.56

3 years ago

0.0.55

3 years ago

0.0.54

3 years ago

0.0.53

3 years ago

0.0.52

3 years ago

0.0.51

3 years ago

0.0.50

3 years ago

0.0.49

3 years ago

0.0.48

3 years ago

0.0.47

3 years ago

0.0.46

3 years ago

0.0.45

3 years ago

0.0.44

3 years ago

0.0.43

3 years ago

0.0.42

3 years ago

0.0.41

3 years ago

0.0.40

3 years ago

0.0.39

3 years ago

0.0.38

3 years ago

0.0.37

3 years ago

0.0.36

3 years ago

0.0.35

3 years ago

0.0.34

3 years ago

0.0.33

3 years ago

0.0.32

3 years ago

0.0.31

3 years ago

0.0.30

3 years ago

0.0.29

3 years ago

0.0.28

3 years ago

0.0.27

3 years ago

0.0.26

3 years ago

0.0.25

3 years ago

0.0.24

3 years ago

0.0.23

3 years ago

0.0.22

3 years ago

0.0.21

3 years ago

0.0.20

3 years ago

0.0.19

3 years ago

0.0.18

3 years ago

0.0.17

3 years ago

0.0.16

3 years ago

0.0.15

3 years ago

0.0.14

3 years ago

0.0.13

3 years ago

0.0.12

3 years ago

0.0.11

3 years ago

0.0.10

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago