From 4199c430d5b2bc42b9fb57598c44a0100266d7f2 Mon Sep 17 00:00:00 2001 From: sina_sajjadi Date: Sun, 10 Nov 2024 18:45:47 +0330 Subject: [PATCH] fix (API) : changes related to passengers lable connected to API fix(bills) : bills page connected to API --- next-i18next.config.js | 2 +- next.config.js | 1 - public/locales/ar/common.json | 116 +++++++++++ public/locales/en/common.json | 4 +- public/locales/fr/common.json | 181 +++++++++++------- .../(account-pages)/bills/BillCard.tsx | 85 +++++--- .../(account-pages)/bills/[slug]/page.tsx | 181 ++++++++++++++---- .../[locale]/(account-pages)/bills/page.tsx | 144 ++++++++------ .../(Header)/LangDropdown.tsx | 14 +- .../(client-components)/(Header)/MainNav1.tsx | 39 +--- .../(Header)/SearchDropdown.tsx | 4 +- .../(stay-search-form)/StaySearchForm.tsx | 2 +- .../(HeroSearchForm)/LocationInput.tsx | 2 +- .../add-listing/[[...stepIndex]]/page.tsx | 2 +- src/app/[locale]/add-new-passenger/page.tsx | 75 ++++++-- src/app/[locale]/blog/SectionMagazine5.tsx | 25 ++- src/app/[locale]/layout.tsx | 40 ++-- src/app/[locale]/tours/[slug]/page.tsx | 83 ++++++-- src/components/MobileFooterSticky.tsx | 9 +- src/components/SearchCard.tsx | 2 +- src/components/SectionGridFeaturePlaces.tsx | 3 +- src/components/UserMenu.tsx | 42 ++++ src/components/api/axios.tsx | 58 +++--- src/components/contexts/tourDetails.tsx | 14 +- src/components/contexts/userContext.tsx | 5 + src/i18n.ts | 4 +- src/middleware.ts | 15 +- src/shared/Navigation/Navigation.tsx | 2 +- 28 files changed, 823 insertions(+), 331 deletions(-) create mode 100644 public/locales/ar/common.json create mode 100644 src/components/UserMenu.tsx diff --git a/next-i18next.config.js b/next-i18next.config.js index 55c251b..ba2afd3 100644 --- a/next-i18next.config.js +++ b/next-i18next.config.js @@ -2,7 +2,7 @@ const path = require("path"); module.exports = { i18n: { - locales: ['en', 'vi', 'fr'], // List all supported locales + locales: ['en', 'vi', 'fr' , 'ar'], // List all supported locales defaultLocale: 'en', // Set the default locale }, }; diff --git a/next.config.js b/next.config.js index b720da2..5deb430 100644 --- a/next.config.js +++ b/next.config.js @@ -5,7 +5,6 @@ const { i18n } = require("./next-i18next.config"); module.exports = { - eslint: { ignoreDuringBuilds: false, }, diff --git a/public/locales/ar/common.json b/public/locales/ar/common.json new file mode 100644 index 0000000..8552cf7 --- /dev/null +++ b/public/locales/ar/common.json @@ -0,0 +1,116 @@ +{ + "home": "Accueil", + "allTours": "Tous les Tours", + "blogs": "Blogs", + "faq": "FAQ", + "aboutUs": "À Propos de Nous", + "customTour": "Tour Personnalisé", + "searchPlaceholder": "Où aller ?", + "searchDescription": "Partout • N'importe quelle semaine • Ajouter des invités", + "beginAdventure": "Commencez votre aventure spirituelle", + "planPilgrimage": "Planifiez votre pèlerinage facilement. Trouvez les meilleures accommodations, transports et expériences guidées vers les sanctuaires chiites à travers le monde", + "startJourney": "Commencez votre voyage", + "listOfTours": "Liste des Tours", + "exploreTours": "Explorez les tours et accommodations adaptées pour un voyage spirituel et mémorable", + "tourPeriod": "Période du Tour", + "tourPeriodDescription": "Début - Fin", + "guests": "Invités", + "addGuests": "Ajouter des invités", + "available": "Disponible", + "soldOut": "Épuisé", + "showMore": "Montrez-moi plus", + "happeningCities": "Villes Animées", + "costEffectiveAdvertising": "Publicité Rentable", + "costEffectiveDescription": "Avec une annonce gratuite, vous pouvez faire la publicité de votre location sans frais initiaux", + "reachMillions": "Atteignez des millions avec Chisfis", + "reachMillionsDescription": "Des millions de personnes recherchent des lieux uniques où séjourner à travers le monde", + "secureAndSimple": "Securisé et Simple", + "secureDescription": "Une annonce sur Holiday Lettings vous offre un moyen sécurisé et facile de prendre des réservations et des paiements en ligne", + "mobileApps": "Applications Mobiles", + "mobileAppsDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus porttitor nisl, sit amet finibus libero.", + "installation": "Installation", + "releaseNotes": "Notes de Version", + "upgradeGuide": "Guide de Mise à Niveau", + "browserSupport": "Support des Navigateurs", + "editorSupport": "Support de l'Éditeur", + "designFeatures": "Caractéristiques de Design", + "prototyping": "Prototypage", + "designSystems": "Systèmes de Design", + "pricing": "Tarification", + "security": "Sécurité", + "bestPractices": "Meilleures Pratiques", + "support": "Support", + "developers": "Développeurs", + "learnDesign": "Apprendre le Design", + "releases": "Versions", + "discussionForums": "Forums de Discussion", + "codeOfConduct": "Code de Conduite", + "communityResources": "Ressources Communautaires", + "contributing": "Contribuer", + "concurrentMode": "Mode Concurrent", + "goodNews": "Bonnes Nouvelles d'Ailleurs", + "whatPeopleThink": "Voyons ce que les gens pensent de Chisfis", + "testimonial": "Cet endroit est exactement comme sur la photo publiée sur Chisfis. Excellent service, nous avons passé un très bon séjour !", + "clientName": "Tiana Abie", + "clientLocation": "Malaisie", + "myTrips": "Mes Voyages", + "account": "Compte", + "menu": "Menu", + "gettingStarted": "Premiers Pas", + "explore": "Explorer", + "resources": "Ressources", + "community": "Communauté", + "placeType": "Type de Lieu", + "noTours": "Aucun tour disponible", + "itinerary": "Itinéraire", + "itineraryTitle": "Itinéraire", + "total": "Total", + "reserve": "Réserver", + "tourFeatures": "Caractéristiques du Tour", + "tourFeaturesTitle": "Caractéristiques du Tour", + "startRating": "Évaluation de Début", + "listingDetails": "Détails", + "imageAlt": "Image du tour", + "loading": "Chargement...", + "adults": "Adultes", + "adultsDesc": "Âges 13 ou plus", + "children": "Enfants", + "childrenDesc": "Âges 2–12", + "infants": "Bébés", + "infantsDesc": "Âges 0–2", + "traveler": "Voyageur", + "responses": "Réponses ({{count}})", + "submit": "Soumettre", + "cancel": "Annuler", + "relatedPosts": "Articles Connexes", + "aboutUsHeading": "👋 À Propos de Nous.", + "aboutUsSubheading": "Nous sommes une équipe passionnée dédiée à la création d'expériences de voyage inoubliables pour les explorateurs et les rêveurs. Des escapades sereines sur des plages tropicales aux aventures à sensations fortes dans des lieux exotiques, nous concevons des voyages aussi uniques que vous. Rejoignez-nous et explorons le monde, une aventure à la fois !", + "statisticTitle": "🚀 Faits Rapides", + "statisticDescription": "Nous sommes impartiaux et indépendants, et chaque jour nous créons des programmes et du contenu distinctifs de classe mondiale.", + "statisticHeading1": "10 millions", + "statisticSubHeading1": "D'articles ont été publiés à travers le monde (au 30 septembre 2021)", + "statisticHeading2": "100 000", + "statisticSubHeading2": "Utilisateurs enregistrés (au 30 septembre 2021)", + "statisticHeading3": "220+", + "statisticSubHeading3": "Pays et régions où nous sommes présents (au 30 septembre 2021)", + "customTrip": "Voyage Personnalisé", + "guide": "Guide", + "guideDescription": "Tout d'abord, écrivez l'origine de votre départ, puis choisissez la première destination de votre voyage, le nombre de nuits de séjour et le moyen de transport, puis choisissez vos destinations de voyage si vous le souhaitez.", + "beginYourTrip": "Commencez Votre Voyage", + "startDate": "Date de Début", + "numberOfPassengers": "Nombre de Passagers", + "destination": "Destination", + "selectCity": "Sélectionner une Ville", + "transportation": "Transport", + "selectTransport": "Sélectionner le Transport", + "hotel": "Hôtel", + "selectHotel": "Sélectionner l'Hôtel", + "duration": "Durée", + "finishDate": "Date de Fin", + "addDestination": "Ajouter une Destination", + "continue": "Continuer", + "successMessage": "Enregistré avec succès", + "to": "à", + "login": "Se Connecter", + "signup": "S'inscrire" +} diff --git a/public/locales/en/common.json b/public/locales/en/common.json index f1ff91e..bd09220 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -110,5 +110,7 @@ "addDestination": "Add Destination", "continue": "Continue", "successMessage": "Successfully Registered", - "to": "to" + "to": "to", + "login": "LogIn", + "signup": "Sign Up" } diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json index 4bc4bbe..8552cf7 100644 --- a/public/locales/fr/common.json +++ b/public/locales/fr/common.json @@ -1,67 +1,116 @@ { - "home": "Accueil", - "allTours": "Tous les Tours", - "blogs": "Blogs", - "faq": "FAQ", - "aboutUs": "À propos de nous", - "customTour": "Visite sur mesure", - "searchPlaceholder": "Où aller ?", - "searchDescription": "Partout • À toute semaine • Ajouter des invités", - "beginAdventure": "Commencez votre aventure spirituelle", - "planPilgrimage": "Planifiez votre pèlerinage avec facilité. Trouvez les meilleures accommodations, le transport et les expériences guidées vers les sanctuaires chiites à travers le monde", - "startJourney": "Commencer votre voyage", - "listOfTours": "Liste des Tours", - "exploreTours": "Explorez les visites et les hébergements adaptés pour un voyage spirituel et mémorable", - "tourPeriod": "Période de visite", - "tourPeriodDescription": "Début - Fin", - "guests": "Invités", - "addGuests": "Ajouter des invités", - "available": "Disponible", - "soldOut": "Épuisé", - "showMore": "Montrez-moi plus", - "happeningCities": "Villes en vogue", - "costEffectiveAdvertising": "Publicité rentable", - "costEffectiveDescription": "Avec une annonce gratuite, vous pouvez promouvoir votre location sans frais initiaux", - "reachMillions": "Atteignez des millions avec Chisfis", - "reachMillionsDescription": "Des millions de personnes recherchent des lieux uniques où séjourner à travers le monde", - "secureAndSimple": "Sécurisé et simple", - "secureDescription": "Une annonce de Holiday Lettings vous offre un moyen sécurisé et facile de prendre des réservations et des paiements en ligne", - "mobileApps": "Applications Mobiles", - "mobileAppsDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus porttitor nisl, sit amet finibus libero.", - "installation": "Installation", - "releaseNotes": "Notes de version", - "upgradeGuide": "Guide de mise à niveau", - "browserSupport": "Support des navigateurs", - "editorSupport": "Support de l'éditeur", - "designFeatures": "Fonctionnalités de conception", - "prototyping": "Prototypage", - "designSystems": "Systèmes de design", - "pricing": "Tarification", - "security": "Sécurité", - "bestPractices": "Meilleures pratiques", - "support": "Support", - "developers": "Développeurs", - "learnDesign": "Apprendre la conception", - "releases": "Versions", - "discussionForums": "Forums de discussion", - "codeOfConduct": "Code de conduite", - "communityResources": "Ressources communautaires", - "contributing": "Contribuer", - "concurrentMode": "Mode concurrent", - "goodNews": "Bonne nouvelle de loin", - "whatPeopleThink": "Voyons ce que les gens pensent de Chisfis", - "testimonial": "Cet endroit est exactement comme la photo publiée sur Chisfis. Excellent service, nous avons passé un excellent séjour !", - "clientName": "Tiana Abie", - "clientLocation": "Malaisie", - "myTrips": "Mes Voyages", - "account": "Compte", - "menu": "Menu", - "gettingStarted": "Commencer", - "explore": "Explorer", - "resources": "Ressources", - "community": "Communauté", - "placeType": "Type de lieu", - "noTours": "Aucun tour disponible" - - } - \ No newline at end of file + "home": "Accueil", + "allTours": "Tous les Tours", + "blogs": "Blogs", + "faq": "FAQ", + "aboutUs": "À Propos de Nous", + "customTour": "Tour Personnalisé", + "searchPlaceholder": "Où aller ?", + "searchDescription": "Partout • N'importe quelle semaine • Ajouter des invités", + "beginAdventure": "Commencez votre aventure spirituelle", + "planPilgrimage": "Planifiez votre pèlerinage facilement. Trouvez les meilleures accommodations, transports et expériences guidées vers les sanctuaires chiites à travers le monde", + "startJourney": "Commencez votre voyage", + "listOfTours": "Liste des Tours", + "exploreTours": "Explorez les tours et accommodations adaptées pour un voyage spirituel et mémorable", + "tourPeriod": "Période du Tour", + "tourPeriodDescription": "Début - Fin", + "guests": "Invités", + "addGuests": "Ajouter des invités", + "available": "Disponible", + "soldOut": "Épuisé", + "showMore": "Montrez-moi plus", + "happeningCities": "Villes Animées", + "costEffectiveAdvertising": "Publicité Rentable", + "costEffectiveDescription": "Avec une annonce gratuite, vous pouvez faire la publicité de votre location sans frais initiaux", + "reachMillions": "Atteignez des millions avec Chisfis", + "reachMillionsDescription": "Des millions de personnes recherchent des lieux uniques où séjourner à travers le monde", + "secureAndSimple": "Securisé et Simple", + "secureDescription": "Une annonce sur Holiday Lettings vous offre un moyen sécurisé et facile de prendre des réservations et des paiements en ligne", + "mobileApps": "Applications Mobiles", + "mobileAppsDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus porttitor nisl, sit amet finibus libero.", + "installation": "Installation", + "releaseNotes": "Notes de Version", + "upgradeGuide": "Guide de Mise à Niveau", + "browserSupport": "Support des Navigateurs", + "editorSupport": "Support de l'Éditeur", + "designFeatures": "Caractéristiques de Design", + "prototyping": "Prototypage", + "designSystems": "Systèmes de Design", + "pricing": "Tarification", + "security": "Sécurité", + "bestPractices": "Meilleures Pratiques", + "support": "Support", + "developers": "Développeurs", + "learnDesign": "Apprendre le Design", + "releases": "Versions", + "discussionForums": "Forums de Discussion", + "codeOfConduct": "Code de Conduite", + "communityResources": "Ressources Communautaires", + "contributing": "Contribuer", + "concurrentMode": "Mode Concurrent", + "goodNews": "Bonnes Nouvelles d'Ailleurs", + "whatPeopleThink": "Voyons ce que les gens pensent de Chisfis", + "testimonial": "Cet endroit est exactement comme sur la photo publiée sur Chisfis. Excellent service, nous avons passé un très bon séjour !", + "clientName": "Tiana Abie", + "clientLocation": "Malaisie", + "myTrips": "Mes Voyages", + "account": "Compte", + "menu": "Menu", + "gettingStarted": "Premiers Pas", + "explore": "Explorer", + "resources": "Ressources", + "community": "Communauté", + "placeType": "Type de Lieu", + "noTours": "Aucun tour disponible", + "itinerary": "Itinéraire", + "itineraryTitle": "Itinéraire", + "total": "Total", + "reserve": "Réserver", + "tourFeatures": "Caractéristiques du Tour", + "tourFeaturesTitle": "Caractéristiques du Tour", + "startRating": "Évaluation de Début", + "listingDetails": "Détails", + "imageAlt": "Image du tour", + "loading": "Chargement...", + "adults": "Adultes", + "adultsDesc": "Âges 13 ou plus", + "children": "Enfants", + "childrenDesc": "Âges 2–12", + "infants": "Bébés", + "infantsDesc": "Âges 0–2", + "traveler": "Voyageur", + "responses": "Réponses ({{count}})", + "submit": "Soumettre", + "cancel": "Annuler", + "relatedPosts": "Articles Connexes", + "aboutUsHeading": "👋 À Propos de Nous.", + "aboutUsSubheading": "Nous sommes une équipe passionnée dédiée à la création d'expériences de voyage inoubliables pour les explorateurs et les rêveurs. Des escapades sereines sur des plages tropicales aux aventures à sensations fortes dans des lieux exotiques, nous concevons des voyages aussi uniques que vous. Rejoignez-nous et explorons le monde, une aventure à la fois !", + "statisticTitle": "🚀 Faits Rapides", + "statisticDescription": "Nous sommes impartiaux et indépendants, et chaque jour nous créons des programmes et du contenu distinctifs de classe mondiale.", + "statisticHeading1": "10 millions", + "statisticSubHeading1": "D'articles ont été publiés à travers le monde (au 30 septembre 2021)", + "statisticHeading2": "100 000", + "statisticSubHeading2": "Utilisateurs enregistrés (au 30 septembre 2021)", + "statisticHeading3": "220+", + "statisticSubHeading3": "Pays et régions où nous sommes présents (au 30 septembre 2021)", + "customTrip": "Voyage Personnalisé", + "guide": "Guide", + "guideDescription": "Tout d'abord, écrivez l'origine de votre départ, puis choisissez la première destination de votre voyage, le nombre de nuits de séjour et le moyen de transport, puis choisissez vos destinations de voyage si vous le souhaitez.", + "beginYourTrip": "Commencez Votre Voyage", + "startDate": "Date de Début", + "numberOfPassengers": "Nombre de Passagers", + "destination": "Destination", + "selectCity": "Sélectionner une Ville", + "transportation": "Transport", + "selectTransport": "Sélectionner le Transport", + "hotel": "Hôtel", + "selectHotel": "Sélectionner l'Hôtel", + "duration": "Durée", + "finishDate": "Date de Fin", + "addDestination": "Ajouter une Destination", + "continue": "Continuer", + "successMessage": "Enregistré avec succès", + "to": "à", + "login": "Se Connecter", + "signup": "S'inscrire" +} diff --git a/src/app/[locale]/(account-pages)/bills/BillCard.tsx b/src/app/[locale]/(account-pages)/bills/BillCard.tsx index 969cbd9..cf1e81a 100644 --- a/src/app/[locale]/(account-pages)/bills/BillCard.tsx +++ b/src/app/[locale]/(account-pages)/bills/BillCard.tsx @@ -1,60 +1,95 @@ // BillCard.tsx import React from "react"; import ButtonPrimary from "@/shared/ButtonPrimary"; -export type BillStatus = "Awaiting Payment" | "Approved" | "Rejected" | "Pending"; +export type BillStatus = + | "awaiting_payment" + | "approved" + | "rejected" + | "pending"; import { BiSolidPlaneAlt } from "react-icons/bi"; import { FaSimCard } from "react-icons/fa"; import { BsCart3 } from "react-icons/bs"; import { MdCurrencyExchange } from "react-icons/md"; export interface Bill { - title: string; - issuedDate: string; - expirationDate: string; + service: string; + created_at: string; + expiration_date: string; amount: number; status: BillStatus; } - interface BillCardProps { bill: Bill; onViewDetail: (bill: Bill) => void; // Add onViewDetail prop } -const statusStyles: { [key in BillStatus]: string } = { - "Awaiting Payment": "bg-yellow-200 text-yellow-700", - Approved: "bg-green-200 text-green-700", - Rejected: "bg-red-200 text-red-700", - Pending: "bg-blue-200 text-blue-700", +const statusStyles: { [key in BillStatus]: JSX.Element } = { + awaiting_payment: ( + + Awaiting Payment + + ), + approved: ( + + Approved + + ), + rejected: ( + + Rejected + + ), + pending: ( + + Pending + + ), }; + const BillCard: React.FC = ({ bill, onViewDetail }) => { + console.log(bill); return ( -
+

- {bill.title.includes("Tour") && } - {bill.title.includes("SIM Card") && } - {bill.title.includes("Shop") && } - {bill.title.includes("Tasrif") && } - {bill.title} + {bill.service.includes("Tour") && ( + + + + )} + {bill.service.includes("SIM Card") && ( + + + + )} + {bill.service.includes("Shop") && ( + + + + )} + {bill.service.includes("Tasrif") && ( + + + + )} + {bill.service}

- - {bill.status} - + {statusStyles[bill.status]}
-
+
Issued Date: - {bill.issuedDate} + {bill.created_at}
-
+
Expiration Date: - {bill.expirationDate} + {bill.expiration_date}
-
+
Tour Invoice Amount: - ${bill.amount.toFixed(2)} + ${bill.amount}
diff --git a/src/app/[locale]/(account-pages)/bills/[slug]/page.tsx b/src/app/[locale]/(account-pages)/bills/[slug]/page.tsx index 6d244d7..9f6abf9 100644 --- a/src/app/[locale]/(account-pages)/bills/[slug]/page.tsx +++ b/src/app/[locale]/(account-pages)/bills/[slug]/page.tsx @@ -1,15 +1,24 @@ -// BillDetailCard.tsx -import React from "react"; +import React, { useState } from "react"; +import axiosInstance from "@/components/api/axios"; import ButtonPrimary from "@/shared/ButtonPrimary"; import Button from "@/shared/Button"; - - -export type BillStatus = "Awaiting Payment" | "Approved" | "Rejected" | "Pending"; +import Input from "@/shared/Input"; +import { useUserContext } from "@/components/contexts/userContext"; +import getImageURL from "@/components/api/getImageURL"; +import { toast, ToastContainer } from "react-toastify"; +import Image from "next/image"; + +export type BillStatus = + | "awaiting_payment" + | "approved" + | "rejected" + | "pending"; export interface Bill { + id: number; title: string; - issuedDate: string; - expirationDate: string; + created_at: string; + expiration_date: string; amount: number; status: BillStatus; passengers: { type: string; count: number }[]; @@ -20,29 +29,84 @@ export interface Bill { size: string; src: string; }; + detail_service: { + passenger_counts: { adults: string; children: string; infants: string }; + }; + transaction_receipt: string; + card_number: string | number; } - - interface BillDetailCardProps { bill: Bill; } -const statusStyles: { [key in BillStatus]: string } = { - "Awaiting Payment": "bg-yellow-200 text-yellow-700", - Approved: "bg-green-200 text-green-700", - Rejected: "bg-red-200 text-red-700", - Pending: "bg-blue-200 text-blue-700", +const statusStyles: { [key in BillStatus]: JSX.Element } = { + awaiting_payment: ( + + Awaiting Payment + + ), + approved: ( + + Approved + + ), + rejected: ( + + Rejected + + ), + pending: ( + + Pending + + ), }; const BillDetailCard: React.FC = ({ bill }) => { + const [uploadedFile, setUploadedFile] = useState(null); + const [loadingUpload, setLoadingUpload] = useState(false); + const [loading, setLoading] = useState(false); + const { user } = useUserContext(); + const handleFileChange = async (e: React.ChangeEvent) => { + setLoadingUpload(true); + const file = e.target.files?.[0]; + if (file) { + const uploadedFile = await getImageURL(file); + setUploadedFile(uploadedFile.url); + setLoadingUpload(false); + } + }; + + const handleSubmit = () => { + setLoading(true); + if (uploadedFile) { + const formData = new FormData(); + formData.append("transaction_receipt", uploadedFile); + axiosInstance + .patch(`/api/factors/update/${bill.id}/`, formData, { + headers: { + Authorization: `token ${user.token}`, + }, + }) + .then(() => { + toast.success("Transaction receipt updated successfully"); + setLoading(false); + }) + .catch(() => { + toast.error("Error updating transaction receipt"); + setLoading(false); + }); + } else { + console.log("No new file to upload"); + } + }; + return ( -
+

{bill.title}

- - {bill.status} - + {statusStyles[bill.status]}
{bill.message && ( @@ -52,23 +116,33 @@ const BillDetailCard: React.FC = ({ bill }) => {
)} -
+
Issued Date: - {bill.issuedDate} + {bill.created_at}
Expiration Date: - {bill.expirationDate} + {bill.expiration_date}

Number of Passengers

- {bill.passengers.map((p, index) => ( -
- #{p.count} ({p.type}) -
- ))} +
+ + # {bill.detail_service.passenger_counts.adults} (Adults) + +
+
+ + # {bill.detail_service.passenger_counts.children} (Children) + +
+
+ + # {bill.detail_service.passenger_counts.infants} (Infants) + +
@@ -78,8 +152,10 @@ const BillDetailCard: React.FC = ({ bill }) => {

Account Number

-
- {bill.accountNumber} +
+ + {bill.card_number} +
@@ -87,25 +163,60 @@ const BillDetailCard: React.FC = ({ bill }) => { {bill.uploadedImage ? (

Uploaded Image

- Uploaded + Uploaded
{bill.uploadedImage.name} - {bill.uploadedImage.size} + + {bill.uploadedImage.size} +
) : (
- -
- - No File Selected + +
+ + {loadingUpload &&

Loading ...

} + {bill.transaction_receipt ? ( + + Current Receipt + + ) : ( + + No File Selected + + )}
)}
- Submit + + Submit + +
); }; diff --git a/src/app/[locale]/(account-pages)/bills/page.tsx b/src/app/[locale]/(account-pages)/bills/page.tsx index 80d0a8c..83a64aa 100644 --- a/src/app/[locale]/(account-pages)/bills/page.tsx +++ b/src/app/[locale]/(account-pages)/bills/page.tsx @@ -1,12 +1,18 @@ // BillsPage.tsx -"use client" -import React, { useState } from "react"; +"use client"; +import React, { useEffect, useState } from "react"; import BillCard from "./BillCard"; import BillDetailCard from "./[slug]/page"; - +import axiosInstance from "@/components/api/axios"; +import { useUserContext } from "@/components/contexts/userContext"; +import { headers } from "next/dist/client/components/headers"; // types.ts -export type BillStatus = "Awaiting Payment" | "Approved" | "Rejected" | "Pending"; +export type BillStatus = + | "Awaiting Payment" + | "Approved" + | "Rejected" + | "Pending"; export interface Bill { title: string; @@ -14,68 +20,68 @@ export interface Bill { expirationDate: string; amount: number; status: BillStatus; - passengers : {} - accountNumber: string, - message? : string - + passengers: {}; + accountNumber: string; + message?: string; } - -const bills: Bill[] = [ - { - title: "Karbala Tour Bill", - issuedDate: "12 Jan 2023", - expirationDate: "10 Jan 2023", - amount: 960, - status: "Awaiting Payment", - passengers: [ - { type: "Adult", count: 3 }, - { type: "Child", count: 2 }, - { type: "Infant", count: 1 }, - ], - accountNumber: "123-456-7890-0123", - }, - { - title: "SIM Card Bill", - issuedDate: "12 Jan 2023", - expirationDate: "10 Jan 2023", - amount: 960, - status: "Approved", - passengers: [ - { type: "Adult", count: 2 }, - { type: "Child", count: 1 }, - ], - accountNumber: "987-654-3210-0123", - }, - { - title: "Shop Bill", - issuedDate: "12 Jan 2023", - expirationDate: "10 Jan 2023", - amount: 960, - status: "Rejected", - passengers: [ - { type: "Adult", count: 1 }, - ], - accountNumber: "456-789-0123-4567", - message: - "The uploaded image does not meet the required quality standards. Please use a higher-resolution photo.", - }, - { - title: "Tasrif Bill", - issuedDate: "12 Jan 2023", - expirationDate: "10 Jan 2023", - amount: 960, - status: "Pending", - passengers: [ - { type: "Adult", count: 3 }, - { type: "Child", count: 2 }, - ], - accountNumber: "321-654-9870-1234", - }, -]; +// const bills: Bill[] = [ +// { +// title: "Karbala Tour Bill", +// issuedDate: "12 Jan 2023", +// expirationDate: "10 Jan 2023", +// amount: 960, +// status: "Awaiting Payment", +// passengers: [ +// { type: "Adult", count: 3 }, +// { type: "Child", count: 2 }, +// { type: "Infant", count: 1 }, +// ], +// accountNumber: "123-456-7890-0123", +// }, +// { +// title: "SIM Card Bill", +// issuedDate: "12 Jan 2023", +// expirationDate: "10 Jan 2023", +// amount: 960, +// status: "Approved", +// passengers: [ +// { type: "Adult", count: 2 }, +// { type: "Child", count: 1 }, +// ], +// accountNumber: "987-654-3210-0123", +// }, +// { +// title: "Shop Bill", +// issuedDate: "12 Jan 2023", +// expirationDate: "10 Jan 2023", +// amount: 960, +// status: "Rejected", +// passengers: [ +// { type: "Adult", count: 1 }, +// ], +// accountNumber: "456-789-0123-4567", +// message: +// "The uploaded image does not meet the required quality standards. Please use a higher-resolution photo.", +// }, +// { +// title: "Tasrif Bill", +// issuedDate: "12 Jan 2023", +// expirationDate: "10 Jan 2023", +// amount: 960, +// status: "Pending", +// passengers: [ +// { type: "Adult", count: 3 }, +// { type: "Child", count: 2 }, +// ], +// accountNumber: "321-654-9870-1234", +// }, +// ]; const BillsPage: React.FC = () => { + const [bills, setBills] = useState([]); const [selectedBill, setSelectedBill] = useState(null); + const { user } = useUserContext(); const handleViewDetail = (bill: Bill) => { setSelectedBill(bill); @@ -84,9 +90,23 @@ const BillsPage: React.FC = () => { const handleBackToList = () => { setSelectedBill(null); }; + useEffect(() => { + axiosInstance("/api/factors/list/", { + headers: { + Authorization: `token ${user.token}`, + }, + }) + .then((response) => { + console.log(response); + setBills(response.data.results); + }) + .catch((error) => { + console.log(error.message); + }); + }, []); return ( -
+
{selectedBill ? (