Skip to content

Commit

Permalink
Migrate more components
Browse files Browse the repository at this point in the history
  • Loading branch information
goncy committed May 1, 2023
1 parent 3e2c470 commit 0e4aa67
Show file tree
Hide file tree
Showing 19 changed files with 259 additions and 275 deletions.
7 changes: 7 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,11 @@ module.exports = {
{
groups: ["type", "builtin", "object", "external", "internal", "parent", "sibling", "index"],
pathGroups: [
{
pattern: "~/**/types",
group: "type",
position: "before",
},
{
pattern: "~/**",
group: "external",
Expand Down Expand Up @@ -70,7 +75,9 @@ module.exports = {
reservedFirst: true,
},
],
"@next/next/no-img-element": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-unsafe-assignment": "off",
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/no-unused-vars": [
"warn",
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@chakra-ui/react": "^2.4.9",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@radix-ui/react-slot": "^1.0.1",
"axios": "^1.3.2",
"class-variance-authority": "^0.6.0",
"clsx": "^1.2.1",
Expand Down
22 changes: 22 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

46 changes: 44 additions & 2 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import type {Metadata} from "next";

import api from "~/store/api";
import StoreHeader from "~/store/components/StoreHeader";

import Providers from "./providers";

Expand All @@ -21,7 +20,50 @@ const App = async ({children}: {children: React.ReactNode}) => {
<Providers>
<main className="rounded-sm max-w-screen-xl m-auto p-4">
<article className="flex flex-col gap-8">
<StoreHeader store={store} />
<header className="flex flex-col gap-4">
<img
alt={store.title}
className="rounded-lg h-full max-h-64 object-cover"
src={store.banner}
/>
<div className="flex items-center flex-col sm:flex-row gap-3 sm:gap-6">
<div className="rounded-full -mt-12 sm:-mt-16 min-w-24 sm:min-w-32 p-1">
<img
alt={store.title}
className="rounded-full h-24 w-24 sm:h-32 sm:w-32"
src={store.logo}
/>
</div>
<div className="flex flex-col items-center sm:items-start gap-4 text-center sm:text-left">
<div className="flex flex-col gap-1">
<p className="font-bold text-4xl">{store.title}</p>
<p className="text-white/50 font-medium">{store.subtitle}</p>
</div>
<div className="flex gap-2">
{store.instagram ? (
<a href={store.instagram} rel="noopener noreferrer" target="_blank">
<div className="flex items-center bg-teal-600 rounded-full h-10 w-10 justify-center text-white">
<img
alt="Instagram logo"
src="https://icongr.am/fontawesome/instagram.svg?size=24&color=ffffff"
/>
</div>
</a>
) : null}
{store.whatsapp ? (
<a href={store.whatsapp} rel="noopener noreferrer" target="_blank">
<div className="flex items-center bg-teal-600 rounded-full h-10 w-10 justify-center text-white">
<img
alt="Whatsapp logo"
src="https://icongr.am/fontawesome/whatsapp.svg?size=24&color=ffffff"
/>
</div>
</a>
) : null}
</div>
</div>
</div>
</header>
{children}
</article>
<hr className="my-4" />
Expand Down
6 changes: 0 additions & 6 deletions src/lib/utils.ts

This file was deleted.

46 changes: 18 additions & 28 deletions src/modules/cart/components/CartDrawer/CartDrawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,15 @@ import type {CartItem, Field} from "../../types";

import React from "react";
import {
Text,
Image,
CloseButton,
Drawer,
DrawerContent,
DrawerHeader,
DrawerOverlay,
Stack,
IconButton,
DrawerFooter,
Button,
Link,
DrawerBody,
Divider,
} from "@chakra-ui/react";
import {ChevronLeftIcon} from "@chakra-ui/icons";

Expand Down Expand Up @@ -63,8 +58,8 @@ function CartDrawer({
<DrawerOverlay>
<DrawerContent paddingTop={4} {...props}>
<DrawerHeader paddingX={4}>
<Stack alignItems="center" direction="row" justifyContent="space-between">
<Stack alignItems="center" direction="row">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
{currentStep === "fields" && (
<IconButton
aria-label="Go back"
Expand All @@ -74,12 +69,10 @@ function CartDrawer({
onClick={() => setCurrentStep("details")}
/>
)}
<Text fontSize={{base: "2xl", sm: "3xl"}} fontWeight="500">
Tu pedido
</Text>
</Stack>
<p className="text-2xl sm:text-3xl font-medium">Tu pedido</p>
</div>
<CloseButton onClick={onClose} />
</Stack>
</div>
</DrawerHeader>
<DrawerBody data-testid="cart" paddingX={4}>
{currentStep === "details" && <Details cart={cart} onChange={handleUpdateCart} />}
Expand All @@ -89,18 +82,12 @@ function CartDrawer({
</DrawerBody>
<DrawerFooter paddingX={4}>
{fields && currentStep === "details" ? (
<Stack spacing={4} width="100%">
<Divider />
<Stack
alignItems="center"
direction="row"
fontSize="lg"
fontWeight="500"
justifyContent="space-between"
>
<Text>Total</Text>
<Text>{total}</Text>
</Stack>
<div className="flex flex-col gap-4 w-full">
<hr />
<div className="items-center flex gap-2 text-lg font-medium justify-between">
<p>Total</p>
<p>{total}</p>
</div>
<Button
colorScheme="primary"
data-testid="continue-order"
Expand All @@ -110,18 +97,21 @@ function CartDrawer({
>
Continuar
</Button>
</Stack>
</div>
) : null}
{(currentStep === "fields" || !fields) && (
<Button
isExternal
as={Link}
as="a"
colorScheme="whatsapp"
data-testid="complete-order"
href={`https://wa.me/5491141414141?text=${encodeURIComponent(message)}`}
leftIcon={
<Image src="https://icongr.am/fontawesome/whatsapp.svg?size=24&color=ffffff" />
<img
alt="Whatsapp logo"
src="https://icongr.am/fontawesome/whatsapp.svg?size=24&color=000"
/>
}
rel="noopener noreferrer"
size="lg"
width="100%"
>
Expand Down
40 changes: 19 additions & 21 deletions src/modules/cart/components/CartDrawer/Details.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,27 @@
import type {Cart, CartItem} from "../../types";

import {Stack, Divider, Button, Text} from "@chakra-ui/react";
import {Button} from "@chakra-ui/react";

import {parseCurrency} from "@/utils/currency";
import {parseCurrency} from "~/currency/utils";

import {getCartItemPrice, getCartItemOptionsSummary} from "../../utils";

function Details({cart, onChange}: {cart: Cart; onChange: (id: symbol, item: CartItem) => void}) {
return (
<Stack divider={<Divider />} spacing={4}>
<div className="flex flex-col gap-4 divide-y">
{Array.from(cart.entries()).map(([id, item]) => (
<Stack key={id.toString()} data-testid={`cart-item-${item.id}`} direction="row">
<Stack width="100%">
<Stack alignItems="flex-start" direction="row" justifyContent="space-between">
<Stack spacing={0}>
<Text fontSize="lg" fontWeight="500">
{item.title}
</Text>
<div key={id.toString()} className="flex gap-2" data-testid={`cart-item-${item.id}`}>
<div className="flex flex-col gap-2 w-full">
<div className="flex items-start justify-between">
<div className="flex flex-col">
<p className="text-lg font-medium">{item.title}</p>
{Boolean(item.options) && (
<Text color="gray.500">{getCartItemOptionsSummary(item.options)}</Text>
<p className="text-white/50">{getCartItemOptionsSummary(item.options)}</p>
)}
</Stack>
<Text fontWeight="500">{parseCurrency(getCartItemPrice(item))}</Text>
</Stack>
<Stack direction="row">
</div>
<p className="font-medium">{parseCurrency(getCartItemPrice(item))}</p>
</div>
<div className="flex gap-2">
<Button
borderRadius={9999}
colorScheme="primary"
Expand All @@ -34,9 +32,9 @@ function Details({cart, onChange}: {cart: Cart; onChange: (id: symbol, item: Car
{" "}
-{" "}
</Button>
<Text data-testid="quantity" fontWeight="500">
<p className="font-medium" data-testid="quantity">
{item.quantity}
</Text>
</p>
<Button
borderRadius={9999}
colorScheme="primary"
Expand All @@ -47,11 +45,11 @@ function Details({cart, onChange}: {cart: Cart; onChange: (id: symbol, item: Car
{" "}
+{" "}
</Button>
</Stack>
</Stack>
</Stack>
</div>
</div>
</div>
))}
</Stack>
</div>
);
}

Expand Down
20 changes: 10 additions & 10 deletions src/modules/cart/components/CartDrawer/Fields.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type {InputProps} from "@chakra-ui/react";
import type {Checkout, Field} from "../../types";

import {Stack, Text, Input, Alert, RadioGroup, Radio} from "@chakra-ui/react";
import {Input, Alert, RadioGroup, Radio} from "@chakra-ui/react";

function TextField({
value,
Expand All @@ -24,13 +24,13 @@ function RadioField({
}) {
return (
<RadioGroup colorScheme="primary" value={value} onChange={onChange}>
<Stack>
<div className="flex flex-col gap-2">
{options.map((option) => (
<Radio key={option} value={option}>
{option}
</Radio>
))}
</Stack>
</div>
</RadioGroup>
);
}
Expand All @@ -45,11 +45,11 @@ function Fields({
onChange: (id: string, value: string) => void;
}) {
return (
<Stack spacing={6}>
<div className="flex flex-col gap-6">
{fields.map((field) => (
<Stack key={field.type}>
<Text fontWeight={500}>{field.title}</Text>
<Stack spacing={4}>
<div key={field.type} className="flex flex-col gap-2">
<p className="font-medium">{field.title}</p>
<div className="flex flex-col gap-4">
{field.type === "text" && (
<TextField
placeholder={field.placeholder}
Expand All @@ -65,10 +65,10 @@ function Fields({
/>
)}
{field.note ? <Alert colorScheme="primary">{field.note}</Alert> : null}
</Stack>
</Stack>
</div>
</div>
))}
</Stack>
</div>
);
}

Expand Down
Loading

0 comments on commit 0e4aa67

Please sign in to comment.