index.tsx

import React, {useCallback, useEffect, useState} from 'react';
import {StackNavigationProp, StackScreenProps} from '@react-navigation/stack';
import {observer} from "mobx-react";
import {StyleSheet, View, Text, StatusBar} from 'react-native';
import { ColorPallet, TextTheme } from 'src/theme/theme';
import { NotificationStackParams, Screens } from 'src/type/navigators';
import CredentialOfferStore from "./CredentialOfferStore";
import {useTranslation} from "react-i18next";
import FlowDetailModal from "src/components/FlowDetailModal";
import {useNavigation} from "@react-navigation/core";
import CredentialPending from "./CredentialPending";
import {useConnectionById, useCredentialById} from "@aries-framework/react-hooks";
import {ConnectionRecord} from "@aries-framework/core/build/modules/connections/repository/ConnectionRecord";
import CredentialDeclined from "./CredentialDeclined";
import CredentialCard from "src/components/CredentialCard";
import Button, {ButtonType} from "src/components/Button";
import Record from "src/components/Record";
import Title from "src/components/Title";
import {CredentialState} from "@aries-framework/core";
import JsonLdCredentialViewer from "src/components/jsonld/JsonLdCredentialViewer";

type CredentialOfferProps = StackScreenProps<
  NotificationStackParams,
  Screens.CredentialOffer
>;

const CredentialOffer: React.FC<CredentialOfferProps> = observer(({
  route,
}) => {
  const { credentialId } = route.params;
  const { t } = useTranslation();
  const navigation = useNavigation<StackNavigationProp<NotificationStackParams>>();

  const [store] = useState(() => new CredentialOfferStore(credentialId, t));

  const credential = useCredentialById(credentialId);

  if (!credential) {
    throw new Error(t<string>('CredentialOffer.CredentialFetchError'));
  }
  let connection: ConnectionRecord | undefined = undefined;
  if (credential.connectionId) {
    connection = useConnectionById(credential.connectionId);
  }
  useEffect(() => {
    store.loadCredentialRecord();
  }, [credential]);

  useEffect(() => {
    if (
      credential.state === CredentialState.CredentialReceived ||
      credential.state === CredentialState.Done
    ) {
      store.successModalVisible = true;
    }
  }, [credential.state, store.pendingModalVisible]);

  useEffect(() => {
    if (credential.state === CredentialState.Declined) {
      store.declinedModalVisible = true;
    }
  }, [credential]);

  useEffect(() => {
    if (credential.state === CredentialState.Done) {
      store.saveCredentialInGenericRecords(credential, connection);
    }
  }, [credential.state, connection]);

  const redirectToHome = () => navigation.getParent()?.navigate(Screens.Credentials);
  const jsonLdData = store.credentialRecord?.offer?.jsonld as any || null;
  const jsonldCredential = jsonLdData?.credential;

  return (
    <>
      <StatusBar barStyle="light-content" />

      <Record
        header={() => (
          <>
            <View style={styles.headerTextContainer}>
              <Text style={styles.headerText}>
                <Title>
                  {connection?.theirLabel ||
                    t<string>('ContactDetails.AContact')}
                </Title>{' '}
                {t<string>('CredentialOffer.IsOfferingYouACredential')}
              </Text>
            </View>
            <View style={styles.credentialCardContainer}>
              {credential && (
                <CredentialCard credential={credential} />
              )}
            </View>
            {!!jsonldCredential && (
              <View style={styles.jsonldWrapper}>
                <JsonLdCredentialViewer jsonld={jsonldCredential} />
              </View>
            )}
          </>
        )}
        footer={() => (
          <View style={{ marginBottom: 30 }}>
            <View style={styles.footerButton}>
              <Button
                title={t<string>('Global.Accept')}
                onPress={store.acceptCredential}
                disabled={!store.buttonsVisible}
                buttonType={ButtonType.Primary}
              />
            </View>
            <View style={styles.footerButton}>
              <Button
                title={t<string>('Global.Decline')}
                onPress={store.declineCredential}
                disabled={!store.buttonsVisible}
                buttonType={ButtonType.Ghost}
              />
            </View>
          </View>
        )}
        attributes={store.credentialRecord?.offerAttributes || []}
      />

      <FlowDetailModal
        title={
          !store.successModalVisible
            ? t<string>('CredentialOffer.CredentialOnTheWay')
            : t<string>('CredentialOffer.CredentialAddedToYourWallet')
        }
        doneTitle={
          store.successModalVisible
            ? t<string>('Global.Done')
            : t<string>('Global.Cancel')
        }
        visible={store.pendingModalVisible}
        onDone={() => {
          store.pendingModalVisible = false;

          if (store.successModalVisible) {
            store.successModalVisible = false;
            navigation.pop();

            navigation.getParent()?.navigate(Screens.CredentialDetails, {
              credentialId: credential.id,
            })
          }
        }}
        onCloseClicked={redirectToHome}
      >
        <CredentialPending finished={store.successModalVisible} />
      </FlowDetailModal>
      <FlowDetailModal
        title={t<string>('CredentialOffer.CredentialDeclined')}
        visible={store.declinedModalVisible}
        onDone={() => {
          store.declinedModalVisible = false;
          navigation.pop();
          redirectToHome();
        }}
        onCloseClicked={redirectToHome}
      >
        <CredentialDeclined />
      </FlowDetailModal>
    </>
  );
});

export default CredentialOffer;

const styles = StyleSheet.create({
  container: {
    backgroundColor: ColorPallet.grayscale.white,
    margin: 20,
  },
  credentialCardContainer: {
    paddingHorizontal: 15,
    paddingBottom: 16,
  },
  headerTextContainer: {
    paddingHorizontal: 25,
    paddingVertical: 16,
    backgroundColor: ColorPallet.grayscale.white,
  },
  headerText: {
    backgroundColor: ColorPallet.grayscale.white,
    ...TextTheme.normal,
    flexShrink: 1,
  },
  footerButton: {
    paddingTop: 10,
    backgroundColor: ColorPallet.grayscale.white,
  },
  jsonldWrapper: {
    paddingHorizontal: 16,
  }
});