generated from ngyngcphu/react-template
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(order-success): create ui for Order Success Form version mobile
- Loading branch information
Showing
11 changed files
with
274 additions
and
200 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,114 +1,108 @@ | ||
| //import { useOrderWorkflowStore } from '@states'; | ||
| import { Button, Card, CardBody, Typography } from '@material-tailwind/react'; | ||
| import { MutableRefObject } from 'react'; | ||
| import { Button, Card, CardBody, IconButton, Typography } from '@material-tailwind/react'; | ||
| import { CheckIcon, DocumentChartBarIcon } from '@heroicons/react/24/outline'; | ||
| import { XMarkIcon } from '@heroicons/react/24/solid'; | ||
| import { CheckIcon } from '@heroicons/react/24/outline'; | ||
| import { DocumentChartBarIcon } from '@heroicons/react/24/outline'; | ||
| import coin from '@assets/coin.png'; | ||
| // Tue's second-task in here. | ||
| export function OrderSuccessForm() { | ||
| //const { setMobileOrderStep } = useOrderWorkflowStore(); | ||
| const detail_order = [ | ||
| { | ||
| name: 'Order number', | ||
| detail: '#1234-5678' | ||
| }, | ||
| { | ||
| name: 'Pick-up location', | ||
| detail: 'Tiệm in thư viện H3, tầng 1' | ||
| }, | ||
| { | ||
| name: 'Print cost', | ||
| detail: '2.400', | ||
| coin: true | ||
| }, | ||
| { | ||
| name: 'Service cost', | ||
| detail: '2', | ||
| coin: true | ||
| }, | ||
| { | ||
| name: 'Total', | ||
| detail: '2.402', | ||
| coin: true | ||
| } | ||
| ]; | ||
| import coinImage from '@assets/coin.png'; | ||
| import { usePrintingRequestQuery } from '@hooks'; | ||
| import { useOrderPrintStore } from '@states'; | ||
|
|
||
| export const OrderSuccessForm: Component<{ | ||
| handleCloseOrderForm: () => void; | ||
| initialTotalCost: MutableRefObject<number>; | ||
| }> = ({ handleCloseOrderForm, initialTotalCost }) => { | ||
| const { | ||
| serviceFee: { data: serviceFee } | ||
| } = usePrintingRequestQuery(); | ||
| const { totalCost, setIsFileUploadSuccess, setTotalCost } = useOrderPrintStore(); | ||
|
|
||
| const handleExistOrderSuccessForm = () => { | ||
| setIsFileUploadSuccess(false); | ||
| setTotalCost(0); | ||
| initialTotalCost.current = 0; | ||
| handleCloseOrderForm(); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Card className='rounded-none shadow-md'> | ||
| <CardBody className='px-6 py-4'> | ||
| <div className='flex items-center justify-between'> | ||
| <Typography className='text-gray/4 text-base font-semibold '>Other success</Typography> | ||
| <XMarkIcon | ||
| className='w-7 h-7 text-gray/4 absolute right-4 top-4 cursor-pointer' | ||
| // onClick={() => { | ||
| // setOrderStep(1); | ||
| // }} | ||
| /> | ||
| </div> | ||
| </CardBody> | ||
| </Card> | ||
| <div className='flex justify-between items-center shadow-md px-6 py-3 bg-white mb-6'> | ||
| <span className='text-gray/4 font-bold'>Other success</span> | ||
| <IconButton variant='text' onClick={handleExistOrderSuccessForm}> | ||
| <XMarkIcon className='w-6 h-6' /> | ||
| </IconButton> | ||
| </div> | ||
| <div className='w-full flex flex-col justify-center items-center pt-6 mb-[64px]'> | ||
| <div className='w-[88px] h-[88px] p-5 rounded-full bg-[#DBEAFE]'> | ||
| <CheckIcon className='w-12 h-12 text-blue/1' /> | ||
| </div> | ||
| <Typography className='text-blue/1 text-2xl font-bold mt-4'> | ||
| Your payment success' | ||
| Your payment success | ||
| </Typography> | ||
| </div> | ||
| <Card className='rounded-none shadow-none'> | ||
| <CardBody> | ||
| <div className='flex items-center'> | ||
| <DocumentChartBarIcon className='w-5 h-5 text-blue/1 mr-2' /> | ||
| <Typography className='text-gray/4 text-base font-medium '>Order details</Typography> | ||
| <DocumentChartBarIcon strokeWidth={2} className='w-5 h-5 text-blue/1 mr-2' /> | ||
| <p className='text-gray/4 text-lg font-medium '>Order details</p> | ||
| </div> | ||
| </CardBody> | ||
| <CardBody className='py-4 relative'> | ||
| <hr className='absolute w-[328px] border border-gray/2 top-[94px]' /> | ||
| <div className='flex flex-col items-start gap-1'> | ||
| {detail_order.map((item, index) => ( | ||
| <div className='flex justify-between' key={index}> | ||
| <Typography className='min-w-2/5 text-gray/4 text-base font-normal'> | ||
| {`${item.name}:`} | ||
| </Typography> | ||
| <div className='flex basis-1/2 items-center text-right justify-end'> | ||
| {item.coin && ( | ||
| <img | ||
| className={index === 4 ? 'w-4 h-4' : 'w-4 h-4 mix-blend-luminosity'} | ||
| src={coin} | ||
| ></img> | ||
| )} | ||
| <Typography | ||
| className={ | ||
| index === 4 | ||
| ? 'text-[#D97706] text-base font-bold' | ||
| : 'text-gray/4 text-base font-medium ' | ||
| } | ||
| > | ||
| {item.detail} | ||
| </Typography> | ||
| </div> | ||
| <div className='py-8'> | ||
| <div className='flex flex-col gap-1'> | ||
| <div className='flex justify-between items-center'> | ||
| <p className='text-gray/4 text-base font-normal'>Order number:</p> | ||
| <p className='text-gray/4 text-base font-medium'>{`#1234-5678`}</p> | ||
| </div> | ||
| ))} | ||
| <div className='flex justify-between items-center'> | ||
| <p className='text-gray/4 text-base font-normal'>Pick-up location:</p> | ||
| <p className='text-gray/4 text-base font-medium'>Tiệm in thư viện H3, tầng 1</p> | ||
| </div> | ||
| <hr className='w-full border border-gray/2 my-2' /> | ||
| <ul> | ||
| <li className='flex justify-between mb-1'> | ||
| <Typography variant='paragraph' className='font-medium'> | ||
| Print cost: | ||
| </Typography> | ||
| <p className='flex items-center gap-1 text-sm'> | ||
| <img src={coinImage} alt='coinImage' className='grayscale w-6 h-6' /> | ||
| <span className='text-gray/4 font-normal'>{totalCost}</span> | ||
| </p> | ||
| </li> | ||
| <li className='flex justify-between mb-1'> | ||
| <Typography variant='paragraph' className='font-medium'> | ||
| Service cost: | ||
| </Typography> | ||
| <p className='flex items-center gap-1 text-sm'> | ||
| <img src={coinImage} alt='coinImage' className='grayscale w-6 h-6' /> | ||
| <span className='text-gray/4 font-normal'>{serviceFee ?? 0}</span> | ||
| </p> | ||
| </li> | ||
| <li className='flex justify-between'> | ||
| <Typography variant='paragraph' className='font-bold'> | ||
| Total cost: | ||
| </Typography> | ||
| <p className='flex items-center gap-1'> | ||
| <img src={coinImage} alt='coinImage' className='w-6 h-6' /> | ||
| <span className='text-yellow/1 font-bold'>{totalCost + (serviceFee ?? 0)}</span> | ||
| </p> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </CardBody> | ||
| <div className='mt-4 flex flex-col items-center'> | ||
| <Button | ||
| className='px-4 py-2 rounded-lg bg-blue/1 h-[40px] normal-case hover:shadow-none' | ||
| ripple={false} | ||
| // onClick={() => setOrderStep(5)} | ||
| > | ||
| Track this order | ||
| </Button> | ||
| <Button | ||
| className='px-4 py-2 rounded-lg h-[40px] text-gray/3 text-sm font-semibold mt-2 normal-case hover:border hover:border-blue/1 hover:bg-white' | ||
| variant='text' | ||
| ripple={false} | ||
| // onClick={() => setOrderStep(3)} | ||
| > | ||
| Return home | ||
| </Button> | ||
| </div> | ||
| </Card> | ||
| <div className='mt-4 flex flex-col items-center'> | ||
| <Button | ||
| className='px-4 py-2 rounded-lg bg-blue/1 h-[40px] normal-case text-sm hover:shadow-none' | ||
| onClick={handleExistOrderSuccessForm} | ||
| > | ||
| Track this order | ||
| </Button> | ||
| <Button | ||
| className='px-4 py-2 rounded-lg h-[40px] text-gray/3 text-sm font-semibold mt-2 normal-case hover:border hover:border-blue/1 hover:bg-white' | ||
| variant='text' | ||
| onClick={handleExistOrderSuccessForm} | ||
| > | ||
| Return home | ||
| </Button> | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
| }; |
Oops, something went wrong.