Merge pull request #7 from Blackoutseeker/dev

Implement account deletion request page for users

.github/workflows/eslint.yml

@@ -16,7 +16,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [16.x]
+        node: [20.x]
 
     steps:
       - name: Checkout

.github/workflows/jest.yml

@@ -16,7 +16,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [16.x]
+        node: [20.x]
 
     steps:
       - name: Checkout

.github/workflows/prettier.yml

@@ -16,7 +16,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [16.x]
+        node: [20.x]
 
     steps:
       - name: Checkout

next.config.js

@@ -2,10 +2,18 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: ['play-lh.googleusercontent.com', 'play.google.com']
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'play-lh.googleusercontent.com'
+      },
+      {
+        protocol: 'https',
+        hostname: 'play.google.com'
+      }
+    ]
   },
   i18n: {
-    localeDetection: true,
     defaultLocale: 'en-US',
     locales: ['en-US', 'pt-BR']
   },

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "turbo": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -15,12 +16,12 @@
     "prettier:format": "prettier --write \"**/*.{js,jsx,ts,tsx,css}\""
   },
   "dependencies": {
-    "next": "^12.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^4.4.0",
+    "next": "^14.2.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-outside-click-handler": "^1.3.0",
-    "sharp": "^0.30.7",
+    "sharp": "^0.33.4",
     "sitemap": "^7.1.1"
   },
   "devDependencies": {
@@ -29,25 +30,26 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@types/react-outside-click-handler": "^1.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.21.0",
-    "@typescript-eslint/parser": "^5.21.0",
-    "autoprefixer": "^10.4.8",
-    "eslint": "^8.21.0",
-    "eslint-config-next": "^12.2.5",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-import": "^2.26.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8",
+    "eslint-config-next": "^14.2.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^26.8.2",
-    "eslint-plugin-n": "^15.2.4",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-n": "^17.8.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "^6.2.0",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^28.1.3",
-    "postcss": "^8.4.16",
-    "prettier": "^2.6.2",
-    "tailwindcss": "^3.1.8",
+    "postcss": "^8.4.38",
+    "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.4",
+    "tailwindcss": "^3.4.4",
     "ts-node": "^10.9.1",
-    "typescript": "^4.7.4"
+    "typescript": "^5.4.5"
   }
 }

prettier.config.js

@@ -1,7 +1,9 @@
+/** @type {import('prettier').Config} */
 module.exports = {
   semi: false,
   singleQuote: true,
   arrowParens: 'avoid',
   trailingComma: 'none',
-  endOfLine: 'auto'
+  endOfLine: 'auto',
+  plugins: ['prettier-plugin-tailwindcss']
 }

public/robots.txt

@@ -2,5 +2,6 @@ User-agent: *
 Allow: /
 Disallow: /404
 Disallow: /500
+Disallow: /*delete-account
 
 Sitemap: https://felips-apps.vercel.app/api/sitemap

src/components/404/Message404/Message404.module.css

@@ -1,7 +1,7 @@
 .messageWrapper {
-  @apply flex justify-center items-center w-full h-screen;
+  @apply flex h-screen w-full items-center justify-center;
 }
 
 .messageText {
-  @apply text-white font-bold text-center text-3xl mx-5;
+  @apply mx-5 text-center text-3xl font-bold text-white;
 }

src/components/App/Banner/Banner.module.css

@@ -1,31 +1,31 @@
 .bannerContainer {
-  @apply flex flex-wrap justify-center items-center w-full;
+  @apply flex w-full flex-wrap items-center justify-center;
 }
 
 .logoContainer {
   @apply flex flex-grow items-center;
 }
 
 .iconContainer {
-  @apply relative min-w-[100px] min-h-[100px] md:w-[150px] md:h-[150px];
+  @apply relative min-h-[100px] min-w-[100px] md:h-[150px] md:w-[150px];
 }
 
 .appNameText {
-  @apply text-white font-bold text-2xl ml-10 md:text-3xl md:mx-10;
+  @apply ml-10 text-2xl font-bold text-white md:mx-10 md:text-3xl;
 }
 
 .developmentContainer {
-  @apply flex flex-col justify-center h-[150px] space-y-[15px];
+  @apply flex h-[150px] flex-col justify-center space-y-[15px];
 }
 
 .developmentText {
-  @apply text-white font-bold text-xl;
+  @apply text-xl font-bold text-white;
 }
 
 .developmentLogo {
   @apply flex items-center space-x-[15px];
 }
 
 .frameworkText {
-  @apply text-white font-bold text-lg;
+  @apply text-lg font-bold text-white;
 }

src/components/App/Banner/index.tsx

@@ -34,8 +34,8 @@ export const Banner: FC<BannerProps> = ({
         <div className={Styles.iconContainer}>
           <Image
             src={appIcon}
-            layout="fill"
-            objectFit="contain"
+            width={150}
+            height={150}
             alt={appName}
             quality={90}
           />

src/components/App/PhoneView/PhoneView.module.css

@@ -1,8 +1,8 @@
 .phoneViewContainer {
-  @apply relative flex justify-center min-w-[260px] bg-black border-secondary border-[1px] px-[20px];
-  @apply pt-[40px] pb-[60px] rounded-3xl;
+  @apply relative flex min-w-[260px] justify-center border-[1px] border-secondary bg-black px-[20px];
+  @apply rounded-3xl pb-[60px] pt-[40px];
 }
 
 .phoneButton {
-  @apply absolute bottom-5 w-16 h-6 border-secondary border-[1px] rounded-full;
+  @apply absolute bottom-5 h-6 w-16 rounded-full border-[1px] border-secondary;
 }

src/components/App/Screenshot/Screenshot.module.css

@@ -1,12 +1,12 @@
 .screenshotContainer {
-  @apply flex flex-col items-center my-5 md:flex-row md:space-x-10;
+  @apply my-5 flex flex-col items-center md:flex-row md:space-x-10;
 }
 
 .screenshotReverseContainer {
-  @apply flex flex-col justify-end items-center my-5;
-  @apply md:flex-row-reverse md:space-x-reverse md:space-x-10;
+  @apply my-5 flex flex-col items-center justify-end;
+  @apply md:flex-row-reverse md:space-x-10 md:space-x-reverse;
 }
 
 .screenshotText {
-  @apply text-white text-xl text-justify w-full mb-10;
+  @apply mb-10 w-full text-justify text-xl text-white;
 }

src/components/App/Section/Section.module.css

@@ -1,19 +1,19 @@
 .sectionContainer {
-  @apply flex flex-col my-5;
+  @apply my-5 flex flex-col;
 }
 
 .title {
-  @apply text-white font-bold text-3xl my-5;
+  @apply my-5 text-3xl font-bold text-white;
 }
 
 .bodyText {
-  @apply text-white text-2xl text-justify;
+  @apply text-justify text-2xl text-white;
 }
 
 .motivationText {
-  @apply text-white text-2xl text-justify italic;
+  @apply text-justify text-2xl italic text-white;
 }
 
 .quote {
-  @apply text-white font-bold text-[40px] text-justify;
+  @apply text-justify text-[40px] font-bold text-white;
 }

src/components/App/SectionFooter/SectionFooter.module.css

@@ -1,5 +1,5 @@
 .footerContainer {
-  @apply flex justify-center items-center flex-wrap mt-5 md:justify-end;
+  @apply mt-5 flex flex-wrap items-center justify-center md:justify-end;
 }
 
 .storeButton {

src/components/DeleteAccount/DeleteAccountForm/DeleteAccountForm.module.css

@@ -0,0 +1,41 @@
+.formWrapper {
+  @apply flex h-full w-full items-center justify-center text-white;
+}
+
+.formContainer {
+  @apply flex max-w-[350px] flex-1 flex-col items-center justify-center space-y-5;
+}
+
+.appHeader {
+  @apply mb-5 flex w-full items-center space-x-5;
+}
+
+.appHeaderTextWrapper {
+  @apply flex flex-col space-y-5 font-bold;
+}
+
+.appTitle {
+  @apply text-xl font-bold;
+}
+
+.appSubtitle {
+  @apply text-base;
+}
+
+.dataList {
+  @apply list-disc px-5 text-base;
+}
+
+.formInput {
+  @apply w-full rounded-[4px] border-[1px] border-secondary bg-transparent;
+  @apply resize-none p-[14px] text-base text-white placeholder:text-secondary;
+}
+
+.counter {
+  @apply w-full text-right text-sm text-secondary;
+}
+
+.submitButton {
+  @apply w-full rounded-[4px] px-5 py-[14px] font-bold disabled:cursor-default disabled:bg-primary;
+  @apply cursor-pointer bg-white text-base text-background disabled:text-secondary;
+}

src/components/DeleteAccount/DeleteAccountForm/index.tsx

@@ -0,0 +1,73 @@
+import type { FC, FormEvent } from 'react'
+import type { App } from '@models/app'
+import { useState } from 'react'
+import { formatEmailPlaceholder } from '@utils/format'
+import Image from 'next/image'
+import Styles from './DeleteAccountForm.module.css'
+
+interface DeleteAccountFormProps {
+  app: App
+  locale: string | undefined
+}
+
+export const DeleteAccountForm: FC<DeleteAccountFormProps> = ({ app }) => {
+  const [email, setEmail] = useState<string>('')
+  const [message, setMessage] = useState<string>('')
+
+  const emailPlaceholder = formatEmailPlaceholder(
+    app.delete?.emailPlaceholder ?? ''
+  )
+
+  const disabled = email.length <= 0
+
+  const onSubmit = (event: FormEvent) => {
+    event.preventDefault()
+  }
+
+  const renderDataList = app.delete?.dataList.map(data => (
+    <li key={data}>{data}</li>
+  ))
+
+  return (
+    <div className={Styles.formWrapper}>
+      <form className={Styles.formContainer} onSubmit={onSubmit}>
+        <div className={Styles.appHeader}>
+          <Image src={app.icon} width={100} height={100} alt={app.name} />
+          <div className={Styles.appHeaderTextWrapper}>
+            <h1 className={Styles.appTitle}>{app.name}</h1>
+            <h2 className={Styles.appSubtitle}>{app.delete?.author}</h2>
+          </div>
+        </div>
+        <h2 className={Styles.appTitle}>{app.delete?.title}</h2>
+        <input
+          className={Styles.formInput}
+          required
+          type="email"
+          placeholder={emailPlaceholder}
+          value={email}
+          onChange={({ currentTarget }) => {
+            setEmail(currentTarget.value)
+          }}
+        />
+        <textarea
+          className={Styles.formInput}
+          maxLength={150}
+          placeholder={app.delete?.messagePlaceholder}
+          value={message}
+          onChange={({ currentTarget }) => {
+            setMessage(currentTarget.value)
+          }}
+        />
+        <span className={Styles.counter}>{message.length}/150</span>
+        <h2 className={Styles.appTitle}>{app.delete?.listTitle}</h2>
+        <ul className={Styles.dataList}>{renderDataList}</ul>
+        <input
+          className={Styles.submitButton}
+          type="submit"
+          value={app.delete?.submitButtonTitle}
+          disabled={disabled}
+        />
+      </form>
+    </div>
+  )
+}