Merge pull request #2 from gibify/main

Main
thegibi · Sep 28, 2023 · a72b093 · a72b093
2 parents 6693e19 + 28a2de9
commit a72b093
Show file tree

Hide file tree

Showing 18 changed files with 138 additions and 62 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,7 @@
+COMPANY_NAME="Gibify Technology"
+TWITTER_CREATOR="@gibifydev"
+TWITTER_SITE="https://gibify.dev"
+SITE_NAME="Gibify Commerce"
+SHOPIFY_REVALIDATION_SECRET="cc97f325-7c5e-4374-8b46-776bb104b8a7"
+SHOPIFY_STOREFRONT_ACCESS_TOKEN="b94f48b9b7a4ffef39a295855c8468ce"
+SHOPIFY_STORE_DOMAIN="gibify-commerce.myshopify.com"
diff --git a/.gitignore b/.gitignore
@@ -27,7 +27,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-.env*
+.env.local
 !.env.example
 
 # vercel

diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/page.tsx b/app/page.tsx
@@ -6,7 +6,7 @@ import { Suspense } from 'react';
 export const runtime = 'edge';
 
 export const metadata = {
-  description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
+  description: 'Compras on-line de um jeito simples e rápido.',
   openGraph: {
     type: 'website'
   }

diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
@@ -38,15 +38,15 @@ export async function generateMetadata({
     },
     openGraph: url
       ? {
-          images: [
-            {
-              url,
-              width,
-              height,
-              alt
-            }
-          ]
-        }
+        images: [
+          {
+            url,
+            width,
+            height,
+            alt
+          }
+        ]
+      }
       : null
   };
 }
@@ -114,7 +114,7 @@ async function RelatedProducts({ id }: { id: string }) {
 
   return (
     <div className="py-8">
-      <h2 className="mb-4 text-2xl font-bold">Related Products</h2>
+      <h2 className="mb-4 text-2xl font-bold">Produtos que combinam</h2>
       <ul className="flex w-full gap-4 overflow-x-auto pt-1">
         {relatedProducts.map((product) => (
           <li

diff --git a/app/search/page.tsx b/app/search/page.tsx
@@ -6,8 +6,8 @@ import { getProducts } from 'lib/shopify';
 export const runtime = 'edge';
 
 export const metadata = {
-  title: 'Search',
-  description: 'Search for products in the store.'
+  title: 'Buscar',
+  description: 'Buscar Produtos na site.'
 };
 
 export default async function SearchPage({
@@ -19,15 +19,15 @@ export default async function SearchPage({
   const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
 
   const products = await getProducts({ sortKey, reverse, query: searchValue });
-  const resultsText = products.length > 1 ? 'results' : 'result';
+  const resultsText = products.length > 1 ? 'resultados' : 'resultado';
 
   return (
     <>
       {searchValue ? (
         <p className="mb-4">
           {products.length === 0
-            ? 'There are no products that match '
-            : `Showing ${products.length} ${resultsText} for `}
+            ? 'Não encontramos Produtos para essa busca.'
+            : `Mostrando ${products.length} ${resultsText}  para a busca`}
           <span className="font-bold">&quot;{searchValue}&quot;</span>
         </p>
       ) : null}

diff --git a/components/cart/add-to-cart.tsx b/components/cart/add-to-cart.tsx
@@ -28,12 +28,12 @@ export function AddToCart({
   const title = !availableForSale
     ? 'Out of stock'
     : !selectedVariantId
-    ? 'Please select options'
-    : undefined;
+      ? 'Please select options'
+      : undefined;
 
   return (
     <button
-      aria-label="Add item to cart"
+      aria-label="Adicionar ao Carrinho"
       disabled={isPending || !availableForSale || !selectedVariantId}
       title={title}
       onClick={() => {
@@ -43,7 +43,8 @@ export function AddToCart({
         startTransition(async () => {
           const error = await addItem(selectedVariantId);
 
-          if (error) {
+          if (error)
+          {
             // Trigger the error boundary in the root error.js
             throw new Error(error.toString());
           }
@@ -62,7 +63,7 @@ export function AddToCart({
       <div className="absolute left-0 ml-4">
         {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
       </div>
-      <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
+      <span>{availableForSale ? 'Adicionar ao Carrinho' : 'Fora de Estoque'}</span>
     </button>
   );
 }
diff --git a/components/cart/delete-item-button.tsx b/components/cart/delete-item-button.tsx
@@ -13,12 +13,13 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
 
   return (
     <button
-      aria-label="Remove cart item"
+      aria-label="Remover Items do Carrinho"
       onClick={() => {
         startTransition(async () => {
           const error = await removeItem(item.id);
 
-          if (error) {
+          if (error)
+          {
             // Trigger the error boundary in the root error.js
             throw new Error(error.toString());
           }

diff --git a/components/cart/edit-item-quantity-button.tsx b/components/cart/edit-item-quantity-button.tsx
@@ -19,19 +19,20 @@ export default function EditItemQuantityButton({
 
   return (
     <button
-      aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
+      aria-label={type === 'plus' ? 'Adicionar Quantidade do Carrinho' : 'Diminuir Quantidade do Carrinho'}
       onClick={() => {
         startTransition(async () => {
           const error =
             type === 'minus' && item.quantity - 1 === 0
               ? await removeItem(item.id)
               : await updateItemQuantity({
-                  lineId: item.id,
-                  variantId: item.merchandise.id,
-                  quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
-                });
+                lineId: item.id,
+                variantId: item.merchandise.id,
+                quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
+              });
 
-          if (error) {
+          if (error)
+          {
             // Trigger the error boundary in the root error.js
             throw new Error(error.toString());
           }

diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
@@ -26,9 +26,11 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
 
   useEffect(() => {
     // Open cart modal when quantity changes.
-    if (cart?.totalQuantity !== quantityRef.current) {
+    if (cart?.totalQuantity !== quantityRef.current)
+    {
       // But only if it's not already open (quantity also changes when editing items in cart).
-      if (!isOpen) {
+      if (!isOpen)
+      {
         setIsOpen(true);
       }
 
@@ -39,7 +41,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
 
   return (
     <>
-      <button aria-label="Open cart" onClick={openCart}>
+      <button aria-label="Abrir Carrinho" onClick={openCart}>
         <OpenCart quantity={cart?.totalQuantity} />
       </button>
       <Transition show={isOpen}>
@@ -66,17 +68,17 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
           >
             <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
               <div className="flex items-center justify-between">
-                <p className="text-lg font-semibold">My Cart</p>
+                <p className="text-lg font-semibold">Meu Carrinho</p>
 
-                <button aria-label="Close cart" onClick={closeCart}>
+                <button aria-label="Fechar Carrinho" onClick={closeCart}>
                   <CloseCart />
                 </button>
               </div>
 
               {!cart || cart.lines.length === 0 ? (
                 <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
                   <ShoppingCartIcon className="h-16" />
-                  <p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
+                  <p className="mt-6 text-center text-2xl font-bold">Seu Carrinho está Vazio.</p>
                 </div>
               ) : (
                 <div className="flex h-full flex-col justify-between overflow-hidden p-1">
@@ -85,7 +87,8 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                       const merchandiseSearchParams = {} as MerchandiseSearchParams;
 
                       item.merchandise.selectedOptions.forEach(({ name, value }) => {
-                        if (value !== DEFAULT_OPTION) {
+                        if (value !== DEFAULT_OPTION)
+                        {
                           merchandiseSearchParams[name.toLowerCase()] = value;
                         }
                       });
@@ -153,18 +156,18 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                     })}
                   </ul>
                   <div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
-                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700">
+                    {/* <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700">
                       <p>Taxes</p>
                       <Price
                         className="text-right text-base text-black dark:text-white"
                         amount={cart.cost.totalTaxAmount.amount}
                         currencyCode={cart.cost.totalTaxAmount.currencyCode}
                       />
-                    </div>
-                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
-                      <p>Shipping</p>
-                      <p className="text-right">Calculated at checkout</p>
-                    </div>
+                    </div> */}
+                    {/* <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
+                      <p>Entrega</p>
+                      <p className="text-right">A calcular no Checkout</p>
+                    </div> */}
                     <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
                       <p>Total</p>
                       <Price
@@ -178,7 +181,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                     href={cart.checkoutUrl}
                     className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
                   >
-                    Proceed to Checkout
+                    Ir para o Checkout
                   </a>
                 </div>
               )}

diff --git a/components/icons/instagram.tsx b/components/icons/instagram.tsx
@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+
+export default function InstagramIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label={`${process.env.SITE_NAME} instagram`}
+      viewBox="0 0 32 32"
+      {...props}
+      className={clsx('h-4 w-4 fill-black dark:fill-white', props.className)}
+    >
+      <path d="M12.5049 6.88452C9.39941 6.88452 6.89453 9.3894 6.89453 12.4949C6.89453 15.6003 9.39941 18.1052 12.5049 18.1052C15.6104 18.1052 18.1152 15.6003 18.1152 12.4949C18.1152 9.3894 15.6104 6.88452 12.5049 6.88452ZM12.5049 16.1423C10.498 16.1423 8.85742 14.5066 8.85742 12.4949C8.85742 10.4832 10.4932 8.84741 12.5049 8.84741C14.5166 8.84741 16.1523 10.4832 16.1523 12.4949C16.1523 14.5066 14.5117 16.1423 12.5049 16.1423ZM19.6533 6.65503C19.6533 7.38257 19.0674 7.96362 18.3447 7.96362C17.6172 7.96362 17.0361 7.37769 17.0361 6.65503C17.0361 5.93237 17.6221 5.34644 18.3447 5.34644C19.0674 5.34644 19.6533 5.93237 19.6533 6.65503ZM23.3691 7.98315C23.2861 6.23022 22.8857 4.67749 21.6016 3.39819C20.3223 2.1189 18.7695 1.71851 17.0166 1.63062C15.21 1.52808 9.79492 1.52808 7.98828 1.63062C6.24023 1.71362 4.6875 2.11401 3.40332 3.39331C2.11914 4.67261 1.72363 6.22534 1.63574 7.97827C1.5332 9.78491 1.5332 15.1999 1.63574 17.0066C1.71875 18.7595 2.11914 20.3123 3.40332 21.5916C4.6875 22.8708 6.23535 23.2712 7.98828 23.3591C9.79492 23.4617 15.21 23.4617 17.0166 23.3591C18.7695 23.2761 20.3223 22.8757 21.6016 21.5916C22.8809 20.3123 23.2813 18.7595 23.3691 17.0066C23.4717 15.1999 23.4717 9.7898 23.3691 7.98315ZM21.0352 18.9451C20.6543 19.9021 19.917 20.6394 18.9551 21.0251C17.5146 21.5964 14.0967 21.4646 12.5049 21.4646C10.9131 21.4646 7.49023 21.5916 6.05469 21.0251C5.09766 20.6443 4.36035 19.907 3.97461 18.9451C3.40332 17.5046 3.53516 14.0867 3.53516 12.4949C3.53516 10.9031 3.4082 7.48022 3.97461 6.04468C4.35547 5.08765 5.09277 4.35034 6.05469 3.9646C7.49512 3.39331 10.9131 3.52515 12.5049 3.52515C14.0967 3.52515 17.5195 3.39819 18.9551 3.9646C19.9121 4.34546 20.6494 5.08276 21.0352 6.04468C21.6064 7.48511 21.4746 10.9031 21.4746 12.4949C21.4746 14.0867 21.6064 17.5095 21.0352 18.9451Z" />
+    </svg>
+  );
+}
diff --git a/components/icons/logo.tsx b/components/icons/logo.tsx
@@ -5,12 +5,13 @@ export default function LogoIcon(props: React.ComponentProps<'svg'>) {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       aria-label={`${process.env.SITE_NAME} logo`}
-      viewBox="0 0 32 28"
+      viewBox="0 0 31 32"
       {...props}
       className={clsx('h-4 w-4 fill-black dark:fill-white', props.className)}
     >
-      <path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z" />
-      <path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z" />
+      <path d="M0 16.0422V15.3668C0 12.4679 0.555849 9.85752 1.66755 7.53562C2.79332 5.21372 4.39754 3.37731 6.48021 2.02639C8.57696 0.675462 11.0888 0 14.0158 0C14.635 0.0562902 15.2049 0.267372 15.7256 0.633247C16.2463 0.999121 16.8232 1.42128 17.4565 1.89974C18.0897 2.37819 18.8848 2.81443 19.8417 3.20844C21.5585 3.91205 23.0361 4.91117 24.2744 6.20581C25.5127 7.48637 26.4626 9.01319 27.124 10.7863C27.7854 12.5453 28.1161 14.4943 28.1161 16.6332V17.2243C28.1161 19.7573 27.5602 22.1495 26.4485 24.4011C25.3509 26.6526 23.7537 28.482 21.657 29.8892C19.5743 31.2964 17.0554 32 14.1003 32C11.1451 32 8.61214 31.2964 6.50132 29.8892C4.40457 28.482 2.79332 26.5752 1.66755 24.1689C0.555849 21.7625 0 19.0536 0 16.0422ZM5.82586 15.3668V16.0422C5.82586 18.0686 6.1073 19.9402 6.67018 21.657C7.24714 23.3738 8.14072 24.7529 9.35092 25.7942C10.5752 26.8355 12.1583 27.3562 14.1003 27.3562C16.0141 27.3562 17.569 26.8355 18.7652 25.7942C19.9754 24.7529 20.8619 23.3738 21.4248 21.657C22.0018 19.9402 22.2902 18.0686 22.2902 16.0422V15.3668C22.2902 13.4529 22.0018 11.6869 21.4248 10.0686C20.8619 8.43624 19.9683 7.12753 18.7441 6.14248C17.5339 5.14336 15.9578 4.6438 14.0158 4.6438C12.102 4.6438 10.54 5.14336 9.32981 6.14248C8.13368 7.12753 7.24714 8.43624 6.67018 10.0686C6.1073 11.6869 5.82586 13.4529 5.82586 15.3668ZM30.5646 0V4.6438H14.0158V0H30.5646Z" />
+      {/* <path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z" />
+      <path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z" /> */}
     </svg>
   );
 }
diff --git a/components/icons/whatsapp.tsx b/components/icons/whatsapp.tsx
@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+
+export default function WhatsappIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label={`${process.env.SITE_NAME} whatsapp`}
+      viewBox="0 0 32 32"
+      {...props}
+      className={clsx('h-4 w-4 fill-black dark:fill-white', props.className)}
+    >
+      <path d="M20.1611 4.74121C18.1152 2.69043 15.3906 1.5625 12.4951 1.5625C6.51855 1.5625 1.65527 6.42578 1.65527 12.4023C1.65527 14.3115 2.15332 16.1768 3.10059 17.8223L1.5625 23.4375L7.30957 21.9287C8.8916 22.793 10.6738 23.2471 12.4902 23.2471H12.4951C18.4668 23.2471 23.4375 18.3838 23.4375 12.4072C23.4375 9.51172 22.207 6.79199 20.1611 4.74121ZM12.4951 21.4209C10.874 21.4209 9.28711 20.9863 7.90527 20.166L7.57812 19.9707L4.16992 20.8643L5.07812 17.5391L4.86328 17.1973C3.95996 15.7617 3.48633 14.1064 3.48633 12.4023C3.48633 7.43652 7.5293 3.39355 12.5 3.39355C14.9072 3.39355 17.168 4.33105 18.8672 6.03516C20.5664 7.73926 21.6113 10 21.6064 12.4072C21.6064 17.3779 17.4609 21.4209 12.4951 21.4209ZM17.4365 14.6729C17.168 14.5361 15.835 13.8818 15.5859 13.7939C15.3369 13.7012 15.1563 13.6572 14.9756 13.9307C14.7949 14.2041 14.2773 14.8096 14.1162 14.9951C13.96 15.1758 13.7988 15.2002 13.5303 15.0635C11.9385 14.2676 10.8936 13.6426 9.84375 11.8408C9.56543 11.3623 10.1221 11.3965 10.6396 10.3613C10.7275 10.1807 10.6836 10.0244 10.6152 9.8877C10.5469 9.75098 10.0049 8.41797 9.78027 7.87598C9.56055 7.34863 9.33594 7.42188 9.16992 7.41211C9.01367 7.40234 8.83301 7.40234 8.65234 7.40234C8.47168 7.40234 8.17871 7.4707 7.92969 7.73926C7.68066 8.0127 6.98242 8.66699 6.98242 10C6.98242 11.333 7.9541 12.6221 8.08594 12.8027C8.22266 12.9834 9.99512 15.7178 12.7148 16.8945C14.4336 17.6367 15.1074 17.7002 15.9668 17.5732C16.4893 17.4951 17.5684 16.9189 17.793 16.2842C18.0176 15.6494 18.0176 15.1074 17.9492 14.9951C17.8857 14.873 17.7051 14.8047 17.4365 14.6729Z" />
+    </svg>
+  );
+}
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
@@ -1,5 +1,7 @@
 import Link from 'next/link';
 
+import InstagramIcon from 'components/icons/instagram';
+import WhatsappIcon from 'components/icons/whatsapp';
 import FooterMenu from 'components/layout/footer-menu';
 import LogoSquare from 'components/logo-square';
 import { getMenu } from 'lib/shopify';
@@ -37,30 +39,53 @@ export default async function Footer() {
         >
           <FooterMenu menu={menu} />
         </Suspense>
-        <div className="md:ml-auto">
+        <div className="md:ml-auto flex gap-1 md:flex-row flex-col">
           <a
             className="flex h-8 w-max flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black dark:border-neutral-700 dark:bg-black dark:text-white"
-            aria-label="Deploy on Vercel"
-            href="https://vercel.com/templates/next.js/nextjs-commerce"
+            aria-label="Instagram do Gibify Commerce"
+            href="https://www.instagram.com/gibify.commerce/"
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            <span className="px-3">▲</span>
+            <span className="px-3">
+              <InstagramIcon />
+            </span>
             <hr className="h-full border-r border-neutral-200 dark:border-neutral-700" />
-            <span className="px-3">Deploy</span>
+            <span className="px-3">@gibify.commerce</span>
+          </a>
+          <a
+            className="flex h-8 w-max flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black dark:border-neutral-700 dark:bg-black dark:text-white"
+            aria-label="WhatsApp do Gibify Commerce"
+            href="https://wa.me/5548984030770"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="px-3">
+              <WhatsappIcon />
+            </span>
+            <hr className="h-full border-r border-neutral-200 dark:border-neutral-700" />
+            <span className="px-3">47 9 8403-1398</span>
           </a>
         </div>
       </div>
       <div className="border-t border-neutral-200 py-6 text-sm dark:border-neutral-700">
         <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 px-4 md:flex-row md:gap-0 md:px-4 min-[1320px]:px-0">
           <p>
             &copy; {copyrightDate} {copyrightName}
-            {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
+            {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} Todos os direitos reservados.
           </p>
           <hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
-          <p>Designed in California</p>
+          <p>CNPJ 43.954.898/0001-40</p>
           <p className="md:ml-auto">
-            Crafted by{' '}
-            <a href="https://vercel.com" className="text-black dark:text-white">
-              ▲ Vercel
+            Developed by{' '}
+            <a
+              className="text-black dark:text-white"
+              aria-label="Site do Developer"
+              href="https://gibify.dev"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              gibify.dev
             </a>
           </p>
         </div>