From 3c7883749c7b1071c4c57cf360ab065027db0d35 Mon Sep 17 00:00:00 2001 From: Min Htet Oo Date: Tue, 13 Feb 2024 11:20:36 +0800 Subject: [PATCH] docs: rename PrivacyFilter to RedactableValues --- README.md | 1 + .../RedactableValues/RedactableValues.tsx | 59 ++++ src/core/RedactableValues/index.ts | 1 + .../TemplateBWithRedactableValues.stories.tsx | 20 ++ .../TemplateBWithRedactableValues.tsx | 276 ++++++++++++++++++ 5 files changed, 357 insertions(+) create mode 100644 src/core/RedactableValues/RedactableValues.tsx create mode 100644 src/core/RedactableValues/index.ts create mode 100644 src/templates/examples/TemplateB/TemplateBWithRedactableValues.stories.tsx create mode 100644 src/templates/examples/TemplateB/TemplateBWithRedactableValues.tsx diff --git a/README.md b/README.md index 5b57fde..b07d0e5 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,7 @@ Make sure to edit the following files according to your module's info: ### Development ```sh +npm i npm run storybook ``` diff --git a/src/core/RedactableValues/RedactableValues.tsx b/src/core/RedactableValues/RedactableValues.tsx new file mode 100644 index 0000000..f8d387d --- /dev/null +++ b/src/core/RedactableValues/RedactableValues.tsx @@ -0,0 +1,59 @@ +import { Button } from "@tradetrust-tt/tradetrust-ui-components"; +import React, { FunctionComponent } from "react"; +import patternWaves from "/static/images/pattern-waves.png"; + +interface SelectiveRedaction { + editable: boolean; + onToggleEditable: () => void; + options?: { + className?: string; + description?: string; + buttonText?: string; + }; +} + +export const SelectiveRedaction: FunctionComponent = ({ + editable, + onToggleEditable, + options, +}) => { + const defaultOptions = { + className: + "print:hidden bg-cover bg-cerulean-500 text-white rounded-lg p-4 mb-8", + description: `Remove sensitive information on this document by clicking on the edit button. Downloaded document remains valid.`, + buttonText: "Edit Document", + }; + const { className, description, buttonText } = options ?? defaultOptions; + + return ( +
+
+
+
+

+ The document allows fields to be selectively disclosed. +

+

{description}

+
+ +
+
+
+ ); +}; + +export const IconRedact: FunctionComponent = () => { + return ( + + [Remove] + + ); +}; diff --git a/src/core/RedactableValues/index.ts b/src/core/RedactableValues/index.ts new file mode 100644 index 0000000..e6cb17f --- /dev/null +++ b/src/core/RedactableValues/index.ts @@ -0,0 +1 @@ +export * from "./RedactableValues"; diff --git a/src/templates/examples/TemplateB/TemplateBWithRedactableValues.stories.tsx b/src/templates/examples/TemplateB/TemplateBWithRedactableValues.stories.tsx new file mode 100644 index 0000000..fe8201a --- /dev/null +++ b/src/templates/examples/TemplateB/TemplateBWithRedactableValues.stories.tsx @@ -0,0 +1,20 @@ +import React, { FunctionComponent } from "react"; +import { TemplateBWithRedactableValues } from "./TemplateBWithRedactableValues"; +import { TemplateBSampleV2 } from "./sampleV2"; + +export default { + title: "TemplateB", + component: TemplateBWithRedactableValues, + parameters: { + componentSubtitle: "Sample Template B", + }, +}; + +export const TemplateWithRedactableValues: FunctionComponent = () => { + return ( + {}} + /> + ); +}; diff --git a/src/templates/examples/TemplateB/TemplateBWithRedactableValues.tsx b/src/templates/examples/TemplateB/TemplateBWithRedactableValues.tsx new file mode 100644 index 0000000..0236cb9 --- /dev/null +++ b/src/templates/examples/TemplateB/TemplateBWithRedactableValues.tsx @@ -0,0 +1,276 @@ +import styled from "@emotion/styled"; +import { + RedactableValue, + TemplateProps, +} from "@tradetrust-tt/decentralized-renderer-react-components"; +import { format } from "date-fns"; +import React, { FunctionComponent, useState } from "react"; +import { DocumentQrCode } from "../../../core/DocumentQrCode"; +import { Wrapper } from "../../../core/Wrapper"; +import { IconRedact, RedactableValues } from "../../../core/RedactableValues"; +import { getDocumentData } from "../../../utils"; +import { TemplateB, TemplateBSchema } from "./types"; + +const CustomStyles = styled.div` + font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; + position: relative; + + h1 { + color: #4172af; + font-size: 40px; + font-weight: 700; + } + + h2 { + color: #4172af; + font-size: 28px; + font-weight: 700; + } + + .bg-blue { + background-color: #4172af; + color: #fff; + } + + th { + background-color: #4172af; + color: white; + } + + .table-responsive { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +`; + +export const TemplateBWithRedactableValues: FunctionComponent< + TemplateProps +> = ({ document, handleObfuscation }) => { + const [editable, setEditable] = useState(false); + const documentData = getDocumentData(document) as TemplateB; + const { + id, + date, + customerId, + terms, + billFrom, + billTo, + billableItems, + subtotal = 0, + tax = 0, + taxTotal = 0, + total = 0, + } = documentData; + const qrCodeUrl = documentData?.links?.self.href; + return ( + <> + + setEditable(!editable)} + /> + +
+
+

INVOICE

+
+
+

INVOICE #

+
+
+

DATE

+
+
+
+
+

{id}

+
+
+

{date && format(new Date(date), "d MMM yyyy")}

+
+
+
+
+

CUSTOMER ID

+
+
+

TERMS

+
+
+
+
+

{customerId}

+
+
{terms}
+
+
+
+
+

+ + handleObfuscation(`billFrom.name`) + } + iconRedact={} + /> +

+

+ + handleObfuscation(`billFrom.streetAddress`) + } + iconRedact={} + /> +

+

+ {billFrom?.city} + {billFrom?.postalCode && `, `} + + handleObfuscation(`billFrom.postalCode`) + } + iconRedact={} + /> +

+

+ + handleObfuscation(`billFrom.phoneNumber`) + } + iconRedact={} + /> +

+
+
+
+

BILL TO

+
+
+
+
+

+ + handleObfuscation(`billTo.name`) + } + iconRedact={} + /> +

+

+ + handleObfuscation(`billTo.company.name`) + } + iconRedact={} + /> +

+

+ + handleObfuscation(`billTo.company.streetAddress`) + } + iconRedact={} + /> +

+

+ {billTo.company.city} + {billTo.company.postalCode && `, `} + + handleObfuscation(`billTo.company.postalCode`) + } + iconRedact={} + /> +

+

+ + handleObfuscation(`billTo.company.phoneNumber`) + } + iconRedact={} + /> +

+

+ + handleObfuscation(`billTo.email`) + } + iconRedact={} + /> +

+
+
+
+
+
+
+ + + + + + + + + + + {billableItems?.map((item, index) => { + return ( + + + + + + + ); + })} + +
DESCRIPTIONQTYUNIT PRICEAMOUNT
{item.description} + {item.quantity} + + {item.unitPrice} + + {" "} + {item.amount} +
+
+
+
+

SUBTOTAL

+

TAX (${tax}%)

+
+

BALANCE DUE

+
+
+

{subtotal}

+

{taxTotal && taxTotal}

+
+

{total}

+
+
+ {qrCodeUrl && } + + + + ); +};