issue-54/feat: clients can set name in order message (#55)

4lysson-a · Sep 8, 2024 · ade1d30 · ade1d30
2 parents 8cf0dbe + c9e3b09
commit ade1d30
Show file tree

Hide file tree

Showing 29 changed files with 311 additions and 161 deletions.
diff --git a/README-ptbr.md b/README-ptbr.md
@@ -0,0 +1,21 @@
+# Visualiza ai - Seu cardápio digital descomplicado!
+
+![ping-pong-2](https://github.com/4lysson-a/visualizaai/assets/26152669/8a613c9f-5fec-44db-82d4-241e5160125e)
+
+O Visualizaai é um web app intuitivo que permite aos usuários cadastrarem seus produtos de maneira fácil, criando um cardápio digital acessível para todos, podendo gerar seu próprio QR Code customizado, ou seu próprio link personalizado.
+
+🤩 Features principais
+
+- 🧐 Cadastro de Produtos: Adicione e gerencie seus produtos com facilidade, criando um cardápio digital atraente e organizado.
+
+- 👨‍💻 Integração com Stripe: Facilite os pagamentos através da integração com o Stripe, garantindo transações seguras e rápidas.
+
+- 🧠 Backend em Cloud Code: Utiliza Parse e Back4App para oferecer um backend robusto e escalável, garantindo alta performance e segurança.
+
+---
+
+![image](https://github.com/4lysson-a/visualizaai/assets/26152669/3611fbd9-1bc1-4059-aca1-1b867797a89c)
+
+![image](https://github.com/4lysson-a/visualizaai/assets/26152669/5bc1fa52-d6c3-4400-b81e-4c2d05296840)
+
+![image](https://github.com/4lysson-a/visualizaai/assets/26152669/b17657c9-02b7-461a-8d4a-50ebaa73259d)
diff --git a/README.md b/README.md
@@ -1,20 +1,21 @@
-# Visualiza ai - Seu cardápio digital descomplicado!
+# Visualizaai - The digital companion for your small business.
 
 ![ping-pong-2](https://github.com/4lysson-a/visualizaai/assets/26152669/8a613c9f-5fec-44db-82d4-241e5160125e)
 
-O Visualizaai é um web app intuitivo que permite aos usuários cadastrarem seus produtos de maneira fácil, criando um cardápio digital acessível para todos, podendo gerar seu próprio QR Code customizado, ou seu próprio link personalizado.
+Visualizaai is an intuitive web app that allows users to easily register their products, creating a digital menu accessible to everyone. You can generate your own customized QR code or personalized link.
 
-🤩 Features principais
-- 🧐 Cadastro de Produtos: Adicione e gerencie seus produtos com facilidade, criando um cardápio digital atraente e organizado.
+🤩 Key Features
 
-- 👨‍💻 Integração com Stripe: Facilite os pagamentos através da integração com o Stripe, garantindo transações seguras e rápidas.
+- 🧐 Product Registration: Add and manage your products with ease, creating an attractive and organized digital menu.
 
-- 🧠 Backend em Cloud Code: Utiliza Parse e Back4App para oferecer um backend robusto e escalável, garantindo alta performance e segurança.
+- 👨‍💻 Stripe Integration: Facilitate payments through integration with Stripe, ensuring secure and fast transactions.
 
-----
+- 🧠 Backend on Cloud Code: Uses Parse and Back4App to provide a robust and scalable backend, ensuring high performance and security.
 
-![image](https://github.com/4lysson-a/visualizaai/assets/26152669/3611fbd9-1bc1-4059-aca1-1b867797a89c)
+---
 
-![image](https://github.com/4lysson-a/visualizaai/assets/26152669/5bc1fa52-d6c3-4400-b81e-4c2d05296840)
+![image](https://github.com/user-attachments/assets/97e60df2-1ff6-4b48-9543-466466a3f08c)
 
-![image](https://github.com/4lysson-a/visualizaai/assets/26152669/b17657c9-02b7-461a-8d4a-50ebaa73259d)
+![image](https://github.com/user-attachments/assets/9d3874c1-eaad-45ba-a5b9-d7879558cfbc)
+
+![image](https://github.com/user-attachments/assets/ce3103bd-ff88-49f0-a224-3498fe005d1b)
diff --git a/frontend/bun.lockb b/frontend/bun.lockb
diff --git a/frontend/package.json b/frontend/package.json
@@ -19,8 +19,10 @@
         "clsx": "^2.0.0",
         "html2canvas": "^1.4.1",
         "jspdf": "^2.5.1",
+        "lodash": "^4.17.21",
         "lottie-react": "^2.4.0",
         "parse": "^4.3.1",
+        "posthog-js": "^1.160.0",
         "qr-code-styling": "^1.6.0-rc.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

diff --git a/frontend/src/App.bundle.jsx b/frontend/src/App.bundle.jsx
@@ -9,11 +9,14 @@ import { ToastContainer } from "react-toastify";
 import useChangeTheme from "./hooks/useChangeTheme";
 import LogoLoading from "./components/shared/Loading/Logo";
 import useValidateNewVersion from "./hooks/useValidateNewVersion";
+import posthog from "posthog-js";
 
 function App() {
     useValidateNewVersion();
     useChangeTheme();
 
+    posthog.capture("$pageview");
+
     return (
         <>
             <LogoLoading />

diff --git a/frontend/src/assets/svg/arrow.svg b/frontend/src/assets/svg/arrow.svg
diff --git a/frontend/src/assets/svg/send.svg b/frontend/src/assets/svg/send.svg
diff --git a/frontend/src/assets/svgComponents/Arrow.jsx b/frontend/src/assets/svgComponents/Arrow.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function ArrowSVG({ ...rest }) {
+    return (
+        <svg {...rest} width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M0.931053 5.84313L5.61605 1.23213C5.71827 1.13101 5.85626 1.07428 6.00005 1.07428C6.14384 1.07428 6.28183 1.13101 6.38405 1.23213L11.0691 5.84213C11.1719 5.94321 11.3103 5.99985 11.4546 5.99985C11.5988 5.99985 11.7372 5.94321 11.8401 5.84213C11.8907 5.79276 11.931 5.73374 11.9584 5.66856C11.9859 5.60339 12.0001 5.53337 12.0001 5.46263C12.0001 5.3919 11.9859 5.32188 11.9584 5.2567C11.931 5.19153 11.8907 5.13251 11.8401 5.08313L7.15605 0.473134C6.84753 0.170208 6.43243 0.000488281 6.00005 0.000488281C5.56768 0.000488281 5.15257 0.170208 4.84405 0.473134L0.160053 5.08313C0.109251 5.13253 0.0688686 5.1916 0.0412939 5.25687C0.0137191 5.32214 -0.000488281 5.39228 -0.000488281 5.46313C-0.000488281 5.53399 0.0137191 5.60412 0.0412939 5.66939C0.0688686 5.73466 0.109251 5.79374 0.160053 5.84313C0.262908 5.94421 0.401346 6.00085 0.545553 6.00085C0.689759 6.00085 0.828197 5.94421 0.931053 5.84313Z"
+                fill="black"
+            />
+        </svg>
+    );
+}
diff --git a/frontend/src/assets/svgComponents/Send.jsx b/frontend/src/assets/svgComponents/Send.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+export default function SentSVG({ ...rest }) {
+    return (
+        <svg
+            {...rest}
+            fill="#000000"
+            height="800px"
+            width="800px"
+            version="1.1"
+            id="Layer_1"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 512.001 512.001"
+        >
+            <g>
+                <g>
+                    <path
+                        d="M483.927,212.664L66.967,25.834C30.95,9.695-7.905,42.023,1.398,80.368l21.593,89.001
+			c3.063,12.622,11.283,23.562,22.554,30.014l83.685,47.915c6.723,3.85,6.738,13.546,0,17.405l-83.684,47.915
+			c-11.271,6.452-19.491,17.393-22.554,30.015l-21.594,89c-9.283,38.257,29.506,70.691,65.569,54.534l416.961-186.83
+			C521.383,282.554,521.333,229.424,483.927,212.664z M359.268,273.093l-147.519,66.1c-9.44,4.228-20.521,0.009-24.752-9.435
+			c-4.231-9.44-0.006-20.523,9.434-24.752l109.37-49.006l-109.37-49.006c-9.44-4.231-13.665-15.313-9.434-24.752
+			c4.229-9.44,15.309-13.666,24.752-9.435l147.519,66.101C373.996,245.505,374.007,266.49,359.268,273.093z"
+                    />
+                </g>
+            </g>
+        </svg>
+    );
+}
diff --git a/...ents/layout/(general)/AnimateProvider.jsx → ...nents/layout/(public)/AnimateProvider.jsx b/...ents/layout/(general)/AnimateProvider.jsx → ...nents/layout/(public)/AnimateProvider.jsx
diff --git a/...components/shared/ErrorBoundary/index.jsx → ...s/layout/(public)/ErrorBoundary/index.jsx b/...components/shared/ErrorBoundary/index.jsx → ...s/layout/(public)/ErrorBoundary/index.jsx
@@ -43,12 +43,10 @@ class ErrorBoundary extends Component {
     }
 
     static getDerivedStateFromError() {
-        // Atualiza o estado para que a próxima renderização mostre a UI alternativa
         return { hasError: true };
     }
 
     componentDidCatch(error, errorInfo) {
-        // Você também pode registrar o erro em um serviço de relatórios de erros
         console.error("ErrorBoundary caught an error", error, errorInfo);
     }
 

diff --git a/frontend/src/components/layout/index.js b/frontend/src/components/layout/index.js
@@ -1,4 +1,5 @@
-export { default as DashProvider } from './(private)/DashProvider';
-export { default as CompanyProvider } from './(private)/CompanyProvider';
-
-export { default as ValidateCompanyID } from './(public)/ValidateCompanyId';
+export { default as DashProvider } from "./(private)/DashProvider";
+export { default as CompanyProvider } from "./(private)/CompanyProvider";
+export { default as AnimateProvider } from "./(public)/AnimateProvider";
+export { default as ErrorBoundary } from "./(public)/ErrorBoundary";
+export { default as ValidateCompanyID } from "./(public)/ValidateCompanyId";
diff --git a/frontend/src/components/shared/Product/AddToCart/index.jsx b/frontend/src/components/shared/Product/AddToCart/index.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+import useCart from "@/hooks/zustand/(public)/useCart";
+
+export function AddToCart({ product }) {
+    const [cart, setCart] = useCart(state => [state.cart, state.setCart]);
+
+    const handleAddToCart = () => {
+        const items = cart.items;
+        const productIndex = items.findIndex(item => item.singleItem.id === product.id);
+        if (productIndex === -1) {
+            items.push({ singleItem: product, quantity: 1 });
+        } else {
+            items[productIndex].quantity += 1;
+        }
+        setCart({ ...cart, items: [...items] });
+    };
+
+    return (
+        <button className="h-full flex items-center" onClick={handleAddToCart}>
+            <div className="active:scale-90 transition-all">
+                <svg
+                    className="w-6 h-6 flex *:fill-colorBorder"
+                    width="89"
+                    height="89"
+                    viewBox="0 0 89 89"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M0.75 44.5C0.75 20.3369 20.3369 0.75 44.5 0.75C68.6631 0.75 88.25 20.3369 88.25 44.5C88.25 68.6631 68.6631 88.25 44.5 88.25C20.3369 88.25 0.75 68.6631 0.75 44.5ZM44.5 9.5C35.2174 9.5 26.315 13.1875 19.7513 19.7513C13.1875 26.315 9.5 35.2174 9.5 44.5C9.5 53.7826 13.1875 62.685 19.7513 69.2487C26.315 75.8125 35.2174 79.5 44.5 79.5C53.7826 79.5 62.685 75.8125 69.2487 69.2487C75.8125 62.685 79.5 53.7826 79.5 44.5C79.5 35.2174 75.8125 26.315 69.2487 19.7513C62.685 13.1875 53.7826 9.5 44.5 9.5Z"
+                        fill="black"
+                    />
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M48.875 22.625C48.875 21.4647 48.4141 20.3519 47.5936 19.5314C46.7731 18.7109 45.6603 18.25 44.5 18.25C43.3397 18.25 42.2269 18.7109 41.4064 19.5314C40.5859 20.3519 40.125 21.4647 40.125 22.625V40.125H22.625C21.4647 40.125 20.3519 40.5859 19.5314 41.4064C18.7109 42.2269 18.25 43.3397 18.25 44.5C18.25 45.6603 18.7109 46.7731 19.5314 47.5936C20.3519 48.4141 21.4647 48.875 22.625 48.875H40.125V66.375C40.125 67.5353 40.5859 68.6481 41.4064 69.4686C42.2269 70.2891 43.3397 70.75 44.5 70.75C45.6603 70.75 46.7731 70.2891 47.5936 69.4686C48.4141 68.6481 48.875 67.5353 48.875 66.375V48.875H66.375C67.5353 48.875 68.6481 48.4141 69.4686 47.5936C70.2891 46.7731 70.75 45.6603 70.75 44.5C70.75 43.3397 70.2891 42.2269 69.4686 41.4064C68.6481 40.5859 67.5353 40.125 66.375 40.125H48.875V22.625Z"
+                        fill="black"
+                    />
+                </svg>
+            </div>
+        </button>
+    );
+}
diff --git a/frontend/src/components/shared/Product/Description/index.jsx b/frontend/src/components/shared/Product/Description/index.jsx
@@ -1,35 +1,38 @@
 import React from "react";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
+import ArrowSVG from "@/assets/svgComponents/Arrow";
+import { sty } from "@/utils";
 
 export default function Description({ expanded, product, ...rest }) {
-  const ref = React.useRef(null);
+    const ref = React.useRef(null);
 
-  const [height, setHeight] = React.useState(0);
+    const [height, setHeight] = React.useState(0);
 
-  React.useEffect(() => {
-    setHeight(ref.current ? ref.current.scrollHeight : 0);
-  }, [expanded]);
+    React.useEffect(() => {
+        setHeight(ref.current ? ref.current.scrollHeight : 0);
+    }, [expanded]);
 
-  if (!product.get("description")) return null;
+    if (!product.get("description")) return null;
 
-  return (
-    <div>
-      <div
-        ref={ref}
-        style={expanded ? { height } : { height: "1.75rem" }}
-        className={twMerge(
-          clsx(
-            !expanded &&
-              "w-[70%] overflow-ellipsis overflow-hidden whitespace-nowrap relative sm:w-[90%]"
-          )
-        )}
-        {...rest}>
-        {!expanded && (
-          <div className="absolute w-full h-full fadeGradient left-4" />
-        )}
-        <p className="text-[var(--texts)]">{product?.get("description")}</p>
-      </div>
-    </div>
-  );
+    return (
+        <div className={sty("flex flex-row gap-4 items-center", expanded && "flex-col items-start")} {...rest}>
+            <div
+                ref={ref}
+                style={expanded ? { height } : { height: "1.75rem" }}
+                className={twMerge(
+                    clsx(!expanded && "w-[70%] overflow-ellipsis overflow-hidden whitespace-nowrap relative sm:w-[90%]")
+                )}
+            >
+                {!expanded && <div className="absolute w-full h-full fadeGradient left-4" />}
+                <p className="text-[var(--texts)]">{product?.get("description")}</p>
+            </div>
+
+            <div className={sty("flex w-10 items-center justify-center", expanded && "w-full")}>
+                <button className="opacity-50">
+                    <ArrowSVG className={sty("*:fill-texts rotate-180", expanded && "rotate-0")} />
+                </button>
+            </div>
+        </div>
+    );
 }
diff --git a/frontend/src/components/shared/Product/index.jsx b/frontend/src/components/shared/Product/index.jsx
@@ -4,55 +4,9 @@ import { sty } from "@/utils";
 
 import Image from "./Image";
 import Description from "./Description";
+import { AddToCart } from "./AddToCart";
 import { useBackButton } from "@/hooks/useBackButton";
 import { priceConvertedToMoney } from "@/utils/priceConvertedToMoney";
-import useCart from "@/hooks/zustand/(public)/useCart";
-
-function AddToCart({ product }) {
-    const [cart, setCart] = useCart(state => [state.cart, state.setCart]);
-
-    const handleAddToCart = () => {
-        const items = cart.items;
-
-        const productIndex = items.findIndex(item => item.singleItem.id === product.id);
-
-        if (productIndex === -1) {
-            items.push({ singleItem: product, quantity: 1 });
-        } else {
-            items[productIndex].quantity += 1;
-        }
-
-        setCart({ ...cart, items: [...items] });
-    };
-
-    return (
-        <button className="h-full flex items-center" onClick={handleAddToCart}>
-            <div className="active:scale-90 transition-all">
-                <svg
-                    className="w-6 h-6 flex *:fill-colorBorder"
-                    width="89"
-                    height="89"
-                    viewBox="0 0 89 89"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M0.75 44.5C0.75 20.3369 20.3369 0.75 44.5 0.75C68.6631 0.75 88.25 20.3369 88.25 44.5C88.25 68.6631 68.6631 88.25 44.5 88.25C20.3369 88.25 0.75 68.6631 0.75 44.5ZM44.5 9.5C35.2174 9.5 26.315 13.1875 19.7513 19.7513C13.1875 26.315 9.5 35.2174 9.5 44.5C9.5 53.7826 13.1875 62.685 19.7513 69.2487C26.315 75.8125 35.2174 79.5 44.5 79.5C53.7826 79.5 62.685 75.8125 69.2487 69.2487C75.8125 62.685 79.5 53.7826 79.5 44.5C79.5 35.2174 75.8125 26.315 69.2487 19.7513C62.685 13.1875 53.7826 9.5 44.5 9.5Z"
-                        fill="black"
-                    />
-                    <path
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M48.875 22.625C48.875 21.4647 48.4141 20.3519 47.5936 19.5314C46.7731 18.7109 45.6603 18.25 44.5 18.25C43.3397 18.25 42.2269 18.7109 41.4064 19.5314C40.5859 20.3519 40.125 21.4647 40.125 22.625V40.125H22.625C21.4647 40.125 20.3519 40.5859 19.5314 41.4064C18.7109 42.2269 18.25 43.3397 18.25 44.5C18.25 45.6603 18.7109 46.7731 19.5314 47.5936C20.3519 48.4141 21.4647 48.875 22.625 48.875H40.125V66.375C40.125 67.5353 40.5859 68.6481 41.4064 69.4686C42.2269 70.2891 43.3397 70.75 44.5 70.75C45.6603 70.75 46.7731 70.2891 47.5936 69.4686C48.4141 68.6481 48.875 67.5353 48.875 66.375V48.875H66.375C67.5353 48.875 68.6481 48.4141 69.4686 47.5936C70.2891 46.7731 70.75 45.6603 70.75 44.5C70.75 43.3397 70.2891 42.2269 69.4686 41.4064C68.6481 40.5859 67.5353 40.125 66.375 40.125H48.875V22.625Z"
-                        fill="black"
-                    />
-                </svg>
-            </div>
-        </button>
-    );
-}
 
 export default function Product({ product, category, ...rest }) {
     const [expanded, setExpanded] = React.useState(false);
@@ -66,27 +20,22 @@ export default function Product({ product, category, ...rest }) {
     }, [expanded]);
 
     return (
-        <div
-            onClick={handleClick}
-            className={sty("relative w-full p-3 flex flex-col gap-4", category && "pt-14")}
-            {...rest}
-        >
+        <div className={sty("relative w-full p-3 pb-0 flex flex-col gap-4", category && "pt-14")} {...rest}>
             <div className={sty("flex w-full flex-row gap-2 justify-between")}>
                 <div className="flex flex-col gap-2">
-                    <p className="text-texts font-bold text-md capitalize max-w-32">{product?.get("name")}</p>
+                    <p className="text-texts font-bold text-md capitalize lg:max-w-32">{product?.get("name")}</p>
                     <p className="text-texts font-medium text-sm">{priceConvertedToMoney(product?.get("price"))}</p>
                 </div>
 
                 <Image product={product} />
-
                 <AddToCart product={product} />
 
                 <div className="absolute top-0 bg-primary rounded-lg px-2 font-bold text-background text-sm">
                     {category}
                 </div>
             </div>
 
-            <Description product={product} expanded={expanded} />
+            <Description onClick={handleClick} product={product} expanded={expanded} />
         </div>
     );
 }
diff --git a/frontend/src/helpers/LocalStorage.js b/frontend/src/helpers/LocalStorage.js
@@ -1,3 +1,5 @@
+import posthog from "posthog-js";
+
 export class LocalStorage {
     static set(key, value) {
         localStorage.setItem(key, JSON.stringify(value));
@@ -12,6 +14,7 @@ export class LocalStorage {
     }
 
     static logout() {
+        posthog.reset();
         const keys = Object.keys(localStorage);
         keys.forEach(key => {
             if (key !== "version" && key !== "initial_loading") {