Skip to content

Commit

Permalink
feat(pcomparator): handle new products on scan
Browse files Browse the repository at this point in the history
  • Loading branch information
Clement-Muth committed Nov 11, 2024
1 parent a2f1fcc commit f30db13
Show file tree
Hide file tree
Showing 7 changed files with 131 additions and 23 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { Trans } from "@lingui/macro";
import {
Button,
Card,
CardBody,
Input,
Modal,
ModalBody,
ModalContent,
ModalFooter,
ModalHeader
} from "@nextui-org/react";
import { Info } from "lucide-react";
import { useState } from "react";
import { Location } from "~/applications/Prices/Ui/NewPrice/FormSteps/Step4/Location";
import { Stepper } from "~/components/Stepper/Stepper";

interface NewQuickPriceProps {
isOpen: boolean;
onOpenChange: () => void;
productName: string;
}

export const NewQuickPrice = ({ isOpen, onOpenChange, productName }: NewQuickPriceProps) => {
const [step, setStep] = useState(1);

return (
<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
<ModalContent>
<ModalHeader className="mt-4">
<Stepper steps={[{ label: "Price" }, { label: "Location" }]} currentStep={step} />
</ModalHeader>
{step === 1 ? (
<form onSubmit={() => setStep(2)}>
<ModalBody>
<Card>
<CardBody className="flex !flex-row gap-6 dark:bg-yellow-200/[0.06]">
<Info color="#f4e28d" size="22px" />
<div className="flex-1">
<p className="text-small">
<Trans>Product "{productName}" was not found but added to your account.</Trans>
</p>
<p className="text-small mt-2">Add a price to validate it.</p>
</div>
</CardBody>
</Card>
<Input
type="text"
name="price"
placeholder="2.99"
label={<Trans>Price</Trans>}
labelPlacement="outside"
size="lg"
/>
</ModalBody>
<ModalFooter>
<Button color="primary" type="submit">
Next
</Button>
</ModalFooter>
</form>
) : (
<Location
onPrevious={() => setStep(1)}
onNextStep={async (data) => {
console.log(data);
}}
/>
)}
</ModalContent>
</Modal>
);
};
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
"use client";

import { Button, useDisclosure } from "@nextui-org/react";
import { ScanBarcode } from "lucide-react";
import { useState, useTransition } from "react";
Expand All @@ -8,7 +6,11 @@ import { searchByBarcode } from "~/applications/Searchbar/Api/searchByBarcode";
import { BarcodeScannerModal } from "~/applications/Searchbar/Ui/SearchBarcode/BarcodeScannerModal";
import { SearchResultModal } from "~/applications/Searchbar/Ui/SearchResult/SearchResultModal";

export const SearchBarcode = () => {
interface SearchBarcodeProps {
onNewProduct: (productName: string) => void;
}

export const SearchBarcode = ({ onNewProduct }: SearchBarcodeProps) => {
const [pending, startTransition] = useTransition();
const { onOpen, onClose, isOpen, onOpenChange } = useDisclosure();
const [searchResult, setSearchResult] = useState<Awaited<ReturnType<typeof search>> | null>(null);
Expand All @@ -26,7 +28,12 @@ export const SearchBarcode = () => {
const formData = new FormData();

formData.append("search", name);
setSearchResult(await search(null, formData));
const results = await search(null, formData);

if (!results.prices) {
onNewProduct(results.search);
onClose();
} else setSearchResult(results);
});
}}
/>
Expand Down
6 changes: 2 additions & 4 deletions pcomparator/src/components/Stepper/Stepper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,13 @@ export const Stepper = ({ currentStep, steps, size = "md" }: StepperProps) => {
cy={svgSize / 2}
/>
</svg>
<div
className={`absolute inset-0 flex items-center justify-center font-semibold text-gray-700 ${fontSize}`}
>
<div className={`absolute inset-0 flex items-center justify-center font-semibold ${fontSize}`}>
{currentStep} of {totalSteps}
</div>
</div>

<div className="text-right">
<h2 className="font-semibold text-gray-800 text-xl">{steps[currentStep - 1].label}</h2>
<h2 className="font-semibold text-xl">{steps[currentStep - 1].label}</h2>
<p className="text-gray-500 text-small">
Next: {steps.at(currentStep)?.label ?? <Trans>Done</Trans>}
</p>
Expand Down
5 changes: 2 additions & 3 deletions pcomparator/src/core/ApplicationLayout.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import type { ReactNode } from "react";
import { SignButton } from "~/applications/Authentication/Ui/Signin/SignButton/SignButton";
import { SearchBarcode } from "~/applications/Searchbar/Ui/SearchBarcode/SearchBarcode";
import { Header } from "~/components/Header/Header";
import { Tabbar } from "~/components/Tabbar/Tabbar";
import { Toast } from "~/components/Toast/Toast";
import { Tabbar } from "~/core/Tabbar";
import { getDevice } from "~/core/getDevice";

export interface ApplicationLayoutProps {
Expand All @@ -17,7 +16,7 @@ const ApplicationLayout = async ({ children }: ApplicationLayoutProps) => {
<>
<Header rightArea={<SignButton />} />
{children}
{device === "mobile" ? <Tabbar mainButton={<SearchBarcode />} /> : null}
{device === "mobile" ? <Tabbar /> : null}
<Toast />
</>
);
Expand Down
33 changes: 33 additions & 0 deletions pcomparator/src/core/Tabbar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
"use client";

import { useDisclosure } from "@nextui-org/react";
import dynamic from "next/dynamic";
import { useState } from "react";
const NewQuickPrice = dynamic(() =>
import("~/applications/Prices/Ui/NewQuickPrice/NewQuickPrice").then((mod) => mod.NewQuickPrice)
);
import { SearchBarcode } from "~/applications/Searchbar/Ui/SearchBarcode/SearchBarcode";
import { Tabbar as TabbarComponent } from "~/components/Tabbar/Tabbar";

export const Tabbar = () => {
const [productName, setProductName] = useState<string | null>(null);
const { isOpen, onOpenChange, onOpen } = useDisclosure();

return (
<>
<TabbarComponent
mainButton={
<SearchBarcode
onNewProduct={(productName) => {
setProductName(productName);
onOpen();
}}
/>
}
/>
{isOpen && productName ? (
<NewQuickPrice isOpen={isOpen} onOpenChange={onOpenChange} productName={productName} />
) : null}
</>
);
};
11 changes: 5 additions & 6 deletions pcomparator/src/translations/messages/en.po
Original file line number Diff line number Diff line change
Expand Up @@ -216,8 +216,7 @@ msgstr "Please use 32 characters at maximum."
msgid "Previous"
msgstr "Previous"

#: src/applications/Prices/Ui/NewPrice/FormSteps/Step2/Price.tsx
#: src/applications/Prices/Ui/NewPrice/NewPiceModal.tsx
#: src/applications/Prices/Ui/NewQuickPrice/NewQuickPrice.tsx
msgid "Price"
msgstr "Price"

Expand All @@ -229,10 +228,6 @@ msgstr "Price deleted"
msgid "Price for {productName} added!"
msgstr "Price for {productName} added!"

#: src/applications/Searchbar/Ui/Searchbar.tsx
msgid "Prices for {0}"
msgstr "Prices for {0}"

#: src/applications/Searchbar/Ui/SearchResult/SearchResultModal.tsx
msgid "Prices for {search}"
msgstr "Prices for {search}"
Expand All @@ -241,6 +236,10 @@ msgstr "Prices for {search}"
msgid "Product"
msgstr "Product"

#: src/applications/Prices/Ui/NewQuickPrice/NewQuickPrice.tsx
msgid "Product \"{productName}\" was not found but added to your account."
msgstr "Product \"{productName}\" was not found but added to your account."

#: src/app/[locale]/dashboard/layout.tsx
msgid "Return to the app"
msgstr "Return to the app"
Expand Down
11 changes: 5 additions & 6 deletions pcomparator/src/translations/messages/fr.po
Original file line number Diff line number Diff line change
Expand Up @@ -216,8 +216,7 @@ msgstr "Veuillez utiliser 32 caractères maximum."
msgid "Previous"
msgstr "Précédent"

#: src/applications/Prices/Ui/NewPrice/FormSteps/Step2/Price.tsx
#: src/applications/Prices/Ui/NewPrice/NewPiceModal.tsx
#: src/applications/Prices/Ui/NewQuickPrice/NewQuickPrice.tsx
msgid "Price"
msgstr "Prix"

Expand All @@ -229,10 +228,6 @@ msgstr "Prix supprimé"
msgid "Price for {productName} added!"
msgstr "Prix pour {productName} ajouté !"

#: src/applications/Searchbar/Ui/Searchbar.tsx
msgid "Prices for {0}"
msgstr "Prix pour {0}"

#: src/applications/Searchbar/Ui/SearchResult/SearchResultModal.tsx
msgid "Prices for {search}"
msgstr "Prix pour {search}"
Expand All @@ -241,6 +236,10 @@ msgstr "Prix pour {search}"
msgid "Product"
msgstr "Produit"

#: src/applications/Prices/Ui/NewQuickPrice/NewQuickPrice.tsx
msgid "Product \"{productName}\" was not found but added to your account."
msgstr "Produit \"{productName}\" n'a pas été trouvé mais à été ajouté votre compte."

#: src/app/[locale]/dashboard/layout.tsx
msgid "Return to the app"
msgstr "Retourner à l'app"
Expand Down

0 comments on commit f30db13

Please sign in to comment.