All files / src/components/views/Credentials/IssueVc IssueVcFlow.tsx

0% Statements 0/15
0% Branches 0/16
0% Functions 0/3
0% Lines 0/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86                                                                                                                                                                           
import React, { useState } from "react";
import { Button, Text } from "rimble-ui";
import { ModalContent, ModalHeader } from "../../../elements/Modals";
import { SchemaDataResponse } from "../../Schemas";
import { SchemasTable } from "../../Schemas/SchemasTable";
import { IssueVcForm } from "./IssueVcForm";
import { Identifier } from "../../../../types";
import { hexEllipsis } from "../../../../utils";
 
export interface IssueVcProps {
  identifiers: Identifier[];
  subjectIdentifier?: Identifier;
  onComplete(): void;
}
 
export const IssueVcFlow: React.FunctionComponent<IssueVcProps> = (props) => {
  const [schema, setSchema] = useState<SchemaDataResponse | null | undefined>();
 
  function goBack() {
    setSchema(undefined);
  }
 
  if (typeof schema === "undefined") {
    let subjectName = "";
    if (props.subjectIdentifier) {
      const identifier = props.subjectIdentifier;
      if (identifier.alias && identifier.userName) {
        subjectName = `${identifier.alias} (${identifier.userName} - ${hexEllipsis(identifier.did)})`;
      } else if (identifier.alias || identifier.userName) {
        subjectName = `${identifier.alias || identifier.userName} (${hexEllipsis(identifier.did)})`;
      } else {
        subjectName = identifier.did;
      }
    }
    return (
      <>
        <ModalHeader>Issue Credential</ModalHeader>
        <ModalContent width={11}>
          {subjectName && (
            <Text>
              Issuing credential about <b title={props.subjectIdentifier?.did}>{subjectName}</b>.
            </Text>
          )}
          <Text>
            Please select a credential schema, or{" "}
            <Button.Text p={0} onClick={() => setSchema(null)}>
              enter credential as JSON
            </Button.Text>
            .
          </Text>
 
          <SchemasTable discover={true} onSchemaSelect={setSchema} hideIssueVcInDetail />
          {/* we'll use something like these tabs again when we have e.g. MRU schemas from agent
          <Tabs
            activeTabName={schemaTab}
            tabs={[
              {
                tabName: "created",
                title: "Created",
                content: <SchemasTable discover={false} onSchemaSelect={setSchema} hideIssueVcInDetail />,
              },
              {
                tabName: "discover",
                title: "Discover",
                content: <SchemasTable discover={true} onSchemaSelect={setSchema} hideIssueVcInDetail />,
              },
            ]}
            onTabClicked={setSchemaTab}
          />
          */}
        </ModalContent>
      </>
    );
  }
 
  return (
    <IssueVcForm
      identifiers={props.identifiers}
      subjectIdentifier={props.subjectIdentifier}
      schema={schema}
      onComplete={props.onComplete}
      goBack={goBack}
    />
  );
};