feat: commercial disclosure page (#503)

* feat: creating commercial disclosure * chore: changing some wording
wasedatime · Nov 20, 2023 · 9cd40d4 · 9cd40d4
1 parent ff3c688
commit 9cd40d4
Show file tree

Hide file tree

Showing 5 changed files with 193 additions and 1 deletion.
diff --git a/apps/root/src/App.tsx b/apps/root/src/App.tsx
@@ -14,6 +14,8 @@ import ErrorFallback from "@app/components/ErrorFallback"
 import PrivacyPolicy from "@app/components/PrivacyPolicy"
 import TermsOfService from "@app/components/TermsOfService"
 import RedirectPage from "@app/components/user/RedirectPage"
+import CommercialDisclosure from "@app/components/CommercialDisclosure"
+
 import {
   gaUserSignIn,
   gaUserSignInFailure,
@@ -75,6 +77,7 @@ const AppRoutes = () => {
     <Routes>
       <Route element={<TermsOfService />} path="/terms-of-service" />
       <Route element={<PrivacyPolicy />} path="/privacy-policy" />
+      <Route element={<CommercialDisclosure />} path="/commercial-disclosure" />
       <Route element={<AboutUs />} path="/aboutus" />
       <Route element={<RedirectPage />} path="/verify" />
       <Route element={<Feeds />} path="/feeds" />

diff --git a/apps/root/src/components/CommercialDisclosure.tsx b/apps/root/src/components/CommercialDisclosure.tsx
@@ -0,0 +1,180 @@
+/* eslint-disable no-nested-ternary */
+import React from "react"
+
+interface StyledTextProps {
+  children: any
+  centered?: boolean
+  headerType?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+  id?: string
+}
+
+export const StyledHeader = ({
+  children,
+  centered,
+  headerType,
+  id,
+}: StyledTextProps) =>
+  headerType === "h1" ? (
+    <h1
+      id={id}
+      className={`text-light-text1 dark:text-dark-text1 ${
+        centered && "my-4 text-center"
+      }`}
+    >
+      {children}
+    </h1>
+  ) : headerType === "h2" ? (
+    <h2
+      id={id}
+      className={`text-light-text1 dark:text-dark-text1 ${
+        centered && "my-4 text-center"
+      }`}
+    >
+      {children}
+    </h2>
+  ) : headerType === "h3" ? (
+    <h3
+      id={id}
+      className={`text-light-text1 dark:text-dark-text1 ${
+        centered && "my-4 text-center"
+      }`}
+    >
+      {children}
+    </h3>
+  ) : headerType === "h4" ? (
+    <h4
+      id={id}
+      className={`text-light-text1 dark:text-dark-text1 ${
+        centered && "my-4 text-center"
+      }`}
+    >
+      {children}
+    </h4>
+  ) : headerType === "h5" ? (
+    <h5
+      id={id}
+      className={`text-light-text1 dark:text-dark-text1 ${
+        centered && "my-4 text-center"
+      }`}
+    >
+      {children}
+    </h5>
+  ) : (
+    <h6
+      id={id}
+      className={`text-light-text1 dark:text-dark-text1 ${
+        centered && "my-4 text-center"
+      }`}
+    >
+      {children}
+    </h6>
+  )
+
+export const StyledParagraph = ({
+  children,
+  centered,
+  id,
+}: StyledTextProps) => (
+  <p
+    id={id}
+    className={`text-light-text2 dark:text-dark-text2 ${
+      centered && "my-4 text-center"
+    }`}
+  >
+    {children}
+  </p>
+)
+
+export const StyledBold = ({ children, centered, id }: StyledTextProps) => (
+  <b
+    id={id}
+    className={`text-light-text1 dark:text-dark-text1 ${
+      centered && "my-4 text-center"
+    }`}
+  >
+    {children}
+  </b>
+)
+
+const CommercialDisclosure = () => (
+  <div className="bg-light-bgMain p-6 dark:bg-dark-bgMain md:py-24 md:px-60">
+    <StyledHeader headerType="h1" centered>
+      Commercial Disclosure
+    </StyledHeader>
+    <StyledParagraph centered>Last updated November 20, 2023</StyledParagraph>
+    <StyledHeader headerType="h3" centered>
+      Legal Name
+    </StyledHeader>
+    <StyledParagraph centered>PARK JOON BIN</StyledParagraph>
+    <StyledHeader headerType="h3" centered>
+      Address
+    </StyledHeader>
+    <StyledParagraph centered>
+      We will disclose without deplay if requested
+    </StyledParagraph>
+    <StyledHeader headerType="h3" centered>
+      Phone Number
+    </StyledHeader>
+    <StyledParagraph centered>
+      We will disclose without deplay if requested
+    </StyledParagraph>
+    <StyledHeader headerType="h3" centered>
+      Contact Email
+    </StyledHeader>
+    <StyledParagraph centered>
+      We will disclose without deplay if requested
+    </StyledParagraph>
+    <StyledHeader headerType="h3" centered>
+      Contact Email
+    </StyledHeader>
+    <StyledParagraph centered>[email protected]</StyledParagraph>
+    <StyledHeader headerType="h3" centered>
+      Head of Operations
+    </StyledHeader>
+    <StyledParagraph centered>PARK JOON BIN</StyledParagraph>
+    <StyledHeader headerType="h3" centered>
+      Additional Fees
+    </StyledHeader>
+    <StyledParagraph centered>None</StyledParagraph>
+    <StyledHeader headerType="h3" centered>
+      Exchanges & Returns Policy
+    </StyledHeader>
+    <StyledParagraph centered>
+      <ul className="text-light-text2 dark:text-dark-text2">
+        <li>
+          <i>Events before Date.</i> You can cancel your order by pressing the
+          cancel button on the luma website. Or contact us at
+          [email protected]
+        </li>
+        <li>
+          <i>Events after date.</i> You will not be able to return or exchange
+          after the event date.
+        </li>
+      </ul>
+    </StyledParagraph>
+    <StyledHeader headerType="h3" centered>
+      Delivery times
+    </StyledHeader>
+    <StyledParagraph centered>
+      Orders will be processed instantly through lu.ma website
+    </StyledParagraph>
+    <StyledHeader headerType="h3" centered>
+      Accepted Payment Methods
+    </StyledHeader>
+    <StyledParagraph centered>Credit cards</StyledParagraph>
+    <StyledHeader headerType="h3" centered>
+      Payment period
+    </StyledHeader>
+    <StyledParagraph centered>
+      Credit card payments are processed immediately
+    </StyledParagraph>
+    <StyledHeader headerType="h3" centered>
+      Price
+    </StyledHeader>
+    <StyledParagraph centered>
+      Price listed on each event page in luma.
+    </StyledParagraph>
+  </div>
+)
+
+export default CommercialDisclosure
diff --git a/apps/root/src/components/frame/OtherLinks.tsx b/apps/root/src/components/frame/OtherLinks.tsx
@@ -18,7 +18,7 @@ type LinksWrapperProps = {
 
 const LinksWrapper = styled.div<LinksWrapperProps>`
   ${(props) => (props.expanded ? "width: 210px;" : "width: 100%;")}
-  height: 120px;
+  height: 135px;
   overflow-x: hidden;
   padding: 0px;
   margin-bottom: 0.1vh;
@@ -85,6 +85,13 @@ const OtherLinks = ({ expanded, setCurrentPath }: Props) => {
         {t("user.Privacy Policy")}
       </LinkOutsideRouter>
       <br />
+      <LinkOutsideRouter
+        to="/commercial-disclosure"
+        customOnClick={() => setCurrentPath("/commercial-disclosure")}
+      >
+        {t("Commercial Disclosure")}
+      </LinkOutsideRouter>
+      <br />
       <a
         href="https://github.com/wasedatime/wasedatime-web/blob/master/LICENSE.md"
         target="_blank"

diff --git a/packages/ui/src/constants/locales/en.json b/packages/ui/src/constants/locales/en.json
@@ -341,6 +341,7 @@
     "agreement on privacy policy 2": " and ",
     "agreement on privacy policy 3": ".",
     "Privacy Policy": "Privacy Policy",
+    "Commercial Disclosure": "Commercial Disclosure",
     "Terms of Service": "Terms of Service",
     "Keep using without sign in": "Keep using without sign in"
   }

diff --git a/packages/ui/src/constants/locales/ja.json b/packages/ui/src/constants/locales/ja.json
@@ -342,6 +342,7 @@
     "agreement on privacy policy 2": "及び",
     "agreement on privacy policy 3": "に同意したものとみなします。",
     "Privacy Policy": "プライバシーポリシー",
+    "Commercial Disclosure": "特定商取引法に基づく表記",
     "Terms of Service": "利用規約",
     "Keep using without sign in": "ログインせずに使用し続ける"
   }