- 
-
- );
- };
diff --git a/src/components/SampleV2/TemplateA/index.tsx b/src/components/SampleV2/TemplateA/index.tsx
deleted file mode 100644
index cf830ef..0000000
--- a/src/components/SampleV2/TemplateA/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./TemplateA";
diff --git a/src/components/SampleV2/TemplateB/TemplateB.stories.tsx b/src/components/SampleV2/TemplateB/TemplateB.stories.tsx
deleted file mode 100644
index 9ae66e8..0000000
--- a/src/components/SampleV2/TemplateB/TemplateB.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { TemplateB } from "./TemplateB";
-import oaDocumentV2 from "../../../documents/samples/oa-v2-raw.json";
-
-export default {
- title: "SAMPLE_V2/TemplateB",
- component: TemplateB,
-} as ComponentMeta{recipient.name}
-{birthDate}
-
-
- );
-};
diff --git a/src/components/SampleV2/TemplateB/index.tsx b/src/components/SampleV2/TemplateB/index.tsx
deleted file mode 100644
index d55bf81..0000000
--- a/src/components/SampleV2/TemplateB/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./TemplateB";
diff --git a/src/components/SampleV3/TemplateC/TemplateC.stories.tsx b/src/components/SampleV3/TemplateC/TemplateC.stories.tsx
deleted file mode 100644
index a127fe4..0000000
--- a/src/components/SampleV3/TemplateC/TemplateC.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { TemplateC } from "./TemplateC";
-import oaDocumentV3 from "../../../documents/samples/oa-v3-raw.json";
-
-export default {
- title: "SAMPLE_V3/TemplateC",
- component: TemplateC,
-} as ComponentMeta{issuer}
-
-
-
- );
- };
diff --git a/src/components/SampleV3/TemplateC/index.tsx b/src/components/SampleV3/TemplateC/index.tsx
deleted file mode 100644
index ba4f245..0000000
--- a/src/components/SampleV3/TemplateC/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./TemplateC";
diff --git a/src/components/SampleV3/TemplateD/TemplateD.stories.tsx b/src/components/SampleV3/TemplateD/TemplateD.stories.tsx
deleted file mode 100644
index eb8054a..0000000
--- a/src/components/SampleV3/TemplateD/TemplateD.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { TemplateD } from "./TemplateD";
-import oaDocumentV3 from "../../../documents/samples/oa-v3-raw.json";
-
-export default {
- title: "SAMPLE_V3/TemplateD",
- component: TemplateD,
-} as ComponentMeta{name}
-{birthDate}
-
-
- );
-};
diff --git a/src/components/SampleV3/TemplateD/index.tsx b/src/components/SampleV3/TemplateD/index.tsx
deleted file mode 100644
index 45c83e7..0000000
--- a/src/components/SampleV3/TemplateD/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./TemplateD";
diff --git a/src/core/DocumentQrCode/DocumentQrCode.tsx b/src/core/DocumentQrCode/DocumentQrCode.tsx
new file mode 100644
index 0000000..514f1d6
--- /dev/null
+++ b/src/core/DocumentQrCode/DocumentQrCode.tsx
@@ -0,0 +1,47 @@
+import styled from "@emotion/styled";
+import QRCode, { ImageSettings } from "qrcode.react";
+import React, { FunctionComponent } from "react";
+import qrcodeImg from "/static/images/logo-qrcode.png";
+
+const Print = styled.div`
+ display: none;
+
+ @media print {
+ page-break-before: always;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid #000000;
+ padding: 32px;
+
+ .generated-text {
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ font-size: 0.8em;
+ color: grey;
+ }
+ }
+`;
+
+interface DocumentQrCode {
+ url: string;
+}
+
+export const DocumentQrCode: FunctionComponent{issuer}
-Scan the QR code with a QR code scanner device.
+ Automatically Generated
+
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
diff --git a/src/core/ErrorBoundary/index.ts b/src/core/ErrorBoundary/index.ts
new file mode 100644
index 0000000..a6ad481
--- /dev/null
+++ b/src/core/ErrorBoundary/index.ts
@@ -0,0 +1 @@
+export * from "./ErrorBoundary";
diff --git a/src/core/PrintWatermark/PrintWatermark.tsx b/src/core/PrintWatermark/PrintWatermark.tsx
new file mode 100644
index 0000000..326d4d8
--- /dev/null
+++ b/src/core/PrintWatermark/PrintWatermark.tsx
@@ -0,0 +1,32 @@
+/// + Template renderer encountered an error +
+
+ Message:{" "}
+ {this.state.error.message}
+
+
+ Stack: {this.state.error.stack}
+
+
+
+ );
+};
+
+export const IconRedact: FunctionComponent = () => {
+ return (
+
+ [Remove]
+
+ );
+};
diff --git a/src/core/SelectiveRedaction/index.ts b/src/core/SelectiveRedaction/index.ts
new file mode 100644
index 0000000..33d37fb
--- /dev/null
+++ b/src/core/SelectiveRedaction/index.ts
@@ -0,0 +1 @@
+export * from "./SelectiveRedaction";
diff --git a/src/core/Wrapper/Wrapper.tsx b/src/core/Wrapper/Wrapper.tsx
new file mode 100644
index 0000000..be23c0a
--- /dev/null
+++ b/src/core/Wrapper/Wrapper.tsx
@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from "react";
+import { ErrorBoundary } from "../ErrorBoundary";
+
+// `container mx-auto px-4` <- this is in line with tt and creator's tw config, so containers can align
+export const Wrapper: FunctionComponent = ({ children, ...props }) => {
+ return (
+
+
+
+
+
+
+
+ + The document allows fields to be selectively disclosed. +
+{description}
+
+ {children}
+
+
+
+
+
+
+ );
+};
+
+
+export const TemplateAWithQRCode: FunctionComponent| col1 | +col2 | +
|---|---|
| {document.data1} | +{document.data2} | +
{Content(documentData)}
+ {qrCodeUrl &&
+
+
+
+
+ );
+};
+
+export const TemplateAWithWaterMark: FunctionComponent| col1 | +col2 | +
|---|---|
| {document.data1} | +{document.data2} | +
{Content(documentData)}
+
+ );
+};
\ No newline at end of file
diff --git a/src/templates/examples/TemplateA/TemplateAWithWrapperAndErrorBoundry.tsx b/src/templates/examples/TemplateA/TemplateAWithWrapperAndErrorBoundry.tsx
new file mode 100644
index 0000000..4053426
--- /dev/null
+++ b/src/templates/examples/TemplateA/TemplateAWithWrapperAndErrorBoundry.tsx
@@ -0,0 +1,40 @@
+import { TemplateProps } from "@tradetrust-tt/decentralized-renderer-react-components";
+import React, { FunctionComponent } from "react";
+import { DocumentQrCode } from "../../../core/DocumentQrCode";
+import { Wrapper } from "../../../core/Wrapper";
+import { getDocumentData } from "../../../utils";
+import { TemplateADocument, TemplateASchema } from "./types";
+
+const Content = (document: TemplateADocument): JSX.Element => {
+ return (
+
+
+
+
+
+ );
+};
+
+export const TemplateAWithWrapperAndErrorBoundry: FunctionComponent<
+ TemplateProps| col1 | +col2 | +
|---|---|
| {document.data1} | +{document.data2} | +
{Content(documentData)}
+
+
+
+
+
+ INVOICE
+
+
+
+
+ INVOICE #
+
+
+ DATE
+
+
+
+
+ {id}
+
+
+ {date && format(new Date(date), "d MMM yyyy")}
+
+
+
+
+ CUSTOMER ID
+
+
+ TERMS
+
+
+
+
+ {customerId}
+{terms}
+
+
+
+
+
+
+
+
+ handleObfuscation(`billFrom.name`)
+ }
+ iconRedact={
+
+
+ {billFrom?.city}
+ {billFrom?.postalCode && `, `}
+
+
+
+
+
+ BILL TO
+
+
+
+
+
+
+
+
+ {billTo.company.city}
+ {billTo.company.postalCode && `, `}
+
+
+
+
+
+
+
+ | DESCRIPTION | +QTY | +UNIT PRICE | +AMOUNT | +
|---|---|---|---|
| {item.description} | ++ {item.quantity} + | ++ {item.unitPrice} + | ++ {" "} + {item.amount} + | +
+
+ {qrCodeUrl &&
+
+
+ SUBTOTAL
+TAX (${tax}%)
++
BALANCE DUE
+
+
+
+ {subtotal}
+{taxTotal && taxTotal}
++
{total}
+