fix: order page
This commit is contained in:
Mahyar Khanbolooki
@@ -8,6 +8,7 @@ import TabContainer from '@/components/tab/TabContainer'
|
||||
import { TabHeader } from '@/components/tab/TabHeader';
|
||||
import { Receipt2, ReceiptItem } from 'iconsax-react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
@@ -153,7 +154,63 @@ function OrdersIndex() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className='mt-6 font-medium!'>{t('Card.TrackOrder')}</Button>
|
||||
<Link href={`track/${order.id}`}>
|
||||
<Button className='mt-6 font-medium!'>{t('Card.TrackOrder')}</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const secondTab = () => {
|
||||
return currentOrders.map((order) => {
|
||||
return (
|
||||
<div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-white rounded-3xl'>
|
||||
<div className="text-sm2">
|
||||
<div className='flex gap-2'>
|
||||
<LocationPinIcon size={16} />
|
||||
<p>{order.address}</p>
|
||||
</div>
|
||||
<div className='mt-2 flex gap-2'>
|
||||
<CalendarIcon size={16} />
|
||||
<p>{order.date}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className='mx-4 mt-6 text-disabled3 border-2' />
|
||||
|
||||
<div className='flex justify-between mt-6'>
|
||||
<div className='flex justify-start gap-[9px]'>
|
||||
{order.items.map((item) => {
|
||||
return (
|
||||
<span key={item.id} className='w-8 h-8 relative'>
|
||||
<Image
|
||||
priority
|
||||
className='rounded-lg'
|
||||
src={item.image}
|
||||
width={32}
|
||||
height={32}
|
||||
alt="order image"
|
||||
/>
|
||||
<span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-white border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5">
|
||||
{item.quantity}
|
||||
</span>
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className='font-medium text-sm' dir='ltr'>
|
||||
{order.price} T
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-4'>
|
||||
<Link href={`rate/${order.id}`}>
|
||||
<Button className='mt-6 font-medium!'>{t('Card.Rate')}</Button>
|
||||
</Link>
|
||||
<Button className='mt-6 font-medium! bg-disabled! text-disabled-text!'>{t('Card.Reorder')}</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
})
|
||||
@@ -168,7 +225,7 @@ function OrdersIndex() {
|
||||
title={categories[0].title} icon={categories[0].icon}>
|
||||
</TabHeader>
|
||||
<TabHeader
|
||||
viewRenderer={<PerformantTabRenderer><div>empty</div><div></div></PerformantTabRenderer>}
|
||||
viewRenderer={<PerformantTabRenderer rowHeight={320}>{secondTab()}</PerformantTabRenderer>}
|
||||
title={categories[1].title} icon={categories[1].icon}>
|
||||
</TabHeader>
|
||||
</TabContainer>
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
'use client';
|
||||
|
||||
import ToggleButton from '@/components/button/ToggleButton';
|
||||
import TabContainer, { TabContainerClassNames, TabContainerRenderType } from '@/components/tab/TabContainer';
|
||||
import { TabHeader } from '@/components/tab/TabHeader';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import RateSelectionBar from '@/components/utils/RateSelectionBar';
|
||||
import clsx from 'clsx';
|
||||
import { useParams } from 'next/navigation';
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
type Props = object
|
||||
|
||||
type Params = {
|
||||
orderId: string;
|
||||
}
|
||||
|
||||
function RatingOrderIndex({ }: Props) {
|
||||
const params: Params = useParams();
|
||||
console.log(params);
|
||||
const { t } = useTranslation("rating");
|
||||
|
||||
const badPoitns = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-x-4.5 gap-y-4 mt-8">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<ToggleButton key={i} name={`weekness${i}`}>
|
||||
{t(`Tabs.Weeknesses.Options.${i}`)}
|
||||
</ToggleButton>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const goodPoitns = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-x-4.5 gap-y-4 mt-8">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<ToggleButton key={i} name={`strength${i}`}>
|
||||
{t(`Tabs.Strengths.Options.${i}`)}
|
||||
</ToggleButton>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const submitForm = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.currentTarget);
|
||||
console.log(formData.get('rating'))
|
||||
}
|
||||
|
||||
return (
|
||||
<section className='flex flex-col h-full pt-6'>
|
||||
<h1 className='font-medium'>{t("Heading")}</h1>
|
||||
|
||||
<form onSubmit={submitForm} className='bg-container flex flex-col h-min justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4'>
|
||||
|
||||
<div>
|
||||
<div className='w-full'>
|
||||
<RateSelectionBar name='rating' />
|
||||
</div>
|
||||
|
||||
<div className='mt-10'>
|
||||
<TabContainer
|
||||
defaultIndex={1}
|
||||
changeType={TabContainerRenderType.VISIBILITY}
|
||||
className={{
|
||||
...TabContainerClassNames,
|
||||
wrapper: 'p-2!',
|
||||
scrollView: clsx(
|
||||
'border-none! rounded-xl! gap-0! h-full bg-[#EAECF0]! grid! grid-cols-2 px-2! py-2! pt-2!', TabContainerClassNames.scrollView
|
||||
),
|
||||
title: 'text-sm2! font-normal mt-1',
|
||||
header: 'rounded-lg h-7! w-full',
|
||||
headerActive: 'bg-primary',
|
||||
titleActive: 'text-accent'
|
||||
}}>
|
||||
<TabHeader title={t("Tabs.Weeknesses.Title")} viewRenderer={badPoitns()}></TabHeader>
|
||||
<TabHeader title={t("Tabs.Strengths.Title")} viewRenderer={goodPoitns()}></TabHeader>
|
||||
</TabContainer>
|
||||
<div className="w-full mt-6">
|
||||
<label htmlFor='userOpinion'>{t("InputComment.Label")}</label>
|
||||
<br />
|
||||
<textarea name='userOpinion' id='userOpinion' placeholder={t("InputComment.Placeholder")} className='mt-2 w-full h-21 px-4 py-2.5 text-xs text-[#888888] rounded-xl border border-[#D0D0D0]' />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 mt-6">
|
||||
<Button type='submit' className='mt-auto rounded-xl font-normal cursor-pointer'>
|
||||
{t("ButtonSubmit")}
|
||||
</Button>
|
||||
<Button type='submit' className='mt-auto rounded-xl bg-white cursor-pointer hover:bg-neutral-100 border border-foreground text-foreground font-normal'>
|
||||
{t("ButtonCancel")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default RatingOrderIndex
|
||||
Reference in New Issue
Block a user