├── lib
    ├── config
    │   ├── locales.ts
    │   ├── dates.ts
    │   └── money.ts
    ├── api
    │   ├── resources
    │   │   ├── country.ts
    │   │   ├── taxon.ts
    │   │   ├── common.ts
    │   │   ├── product.ts
    │   │   ├── customer.ts
    │   │   └── cart.ts
    │   ├── urls.ts
    │   └── client.ts
    ├── payment
    │   └── getStripe.ts
    ├── resource
    │   ├── product.ts
    │   ├── taxon.ts
    │   ├── cart.ts
    │   └── customer.ts
    └── router
    │   └── router.ts
├── .vscode
    └── settings.json
├── next-env.d.ts
├── types
    ├── resources
    │   ├── countryTypes.ts
    │   ├── imageTypes.ts
    │   ├── cartTypes.ts
    │   ├── common.ts
    │   ├── taxonTypes.ts
    │   ├── productTypes.ts
    │   ├── customerTypes.ts
    │   └── orderTypes.ts
    └── fetchTypes.ts
├── .env
├── public
    └── assets
    │   └── images
    │       └── sylius.png
├── next.config.js
├── components
    ├── layout
    │   ├── Footer.tsx
    │   ├── Layout.tsx
    │   ├── MainMenu.tsx
    │   ├── breadcrumb.tsx
    │   ├── Search.code-search
    │   └── Header.tsx
    ├── LoadingContext.ts
    ├── CartContext.ts
    ├── MessageContext.ts
    ├── features
    │   ├── LoadingOverlay.tsx
    │   ├── Newsletter.tsx
    │   └── SimpleForm.tsx
    ├── Product
    │   ├── ProductTabs.tsx
    │   ├── ProductsList.tsx
    │   ├── RelatedProducts.tsx
    │   ├── ProductImages.tsx
    │   ├── ProductList.tsx
    │   ├── ProductDetails.tsx
    │   ├── SingleVariant.tsx
    │   └── MultipleVariants.tsx
    ├── account
    │   └── AccountNav.tsx
    └── cart
    │   ├── CartResume.tsx
    │   └── CartItems.tsx
├── .gitignore
├── tsconfig.json
├── pages
    ├── _document.tsx
    ├── 404.tsx
    ├── _app.tsx
    ├── 500.tsx
    ├── cart
    │   ├── failed.tsx
    │   ├── confirmation.tsx
    │   ├── paiement.tsx
    │   ├── index.tsx
    │   └── adresses.tsx
    ├── account
    │   ├── index.tsx
    │   ├── login.tsx
    │   ├── register.tsx
    │   ├── password.tsx
    │   └── orders.tsx
    ├── categories
    │   └── [categorySlug]
    │   │   ├── index.tsx
    │   │   └── [productSlug].tsx
    ├── index.tsx
    ├── search.tsx
    └── forgotten-password.tsx
├── package.json
└── README.md


/lib/config/locales.ts:
--------------------------------------------------------------------------------
1 | export const getLocale = () => {
2 |     return 'fr_FR';
3 | }


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "typescript.tsdk": "node_modules/typescript/lib"
3 | }


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/types/global" />
3 | 


--------------------------------------------------------------------------------
/types/resources/countryTypes.ts:
--------------------------------------------------------------------------------
1 | export interface ICountry {
2 |     code: string;
3 |     provinces: []
4 | }


--------------------------------------------------------------------------------
/types/resources/imageTypes.ts:
--------------------------------------------------------------------------------
1 | export interface IResourceImage{
2 |     id: string;
3 |     path: string;
4 | }


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_API_RESOURCE_BASE_URL=
2 | NEXT_PUBLIC_API_PUBLIC_URL=
3 | 
4 | API_HOST_NAME=
5 | 
6 | NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
7 | 
8 | MAILCHIMP_URL=


--------------------------------------------------------------------------------
/public/assets/images/sylius.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidroberto/-NOT-MAINTAINED-sylius-next-boilerplate-theme/HEAD/public/assets/images/sylius.png


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     serverRuntimeConfig: {
3 |         PROJECT_ROOT: __dirname
4 |     },
5 |     images: {
6 |         domains: [process.env.API_HOST_NAME]
7 |     }
8 | }


--------------------------------------------------------------------------------
/types/resources/cartTypes.ts:
--------------------------------------------------------------------------------
1 | import { IOrder, IOrderAddresses } from "./orderTypes";
2 | 
3 | export interface IAddAddressesToCart {
4 |     (adresses: IOrderAddresses & { email: string }): Promise<IOrder>
5 | }


--------------------------------------------------------------------------------
/components/layout/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Footer = () => {
 4 |     return (
 5 |         <footer>
 6 |             
 7 |         </footer>
 8 |     );
 9 | }
10 | 
11 | export default Footer;


--------------------------------------------------------------------------------
/types/resources/common.ts:
--------------------------------------------------------------------------------
 1 | export interface IResource {
 2 |     translations: {
 3 |         [key: string]: any
 4 |     }
 5 | }
 6 | 
 7 | export interface IMessage {
 8 |     message: string;
 9 |     type: string;
10 | }


--------------------------------------------------------------------------------
/lib/config/dates.ts:
--------------------------------------------------------------------------------
1 | export const formatDateToLocale = (dateString: string): string => {
2 |     const timestamp = Date.parse(dateString);
3 |     const dateObject = new Date(timestamp);
4 |     return dateObject.toLocaleDateString();
5 | }


--------------------------------------------------------------------------------
/lib/api/resources/country.ts:
--------------------------------------------------------------------------------
1 | import { getResource } from '../client';
2 | import { ICountry } from '../../../types/resources/countryTypes';
3 | 
4 | export const getCountries = async (): Promise<ICountry[]> => {
5 |     return await getResource('shop/countries');
6 | }


--------------------------------------------------------------------------------
/lib/config/money.ts:
--------------------------------------------------------------------------------
1 | export const formatMoney = (price: number): string => {
2 | 
3 |     let formatter = new Intl.NumberFormat('fr-FR', {
4 |         style: 'currency',
5 |         currency: 'EUR',
6 |       });
7 | 
8 |     return formatter.format(price / 100);
9 | }


--------------------------------------------------------------------------------
/components/LoadingContext.ts:
--------------------------------------------------------------------------------
 1 | import { createContext } from 'react';
 2 | 
 3 | interface ILoadingContext {
 4 |     isLoading: boolean,
 5 |     setLoading: (loading: boolean ) => void
 6 | }
 7 | 
 8 | const LoadingContext = createContext(<ILoadingContext>{
 9 |     isLoading: false,
10 |     setLoading: (loading: boolean ) => {}
11 | });
12 | 
13 | 
14 | export default LoadingContext;


--------------------------------------------------------------------------------
/lib/payment/getStripe.ts:
--------------------------------------------------------------------------------
 1 | import { Stripe, loadStripe } from '@stripe/stripe-js';
 2 | 
 3 | let stripePromise: Promise<Stripe | null>;
 4 | 
 5 | const getStripe = () => {
 6 |     if (!stripePromise) {
 7 |         stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY as string);
 8 |     }
 9 |     return stripePromise;
10 | };
11 |  
12 |  export default getStripe;
13 |  


--------------------------------------------------------------------------------
/components/CartContext.ts:
--------------------------------------------------------------------------------
 1 | import { createContext } from 'react';
 2 | import { IOrder } from '../types/resources/orderTypes';
 3 | 
 4 | interface ICartContext {
 5 |     cart: IOrder | null,
 6 |     setCart: (order: IOrder | null ) => void
 7 | }
 8 | 
 9 | const CartContext = createContext(<ICartContext>{
10 |     cart: null,
11 |     setCart: (order: IOrder | null ) => {}
12 | });
13 | 
14 | 
15 | export default CartContext;


--------------------------------------------------------------------------------
/components/MessageContext.ts:
--------------------------------------------------------------------------------
 1 | import { createContext } from 'react';
 2 | import { IMessage } from '../types/resources/common';
 3 | 
 4 | interface IMessageContext {
 5 |     message: IMessage | null,
 6 |     setMessage: (message: IMessage | null ) => void
 7 | }
 8 | 
 9 | const MessageContext = createContext(<IMessageContext>{
10 |     message: null,
11 |     setMessage: (message: IMessage | null ) => {}
12 | });
13 | 
14 | 
15 | export default MessageContext;


--------------------------------------------------------------------------------
/lib/api/resources/taxon.ts:
--------------------------------------------------------------------------------
 1 | import { getResource } from "../client";
 2 | import { ITaxon } from '../../../types/resources/taxonTypes';
 3 | 
 4 | export const getAllTaxons = async (): Promise<ITaxon[]> => {
 5 |     let taxons = await getResource('shop/taxons');
 6 | 
 7 |     taxons = taxons.filter(function(taxon: ITaxon) {
 8 |         if (taxon.code !== "MENU_CATEGORY") {
 9 |             return taxon;
10 |         }
11 |     });
12 | 
13 |     return taxons;
14 | }


--------------------------------------------------------------------------------
/lib/api/resources/common.ts:
--------------------------------------------------------------------------------
 1 | import { IResource } from '../../../types/resources/common';
 2 | import { getLocale } from '../../config/locales';
 3 | 
 4 | export const getResourceTranslation = (resource: IResource | null) => {
 5 | 
 6 |     if (resource) {
 7 |         if (getLocale() in resource.translations) {
 8 |             return resource.translations[getLocale()]
 9 |         }
10 |         return resource.translations[Object.keys(resource.translations)[0]];
11 |     }
12 | 
13 |     return null   
14 | }


--------------------------------------------------------------------------------
/components/features/LoadingOverlay.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | interface ILoadingOverlayProps {
 4 |     
 5 | }
 6 | 
 7 | const LoadingOverlay: React.FC<ILoadingOverlayProps> = () => {
 8 |     return (
 9 |         <div style={{
10 |             zIndex: 9,
11 |             backgroundColor: 'white',
12 |             position: 'fixed',
13 |             opacity: '0.7',
14 |             width: '100%',
15 |             height: '100vh'
16 |         }}>
17 |         </div>
18 |     )
19 | }
20 | 
21 | export default LoadingOverlay;


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/types/resources/taxonTypes.ts:
--------------------------------------------------------------------------------
 1 | import { IResource } from './common';
 2 | 
 3 | export interface ITaxonSlugTranslation {
 4 |     translations: {
 5 |         [key: string]: {
 6 |             slug: string
 7 |         }
 8 |     }
 9 | }
10 | 
11 | export interface ITaxonTranslation {
12 |     id: number;
13 |     name: string;
14 |     slug: string;
15 |     description: string;
16 | }
17 | 
18 | export interface ITaxon extends IResource {
19 |     id: number;
20 |     code: string;
21 | }
22 | 
23 | export interface IProductTaxon {
24 |     id: number;
25 |     taxon: string;
26 | }


--------------------------------------------------------------------------------
/lib/resource/product.ts:
--------------------------------------------------------------------------------
 1 | import { IProduct } from '../../types/resources/productTypes';
 2 | import { IResourceImage } from '../../types/resources/imageTypes';
 3 | 
 4 | export const hasPromo = (product: IProduct): boolean => {
 5 |     if (product.variants[0].originalPrice &&
 6 |         product.variants[0].originalPrice !== product.variants[0].price
 7 |     ) {
 8 |         return true;
 9 |     }
10 | 
11 |     return false;
12 | }
13 | 
14 | export const sortIProductmagesById = (productImages: IResourceImage[]) => {
15 |     return productImages.sort((a: any, b: any) => a.id - b.id);
16 | }


--------------------------------------------------------------------------------
/lib/resource/taxon.ts:
--------------------------------------------------------------------------------
 1 | import { ITaxon } from "../../types/resources/taxonTypes";
 2 | import { getLocale } from "../config/locales";
 3 | import { getResourceTranslation } from '../api/resources/common';
 4 | 
 5 | export const getTaxonBySlugFromCollection = (taxons: ITaxon[], taxonTranslatedSlug: string): ITaxon | null => {
 6 |     let currentTaxon = null;
 7 | 
 8 |     taxons.map((taxon: ITaxon) => {
 9 |         if (getResourceTranslation(taxon).slug === taxonTranslatedSlug) {
10 |             currentTaxon = taxon;
11 |         }
12 |     });
13 | 
14 |     return currentTaxon;
15 | }
16 | 
17 | 


--------------------------------------------------------------------------------
/components/Product/ProductTabs.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { IProduct } from '../../types/resources/productTypes';
 3 | import { getResourceTranslation } from '../../lib/api/resources/common';
 4 | 
 5 | 
 6 | interface IProductTabs {
 7 |     product: IProduct;
 8 | }
 9 | 
10 | const ProductTabs: React.FC<IProductTabs> = ({ product }) => {
11 | 
12 |     return (
13 |         <>
14 |             <h3>Description</h3>
15 |             <div dangerouslySetInnerHTML={{__html: getResourceTranslation(product).description}}></div>
16 |         </>
17 |     );
18 | }
19 | 
20 | export default ProductTabs;


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": true,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "preserve"
20 |   },
21 |   "include": [
22 |     "next-env.d.ts",
23 |     "**/*.ts",
24 |     "**/*.tsx"
25 |   ],
26 |   "exclude": [
27 |     "node_modules"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/components/Product/ProductsList.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { IProduct } from '../../types/resources/productTypes';
 3 | import ProductList from './ProductList';
 4 | 
 5 | 
 6 | interface IProductsListProps {
 7 |     products: IProduct[] | null
 8 | }
 9 | 
10 | const ProductsList: React.FC<IProductsListProps> = ( { products } ) => {
11 | 
12 |     return (
13 |         <>
14 |             {products?.map((product: IProduct) => {
15 |                 return(
16 |                     <article key={ product.id }>
17 |                         <ProductList product={product} />
18 |                     </article>
19 |                 );
20 |             })}
21 |         </>
22 |     );
23 | }
24 | 
25 | 
26 | export default ProductsList;


--------------------------------------------------------------------------------
/components/Product/RelatedProducts.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { IProduct } from '../../types/resources/productTypes';
 3 | import ProductList from './ProductList';
 4 | 
 5 | interface IRelatedProductsProps {
 6 |     products: IProduct[] | null
 7 | }
 8 | 
 9 | const RelatedProducts: React.FC<IRelatedProductsProps> = ( { products } ) => {
10 | 
11 |     return (
12 |         <>
13 |             {products?.map((product: IProduct, index) => {
14 |                 return (
15 |                     <div key={index}>
16 |                         <ProductList product={product}/>
17 |                     </div>
18 |                 );
19 |             })}
20 |         </> 
21 |     );
22 | }
23 | 
24 | 
25 | export default RelatedProducts;


--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import Document, { Html, Head, Main, NextScript } from 'next/document';
 2 | 
 3 | class MyDocument extends Document {
 4 |     render() {
 5 |         return (
 6 |             <Html>
 7 |                 <Head>
 8 |                     
 9 |                     <meta name="title" content="Next.js / Typescript boilerplate theme for Sylius new API"/>
10 |                     <meta name="description" content="Next.js / Typescript boilerplate theme for Sylius new API" />
11 | 
12 |                 </Head>
13 |                 <body style={{position: "relative"}}>
14 |                     <Main />
15 |                     <NextScript />
16 |                 </body>
17 |             </Html>
18 |         )
19 |     }
20 | }
21 | 
22 | export default MyDocument;


--------------------------------------------------------------------------------
/components/features/Newsletter.tsx:
--------------------------------------------------------------------------------
 1 | import MailchimpSubscribe, { EmailFormFields } from "react-mailchimp-subscribe";
 2 | import SimpleForm from './SimpleForm';
 3 | 
 4 | interface IProps {
 5 |   mailchimpUrl: string
 6 | }  
 7 | 
 8 | const Newsletter: React.FC<IProps> = ({ mailchimpUrl }) => (
 9 |   <MailchimpSubscribe
10 |     url={mailchimpUrl}
11 |     render={(
12 |         { subscribe, status, message }
13 |     ) => (
14 |        <>
15 |           <h3 >Subscribe to the newsletter: </h3>
16 |             <SimpleForm 
17 |                 status={status}
18 |                 message={message}
19 |                 onSubmitted={(formData: EmailFormFields) => subscribe(formData)} 
20 |             />
21 |       </>
22 |     )}
23 |   />
24 | )
25 | 
26 | export default Newsletter;


--------------------------------------------------------------------------------
/types/resources/productTypes.ts:
--------------------------------------------------------------------------------
 1 | import { IResourceImage } from "./imageTypes";
 2 | import { ITaxonSlugTranslation } from "./taxonTypes";
 3 | 
 4 | interface IProductTranslation {
 5 |     id: number;
 6 |     name: string;
 7 |     slug: string;
 8 |     description: string;
 9 |     shortDescription: string;
10 | }
11 | 
12 | interface IProductVariant {
13 |     id: number;
14 |     code: string;
15 |     translations: {
16 |         [key: string]: {
17 |             name: string;
18 |         }
19 |     }
20 |     price: number;
21 |     originalPrice: number;
22 |     enabled: boolean;
23 |     onHand: number;
24 | }
25 | 
26 | export interface IProduct {
27 |     id: number;
28 |     code: string;
29 |     mainTaxon: ITaxonSlugTranslation;
30 |     translations: {
31 |         [key: string]: IProductTranslation
32 |     };
33 |     images: IResourceImage[];
34 |     variants: IProductVariant[];
35 |     enabled: boolean;
36 | }


--------------------------------------------------------------------------------
/components/layout/Layout.tsx:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import Header from './Header';
 3 | import Footer from './Footer';
 4 | import { ITaxon } from '../../types/resources/taxonTypes';
 5 | import { ReactNode, useContext } from 'react';
 6 | import LoadingOverlay from '../features/LoadingOverlay';
 7 | import LoadingContext from '../LoadingContext';
 8 | 
 9 | interface LayoutProps {
10 |     taxons: ITaxon[],
11 |     children: ReactNode
12 | }
13 | 
14 | const Layout: React.FC<LayoutProps> = ({ children, taxons }: LayoutProps) => {
15 | 
16 |     const { isLoading } = useContext(LoadingContext);
17 | 
18 |     return (
19 |         <>
20 |             {isLoading &&
21 |                 <LoadingOverlay />
22 |             }
23 |             <Header taxons={taxons} />
24 |             <main>
25 |                 {children}
26 |             </main>
27 |             <Footer />
28 |         </>
29 |     );
30 | }
31 | 
32 | export default Layout;


--------------------------------------------------------------------------------
/components/layout/MainMenu.tsx:
--------------------------------------------------------------------------------
 1 | import { ITaxon } from '../../types/resources/taxonTypes';
 2 | import { getTaxonRelativeUrl } from '../../lib/api/urls';
 3 | import Link from 'next/link';
 4 | import { getResourceTranslation } from '../../lib/api/resources/common';
 5 | 
 6 | interface IMainMenuProps {
 7 |     taxons: ITaxon[]
 8 | }
 9 | 
10 | const MainMenu: React.FC<IMainMenuProps> = ({ taxons }) => {
11 |     return (
12 |         <nav>
13 |             <ul>
14 |                 {taxons.map((taxon, index) => {
15 |                     return(
16 |                         <li key={index}>
17 |                             <Link href={getTaxonRelativeUrl(taxon)}>
18 |                                 <a>{getResourceTranslation(taxon).name}</a>
19 |                             </Link>
20 |                         </li>
21 |                     );
22 |                 })}
23 |             </ul>
24 |         </nav>
25 | 
26 |     );
27 | }
28 | 
29 | export default MainMenu;
30 | 
31 | 


--------------------------------------------------------------------------------
/components/Product/ProductImages.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Image from 'next/image';
 3 | import { IProduct } from '../../types/resources/productTypes';
 4 | import { getRessourceImageUrl } from '../../lib/api/urls';
 5 | import { getResourceTranslation } from '../../lib/api/resources/common';
 6 | 
 7 | interface IProductImagesProps {
 8 |     product: IProduct;
 9 | }
10 | 
11 | const ProductImages: React.FC<IProductImagesProps> = ({ product }) => {
12 | 
13 | 
14 |     return (
15 |         <>
16 |             {
17 |                 product.images.map( ( image, index ) =>  
18 |                 <div>
19 |                     <Image
20 |                         src={getRessourceImageUrl(image.path)}
21 |                         alt={getResourceTranslation(product).name} 
22 |                         width="200px"
23 |                         height="200px"
24 |                     />
25 |                 </div>
26 |                 )
27 |             }       
28 |         </>
29 |     )
30 | };
31 | 
32 | export default ProductImages;


--------------------------------------------------------------------------------
/components/layout/breadcrumb.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import React from 'react';
 3 | 
 4 | interface IParents {
 5 |     title: string;
 6 |     path: string;
 7 | }
 8 | 
 9 | interface IBreadcrumbProps {
10 |     parents: IParents[]
11 |     title: string;
12 | 
13 | }
14 | 
15 | const Breadcrumb: React.FC<IBreadcrumbProps> = ( {parents, title} ) => {
16 | 
17 |     return (
18 |         <nav aria-label="breadcrumb" >
19 |             <ol>
20 |                 <li>
21 |                     <Link href={'/'}>
22 |                         <a>Accueil</a>
23 |                     </Link>
24 |                 </li>
25 | 
26 |                 { parents.map( (parent, index) => (
27 |                     <li key={index}>
28 |                         <Link href={parent.path}>
29 |                             <a>{parent.title}</a>
30 |                         </Link>
31 |                     </li>
32 |                 ) ) }
33 |                 <li aria-current="page">{ title }</li>
34 |             </ol>
35 |         </nav>
36 |     );
37 | }
38 | 
39 | export default Breadcrumb;


--------------------------------------------------------------------------------
/components/layout/Search.code-search:
--------------------------------------------------------------------------------
 1 | # Query: /panier
 2 | # ContextLines: 1
 3 | 
 4 | 6 results - 4 files
 5 | 
 6 | components/layout/Header.tsx:
 7 |   77                  
 8 |   78:                 <Link href={"/cart"}>
 9 |   79                      <a>
10 | 
11 | pages/cart/adresses.tsx:
12 |    55                  if (canOrderComplete(order)) {
13 |    56:                     router.push('/cart/paiement');
14 |    57                  } else {
15 | 
16 |   110                          'title': 'My cart',
17 |   111:                         'path': '/cart'
18 |   112                      }
19 | 
20 | pages/cart/index.tsx:
21 |   102              { customer ?
22 |   103:                 <Link href={'/cart/adresses'}>
23 |   104                      <a>Submit the cart</a>
24 | 
25 |   111                      <p>or</p>
26 |   112:                     <Link href={'/cart/adresses'}>
27 |   113                          <a>Submit the cart without login</a>
28 | 
29 | pages/cart/paiement.tsx:
30 |   70                          'title': 'My cart',
31 |   71:                         'path': '/cart'
32 |   72                      }
33 | 


--------------------------------------------------------------------------------
/pages/404.tsx:
--------------------------------------------------------------------------------
 1 | import { InferGetStaticPropsType } from "next";
 2 | import { getAllTaxons } from "../lib/api/resources/taxon";
 3 | import Layout from "../components/layout/Layout";
 4 | import { useContext, useEffect } from 'react';
 5 | import MessageContext from "../components/MessageContext";
 6 | import { Helmet } from 'react-helmet';
 7 | import PageHeader from '../components/layout/PageHeader';
 8 | import Breadcrumb from "../components/layout/breadcrumb";
 9 | 
10 | const Custom404 = (
11 |     { taxons }: InferGetStaticPropsType<typeof getStaticProps>
12 | ) => {
13 | 
14 |     const { setMessage } = useContext(MessageContext);
15 |     
16 |     useEffect(() => {
17 |         setMessage(null);
18 |     }, []); 
19 | 
20 |     return (
21 |         <Layout taxons={taxons}>
22 | 
23 |         <Helmet>
24 |             <title>Page not found</title>
25 |         </Helmet>
26 | 
27 |         <div>
28 |             <h1>Page not found</h1>
29 |         </div>
30 |     </Layout>
31 |     );
32 | }
33 | 
34 | export const getStaticProps = async () => {
35 |     const taxons = await getAllTaxons();
36 | 
37 |     return {
38 |         props: {
39 |             taxons
40 |         }
41 |     }
42 | }
43 | 
44 | export default Custom404;


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import { AppProps } from 'next/app';
 2 | import React, {useState} from 'react';
 3 | import CartContext from '../components/CartContext';
 4 | import MessageContext from '../components/MessageContext';
 5 | import { IMessage } from '../types/resources/common';
 6 | import { IOrder } from '../types/resources/orderTypes';
 7 | 
 8 | import LoadingContext from '../components/LoadingContext';
 9 | 
10 | 
11 | function MyApp({ Component, pageProps }: AppProps) {
12 |   
13 |   const [cart, setCart] = useState<IOrder | null>(null);
14 |   const cartValue = {cart, setCart}
15 | 
16 |   const [message, setMessage] = useState<IMessage | null>(null);
17 |   const messageValue = {message, setMessage}
18 | 
19 |   const [isLoading, setLoading] = useState<boolean>(false);
20 |   const loadingValue = {isLoading, setLoading}
21 | 
22 |   return(
23 |       <CartContext.Provider value={cartValue}>
24 |         <MessageContext.Provider value={messageValue}>
25 |           <LoadingContext.Provider value={loadingValue}>
26 |             <Component {...pageProps} />
27 |           </LoadingContext.Provider>
28 |         </MessageContext.Provider>
29 |       </CartContext.Provider>
30 |   )
31 | 
32 | }
33 | 
34 | 
35 | export default MyApp
36 | 


--------------------------------------------------------------------------------
/pages/500.tsx:
--------------------------------------------------------------------------------
 1 | import { InferGetStaticPropsType } from "next";
 2 | import { getAllTaxons } from "../lib/api/resources/taxon";
 3 | import Layout from "../components/layout/Layout";
 4 | import { useContext, useEffect } from 'react';
 5 | import MessageContext from "../components/MessageContext";
 6 | import { Helmet } from 'react-helmet';
 7 | import PageHeader from '../components/layout/PageHeader';
 8 | import Breadcrumb from "../components/layout/breadcrumb";
 9 | 
10 | const Custom500 = (
11 |     { taxons }: InferGetStaticPropsType<typeof getStaticProps>
12 | ) => {
13 | 
14 |     const { setMessage } = useContext(MessageContext);
15 |     
16 |     useEffect(() => {
17 |         setMessage(null);
18 |     }, []); 
19 | 
20 |     return (
21 |         <Layout taxons={taxons}>
22 | 
23 |         <Helmet>
24 |             <title>Internal server error</title>
25 |         </Helmet>
26 | 
27 |         <div>
28 |             <h1>Internal server error</h1>
29 |         </div>
30 |     </Layout>
31 |     );
32 | }
33 | 
34 | export const getStaticProps = async () => {
35 |     const taxons = await getAllTaxons();
36 | 
37 |     return {
38 |         props: {
39 |             taxons
40 |         }
41 |     }
42 | }
43 | 
44 | export default Custom500;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cloralys-front",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "@stripe/react-stripe-js": "1.1.2",
12 |     "@stripe/stripe-js": "1.5.0",
13 |     "@types/react-owl-carousel": "^2.3.0",
14 |     "i18n-iso-countries": "^6.7.0",
15 |     "js-cookie": "^2.2.1",
16 |     "jwt-decode": "^3.1.2",
17 |     "next": "10.1.3",
18 |     "react": "17.0.2",
19 |     "react-dom": "17.0.2",
20 |     "react-helmet": "^6.1.0",
21 |     "react-image-lightbox": "^5.1.1",
22 |     "react-image-magnifiers": "^1.4.0",
23 |     "react-lazy-load-image-component": "^1.5.1",
24 |     "react-mailchimp-subscribe": "^2.1.3",
25 |     "react-tabs": "^3.2.2",
26 |     "sass": "^1.32.12"
27 |   },
28 |   "devDependencies": {
29 |     "@types/js-cookie": "^2.2.6",
30 |     "@types/node": "^14.14.37",
31 |     "@types/react": "^17.0.3",
32 |     "@types/react-helmet": "^6.1.1",
33 |     "@types/react-image-magnifiers": "^1.3.0",
34 |     "@types/react-lazy-load-image-component": "^1.5.1",
35 |     "@types/react-mailchimp-subscribe": "^2.1.0",
36 |     "@types/react-tabs": "^2.3.2",
37 |     "typescript": "^4.2.3"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/types/resources/customerTypes.ts:
--------------------------------------------------------------------------------
 1 | export interface IRegisterCustomer {
 2 |     "firstName": string,
 3 |     "lastName": string,
 4 |     "email": string,
 5 |     "password": string
 6 | }
 7 | 
 8 | export interface IReinitPasswordRequest {
 9 |     "email": string
10 | }
11 | 
12 | export interface INewPasswordAfterForgot {
13 |     "newPassword": string;
14 |     "token": string;
15 | }
16 | 
17 | export interface IAuthenticateCustomer {
18 |     "email": string,
19 |     "password": string
20 | }
21 | 
22 | export interface ICustomerTokenPayload {
23 |     "id": number;
24 |     "roles": [];
25 |     "username": string;
26 | }
27 | 
28 | export interface ICustomer {
29 |     "defaultAddress": string;
30 |     "email": string;
31 |     "firstName": string;
32 |     "fullName": string;
33 |     "lastName": string;
34 | }
35 | 
36 | export interface ICustomerChangePasswords {
37 |     "newPassword": string;
38 |     "confirmNewPassword": string;
39 |     "currentPassword": string;
40 | }
41 | 
42 | export interface ICustomerInformations {
43 |     "email": string;
44 |     "firstName": string;
45 |     "lastName": string;
46 | }
47 | 
48 | export interface ICustomerOrder {
49 |     "paymentState": string;
50 |     "shippingState": string;
51 |     "id": number;
52 |     "number": string;
53 |     "total": number;
54 |     "createdAt": string;
55 | }


--------------------------------------------------------------------------------
/components/Product/ProductList.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { IProduct } from '../../types/resources/productTypes';
 3 | import { getRessourceImageUrl, getProductRelativeUrl } from '../../lib/api/urls';
 4 | import { getResourceTranslation } from '../../lib/api/resources/common';
 5 | import Link from 'next/link';
 6 | import { formatMoney } from '../../lib/config/money';
 7 | import { sortIProductmagesById } from '../../lib/resource/product';
 8 | import Image from 'next/image';
 9 | 
10 | interface IProductListProps {
11 |     product: IProduct
12 | }
13 | 
14 | const ProductList: React.FC<IProductListProps> = ({ product }) => {
15 | 
16 |     const images = sortIProductmagesById(product.images);
17 | 
18 |     return (
19 |         <Link href={getProductRelativeUrl(product)}>
20 |             <a>
21 |                 <Image
22 |                     src={getRessourceImageUrl(images[0].path)}
23 |                     alt={getResourceTranslation(product).name} 
24 |                     width="200px"
25 |                     height="200px"
26 |                 />
27 |                 <p>{getResourceTranslation(product.mainTaxon)?.name}</p>
28 |                 <p>{getResourceTranslation(product).name}</p>
29 |                 <div>{formatMoney(product.variants[0].price)}</div>
30 |             </a>
31 |         </Link>
32 |     );
33 | }
34 | 
35 | export default ProductList;


--------------------------------------------------------------------------------
/types/resources/orderTypes.ts:
--------------------------------------------------------------------------------
 1 | type IOrderCheckoutStates = "cart" | 
 2 |         "addressed" | 
 3 |         "shipping_selected" | 
 4 |         "shipping_skipped" |
 5 |         "payment_selected" |
 6 |         "payment_skipped" |
 7 |         "completed"
 8 | ;
 9 | 
10 | export interface IOrderVariant {
11 |     originalPrice: number;
12 |     price: number;
13 | }
14 | 
15 | export interface IOrder extends IOrderAddresses{
16 |     tokenValue: string,
17 |     id: number,
18 |     items: [
19 |         {
20 |             variant: IOrderVariant
21 |             productName: string,
22 |             id: number,
23 |             quantity: number,
24 |             total: number,
25 |             subtotal: number
26 |         }
27 |     ],
28 |     total: number,
29 |     taxTotal: number,
30 |     shippingTotal: number,
31 |     orderPromotionTotal: number,
32 |     checkoutState: IOrderCheckoutStates
33 | }
34 | 
35 | export interface IOrderAddresses {
36 |     billingAddress: {
37 |        firstName: string,
38 |        lastName: string,
39 |        street: string,
40 |        countryCode: string,
41 |        city: string,
42 |        postcode: string,
43 |     },
44 |     shippingAddress: {
45 |        firstName: string,
46 |        lastName: string,
47 |        countryCode: string,
48 |        street: string,
49 |        city: string,
50 |        postcode: string,
51 |      }
52 | }


--------------------------------------------------------------------------------
/pages/cart/failed.tsx:
--------------------------------------------------------------------------------
 1 | import { getAllTaxons } from "../../lib/api/resources/taxon";
 2 | import { InferGetStaticPropsType } from 'next';
 3 | import Layout from '../../components/layout/Layout';
 4 | import { useContext, useEffect } from 'react';
 5 | import MessageContext from "../../components/MessageContext";
 6 | import { Helmet } from "react-helmet";
 7 | import Breadcrumb from "../../components/layout/breadcrumb";
 8 | import { removeOrderFromCookie } from '../../lib/api/resources/cart';
 9 | 
10 | const PaymentFailed = (
11 |     { taxons }: InferGetStaticPropsType<typeof getStaticProps>
12 | ) => {
13 | 
14 |     const { setMessage } = useContext(MessageContext);
15 |     
16 |     useEffect(() => {
17 |         removeOrderFromCookie();
18 |         setMessage(null);
19 |     }, []); 
20 | 
21 |     return (
22 |         <Layout taxons={taxons}>
23 | 
24 |         <Helmet>
25 |             <title>Order fail</title>
26 |         </Helmet>
27 |         
28 |         <Breadcrumb
29 |             title="Order fail"
30 |             parents={[]}
31 |         />
32 | 
33 |         <h2>Your order have failed</h2> 
34 |     </Layout>
35 |     );
36 | }
37 | 
38 | export const getStaticProps = async () => {
39 |     const taxons = await getAllTaxons();
40 | 
41 |     return {
42 |         props: {
43 |             taxons
44 |         }
45 |     }
46 | }
47 | 
48 | export default PaymentFailed;


--------------------------------------------------------------------------------
/components/features/SimpleForm.tsx:
--------------------------------------------------------------------------------
 1 | import { EmailFormFields } from "react-mailchimp-subscribe";
 2 | 
 3 | interface IProps {
 4 |     status: string | null,
 5 |     message: string | Error | null,
 6 |     onSubmitted: (data: EmailFormFields) => void
 7 | } 
 8 | 
 9 | const SimpleForm: React.FC<IProps> = ({ status, message, onSubmitted }) => {
10 |   let input: HTMLInputElement | null;
11 | 
12 |   const submit = () => {
13 |       input &&
14 |       input.value.indexOf("@") > -1 &&
15 |       onSubmitted({
16 |         EMAIL: input.value
17 |       });
18 |   }
19 |     
20 |   return (
21 |     <form >
22 |       
23 |         <input
24 |           ref={node => (input = node)}
25 |           type="email"
26 |           placeholder="Your email"
27 |         />
28 |         
29 |         <button type="button" onClick={submit}>Register</button>
30 |       
31 |       <div>
32 |         {status === "sending" && 
33 |           <div>In progress...</div>
34 |         }
35 |         {status === "error" && (
36 |           <div
37 |             dangerouslySetInnerHTML={{ __html: "We cannot register your email" as string}}
38 |           />
39 |         )}
40 |         {status === "success" && (
41 |           <div
42 |             dangerouslySetInnerHTML={{ __html: "You have been registered!"as string}}
43 |           />
44 |         )}
45 |       </div>
46 |     </form>
47 |   );
48 | };
49 | 
50 | export default SimpleForm;


--------------------------------------------------------------------------------
/lib/router/router.ts:
--------------------------------------------------------------------------------
 1 | import { useRouter } from "next/dist/client/router";
 2 | 
 3 | export const replaceWildcardsUrl = (url: string, pathParams: any ) => {
 4 |     if (pathParams) {
 5 |         return url.replace(/{(.+?)}/g, (_,g1) => pathParams[g1] || g1)
 6 |     }
 7 | 
 8 |     return url
 9 | }
10 | 
11 | const addQueryParamsUrl = (url: string, queryParams: ({} | null) | undefined) => {
12 |     if (queryParams) {
13 |         Object.entries(queryParams).forEach(
14 |             ([key, value], index) => {
15 |                 if (index === 0) {
16 |                     url = url + '?' + key + '=' + value;
17 |                 } else {
18 |                     url = url + '&' + key + '=' + value;
19 |                 }
20 |             }
21 |         );
22 |     }
23 | 
24 |     return url;
25 | }
26 | 
27 | export const createUrl = (url: string, pathParams: ({ [key: string]: string | number; } | null) | undefined, queryParams: ({} | null) | undefined) => {
28 |     url = replaceWildcardsUrl(url, pathParams);
29 |     url = addQueryParamsUrl(url, queryParams);
30 | 
31 |     return url;
32 | }
33 | 
34 | export const redirectTo = (url: string) => {
35 |     const router = useRouter();
36 | 
37 |     router.push(url);
38 | }
39 | 
40 | export const getQueryParam = (name: string): string => {
41 |     const urlParams = new URLSearchParams(window.location.search);
42 |     return urlParams.get(name) as string;
43 | }


--------------------------------------------------------------------------------
/pages/cart/confirmation.tsx:
--------------------------------------------------------------------------------
 1 | import { getAllTaxons } from "../../lib/api/resources/taxon";
 2 | import { InferGetStaticPropsType } from 'next';
 3 | import Layout from '../../components/layout/Layout';
 4 | import { useContext, useEffect } from 'react';
 5 | import MessageContext from "../../components/MessageContext";
 6 | import { Helmet } from "react-helmet";
 7 | import Breadcrumb from "../../components/layout/breadcrumb";
 8 | import { removeOrderFromCookie } from '../../lib/api/resources/cart';
 9 | 
10 | const PaymentConfirmation = (
11 |     { taxons }: InferGetStaticPropsType<typeof getStaticProps>
12 | ) => {
13 | 
14 |     const { setMessage } = useContext(MessageContext);
15 |     
16 |     useEffect(() => {
17 |         setMessage(null);
18 |         removeOrderFromCookie();
19 |     }, []); 
20 | 
21 |     return (
22 |         <Layout taxons={taxons}>
23 | 
24 |             <Helmet>
25 |                 <title>Confirmation | Cloralys Bijoux</title>
26 |             </Helmet>
27 | 
28 |             <Breadcrumb
29 |                 title="Confirmation de commande"
30 |                 parents={[]}
31 |             />
32 | 
33 |             <h2 className="mb-4">Thanks for your order!</h2> 
34 |         </Layout>
35 |     );
36 | }
37 | 
38 | export const getStaticProps = async () => {
39 |     const taxons = await getAllTaxons();
40 | 
41 |     return {
42 |         props: {
43 |             taxons
44 |         }
45 |     }
46 | }
47 | 
48 | export default PaymentConfirmation;


--------------------------------------------------------------------------------
/types/fetchTypes.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | type pathParamsType = {
 3 |     [key: string]: string | number
 4 | } | null;
 5 | 
 6 | type queryParamsType =  {} | null;
 7 | 
 8 | export interface IgetResourceUrl {
 9 |     (
10 |         ressourceLocator: string, 
11 |         pathParams?: pathParamsType, 
12 |         queryParams?: queryParamsType
13 |     ): string
14 | }
15 | 
16 | export interface IGetResource {
17 |     (
18 |         ressourceLocator: string, 
19 |         pathParams?: pathParamsType, 
20 |         queryParams?: queryParamsType
21 |     ): Promise<any>
22 | }
23 | 
24 | export interface IDeleteResource {
25 |     (
26 |         ressourceLocator: string, 
27 |         pathParams?: pathParamsType, 
28 |         queryParams?: queryParamsType
29 |     ): Promise<boolean>
30 | }
31 | 
32 | export interface IPutResource {
33 |     (
34 |         ressourceLocator: string, 
35 |         pathParams?: pathParamsType, 
36 |         queryParams?: queryParamsType,
37 |         body?: {},
38 |     ): Promise<any>
39 | }
40 | 
41 | export interface IPostResource {
42 |     (
43 |         ressourceLocator: string, 
44 |         pathParams?: pathParamsType, 
45 |         queryParams?: queryParamsType,
46 |         body?: {},
47 |     ): Promise<any>
48 | }
49 | 
50 | export interface IPatchResource {
51 |     (
52 |         ressourceLocator: string, 
53 |         pathParams?: pathParamsType, 
54 |         queryParams?: queryParamsType,
55 |         body?: {},
56 |     ): Promise<any>
57 | }
58 | 
59 | 
60 | 
61 | // export interface IFetchApiByRelativeUrl {
62 | //     (relativeUrl: string): Promise<any>
63 | // }
64 | 
65 | 


--------------------------------------------------------------------------------
/lib/api/urls.ts:
--------------------------------------------------------------------------------
 1 | import { IgetResourceUrl } from '../../types/fetchTypes';
 2 | import { IProduct } from '../../types/resources/productTypes';
 3 | import { ITaxon } from '../../types/resources/taxonTypes';
 4 | import { createUrl } from '../router/router';
 5 | import { getResourceTranslation } from './resources/common';
 6 | 
 7 | 
 8 | export const getApiResourcePublicUrl = (): string => {
 9 |     return process.env.NEXT_PUBLIC_API_RESOURCE_BASE_URL as string;
10 | }
11 | 
12 | export const getApiPublicUrl = (): string => {
13 |     return process.env.NEXT_PUBLIC_API_PUBLIC_URL as string;
14 | }
15 | 
16 | export const getRessourceImageUrl = (imageSlug: string): string => {
17 |     return getApiPublicUrl()+'media/image/'+imageSlug;
18 | }
19 | 
20 | export const getTaxonRelativeUrl = (taxon: ITaxon): string => {
21 |     return '/'+getPrefixCategories()+'/'+getResourceTranslation(taxon).slug;
22 | }
23 | 
24 | export const getProductRelativeUrl = (product: IProduct) => {
25 |     let mainTaxonSlug = getGenericMainTaxonSlug();
26 |     const productSlug = getResourceTranslation(product).slug;
27 | 
28 |     if (product.mainTaxon) {
29 |         mainTaxonSlug = getResourceTranslation(product.mainTaxon).slug;
30 |     }
31 | 
32 |     return '/'+getPrefixCategories()+'/'+mainTaxonSlug+'/'+productSlug;
33 | }
34 | 
35 | const getPrefixCategories = (): string => {
36 |     return 'categories';
37 | }
38 | 
39 | export const getGenericMainTaxonSlug = (): string => {
40 |     return 'tout';
41 | }
42 | 
43 | // construct the fetch url for a specific ressource, including parameters
44 | export const getResourceUrl: IgetResourceUrl = (ressourceLocator, pathParams, queryParams) => {
45 |     let baseUrl = getApiResourcePublicUrl() + ressourceLocator;
46 | 
47 |     return createUrl(baseUrl, pathParams, queryParams);
48 | }
49 | 


--------------------------------------------------------------------------------
/components/account/AccountNav.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { useRouter } from "next/router";
 3 | import { MouseEventHandler, useContext } from "react";
 4 | import { logoutCustomer } from '../../lib/resource/customer';
 5 | import MessageContext from "../MessageContext";
 6 | 
 7 | interface IAccountNavProps {
 8 |     current: string;
 9 | }
10 | 
11 | const AccountNav: React.FC<IAccountNavProps> = ({ current }) => {
12 | 
13 |     const router = useRouter();
14 |     const { setMessage } = useContext(MessageContext);
15 | 
16 |     const onClickLogout = (event: React.MouseEvent<HTMLElement>) => {
17 |         event.preventDefault();
18 | 
19 |         setMessage({
20 |             'message': 'You have been logged out',
21 |             'type': 'success'
22 |         });
23 |         
24 |         logoutCustomer(router);
25 |     }
26 | 
27 |     return (
28 |        
29 |         <nav>
30 |             <ul role="tablist">
31 |                 <li className={`${current === 'account' && 'active'}`}>
32 |                     <Link href={'/account'}>
33 |                         <a>My informations</a>
34 |                     </Link>
35 |                 </li>
36 |                 <li className={` ${current === 'password' && 'active'}`}>
37 |                     <Link href={'/account/password'}>
38 |                         <a>Modify my password</a>
39 |                     </Link>
40 |                 </li>
41 |                 <li className={` ${current === 'orders' && 'active'}`}>
42 |                     <Link href={'/account/orders'}>
43 |                         <a>My orders</a>
44 |                     </Link>
45 |                 </li>
46 |                 <li className="">
47 |                     <a href={"#"} onClick={(event) => onClickLogout(event)}>Se déconnecter</a>
48 |                 </li>
49 |             </ul>
50 |         </nav>
51 |     );
52 | }
53 | 
54 | export default AccountNav;


--------------------------------------------------------------------------------
/components/Product/ProductDetails.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react';
 2 | import { IProduct } from '../../types/resources/productTypes';
 3 | import { getResourceTranslation } from '../../lib/api/resources/common';
 4 | import MultipleVariants from './MultipleVariants';
 5 | import SingleVariant from './SingleVariant';
 6 | import { formatMoney } from '../../lib/config/money';
 7 | import { getTaxonRelativeUrl } from '../../lib/api/urls';
 8 | import { ITaxon } from '../../types/resources/taxonTypes';
 9 | import Link from 'next/link';
10 | import { hasPromo } from '../../lib/resource/product';
11 | 
12 | interface IProductDetailsProps {
13 |     product: IProduct,
14 |     currentTaxon: ITaxon | null,
15 | }
16 | 
17 | const ProductDetails: React.FC<IProductDetailsProps> = ({ product, currentTaxon }) => {
18 | 
19 |     return (
20 |         <>
21 |             <h1>{ getResourceTranslation(product).name }</h1>
22 | 
23 |             { hasPromo(product)
24 |             ?
25 |                 <>
26 |                     <span>{formatMoney(product.variants[0].price)}</span>
27 |                     <del>Original price: {formatMoney(product.variants[0].originalPrice)}</del>
28 |                 </>
29 |             :
30 |                 <p>{formatMoney(product.variants[0].price)}</p>
31 |             }
32 | 
33 |             <p dangerouslySetInnerHTML={{__html: getResourceTranslation(product).shortDescription}}></p>
34 | 
35 |             {product.variants.length > 1 
36 |             ?
37 |                 <MultipleVariants product={product}/>
38 |             :
39 |                 <SingleVariant product={product}/>
40 |             } 
41 | 
42 |             { currentTaxon &&
43 |                 <>
44 |                     <p>Category :</p>
45 |                     
46 |                     <Link href={getTaxonRelativeUrl(currentTaxon)}>
47 |                         <a>{ getResourceTranslation(currentTaxon).name }</a>
48 |                     </Link>
49 |                 </>
50 |             }
51 | 
52 |            
53 |         </>
54 |     )
55 | }
56 | 
57 | export default ProductDetails;


--------------------------------------------------------------------------------
/lib/api/resources/product.ts:
--------------------------------------------------------------------------------
 1 | import { IProduct } from '../../../types/resources/productTypes';
 2 | import { ITaxon } from "../../../types/resources/taxonTypes";
 3 | import { getResource } from "../client";
 4 | import { getLocale } from "../../config/locales";
 5 | 
 6 | export const getAllProducts = async (): Promise<IProduct[]> => {
 7 |     const products = await getResource('shop/products', null, {
 8 |         'enabled': true,
 9 |         'itemsPerPage': 9999999,
10 |         'variants.onHand[gt]': 0
11 |     });
12 |     
13 |     return products;
14 | }
15 | 
16 | export const searchProducts = async (search: string): Promise<IProduct[]> => {
17 |     const products = await getResource('shop/products/search/{search}', {
18 |             'search': search
19 |         },
20 |         {
21 |             'enabled': true,
22 |             'itemsPerPage': 9999999,
23 |             'variants.onHand[gt]': 0
24 |         }
25 |     );
26 | 
27 | 
28 |     return products;
29 | }
30 | 
31 | export const getLastProducts = async (limit: number): Promise<IProduct[]> => {
32 |     const products = await getResource('shop/products', null, {
33 |         'page': 1,
34 |         'itemsPerPage': limit,
35 |         'enabled': true,
36 |         'variants.onHand[gt]': 0
37 |     });
38 | 
39 |     return products;
40 | }
41 | 
42 | export const getProductByTranslatedSlug = async(slug: string): Promise<IProduct> => {
43 |     const product = await getResource('shop/products/by-slug/{slug}/{locale}', {
44 |         'slug': slug,
45 |         locale: getLocale(),
46 |     },
47 |     {
48 |         'enabled': true,
49 |         'itemsPerPage': 9999999,
50 |         'variants.onHand[gt]': 0
51 |     }
52 | );
53 |     return product;
54 | }
55 | 
56 | export const getProductsByTaxon = async (taxon: ITaxon | null): Promise<IProduct[] | null> => {
57 | 
58 |     let products = null;
59 | 
60 |     if (taxon) {
61 |         products = await getResource('shop/products', null, {
62 |             'productTaxons.taxon.code': taxon.code,
63 |             'enabled': true,
64 |             'variants.onHand[gt]': 0,
65 |             'order[createdAt]': 'desc',
66 |             'itemsPerPage': 9999999,
67 |         });
68 |     }
69 | 
70 | 
71 |     return products;
72 | }


--------------------------------------------------------------------------------
/components/Product/SingleVariant.tsx:
--------------------------------------------------------------------------------
 1 | import { submitCart } from '../../lib/resource/cart';
 2 | import { IProduct } from '../../types/resources/productTypes';
 3 | import CartContext from '../CartContext';
 4 | import { useContext, useState } from 'react';
 5 | import MessageContext from '../MessageContext';
 6 | import LoadingContext from '../LoadingContext';
 7 | import { removeOrderFromCookie } from '../../lib/api/resources/cart';
 8 | 
 9 | 
10 | type VariantsProps = {
11 |     product: IProduct
12 | }
13 | 
14 | const SingleVariant = ({product}: VariantsProps): JSX.Element => {
15 |     
16 |     const { setCart } = useContext(CartContext);
17 |     const { setMessage } = useContext(MessageContext);
18 |     const { setLoading } = useContext(LoadingContext);
19 | 
20 |     const onSubmitCart = async (event: React.FormEvent<HTMLFormElement>) => {
21 |         setLoading(true);
22 |         const order = await submitCart(event);
23 | 
24 |         if (order) {
25 |             setLoading(false);
26 |             setMessage({
27 |                 'message': 'The product has been added to your cart',
28 |                 'type': 'success'
29 |             });
30 |             setCart(order);
31 |         } else {
32 |             removeOrderFromCookie();
33 |             const order = await submitCart(event);
34 |             setLoading(false);
35 |             
36 |             if (order) {
37 |                 setMessage({
38 |                     'message': 'The product has been added to your cart',
39 |                     'type': 'success'
40 |                 });
41 |                 setCart(order);
42 |             } else {
43 |                 setMessage({
44 |                     'message': "The product can't be added to your cart",
45 |                     'type': 'error'
46 |                 });
47 |             }
48 |         }
49 |         
50 |     }
51 | 
52 |     return (
53 |         <>
54 |             <form onSubmit={(event) => {onSubmitCart(event)}}>
55 |                 <input type="number" name="quantity" id="qty" defaultValue="1" min="1" max="100" step="1"/>
56 |                 <input type="hidden" name="product_code" value={product.code}/>
57 |                 <input type="hidden" name="product_variant_code" value={product.variants[0].code}/>
58 |                 <button  type="submit"><span>Add to cart</span></button>
59 |             </form>
60 |         </>
61 |     );
62 | }
63 | 
64 | export default SingleVariant;


--------------------------------------------------------------------------------
/components/cart/CartResume.tsx:
--------------------------------------------------------------------------------
 1 | import { IOrder } from '../../types/resources/orderTypes';
 2 | import { ICustomer } from '../../types/resources/customerTypes';
 3 | import { formatMoney } from '../../lib/config/money';
 4 | 
 5 | interface ICartResumeProps {
 6 |     cart: IOrder | null;
 7 |     customer: ICustomer | null
 8 | }
 9 | 
10 | const CartResume: React.FC<ICartResumeProps> = ({ cart, customer }) => {
11 |     return (
12 |         <>
13 |     
14 |             {cart && cart.items.length > 0 ?
15 |                
16 |                 <table >
17 |                     <tbody>
18 |                         <tr>
19 |                             <td>{cart.shippingAddress ? 'Shipping fee' : 'Shiping fee estimate'} :</td>
20 |                             <td>{formatMoney(cart.shippingTotal)}</td>
21 |                         </tr>
22 | 
23 |                         <tr>
24 |                             <td>Montant des taxes :</td>
25 |                             <td>{formatMoney(cart.taxTotal)}</td>
26 |                         </tr>
27 | 
28 |                         <tr>
29 |                             <td>Code Promo :</td>
30 |                             <td>{formatMoney(cart.orderPromotionTotal)}</td>
31 |                         </tr>
32 | 
33 |                         <tr>
34 |                             <td>Montant de la commande :</td>
35 |                             <td>{formatMoney(cart.total)}</td>
36 |                         </tr>
37 |                     </tbody>
38 |                 </table>
39 | 
40 |             :
41 |                 <table>
42 |                     <tbody>
43 |                         <tr>
44 |                             <td>Estimation des frais de port :</td>
45 |                             <td>0€</td>
46 |                         </tr>
47 | 
48 |                         <tr>
49 |                             <td>Montant des taxes :</td>
50 |                             <td>0€</td>
51 |                         </tr>
52 | 
53 |                         <tr>
54 |                             <td>Code Promo :</td>
55 |                             <td>0€</td>
56 |                         </tr>
57 | 
58 |                         <tr>
59 |                             <td>Montant de la commande :</td>
60 |                             <td>0€</td>
61 |                         </tr>
62 |                     </tbody>
63 |                 </table>
64 |             }
65 | 
66 |         </>
67 | 
68 |     );
69 | }
70 | 
71 | export default CartResume;


--------------------------------------------------------------------------------
/components/cart/CartItems.tsx:
--------------------------------------------------------------------------------
 1 | import { formatMoney } from '../../lib/config/money';
 2 | import { IOrder } from '../../types/resources/orderTypes';
 3 | 
 4 | type CartItemsProps = {
 5 |     cart: IOrder | null
 6 | }
 7 | 
 8 | const CartItems = ({cart}: CartItemsProps): JSX.Element => {
 9 |     
10 |     return (
11 |         <table>
12 |             <thead>
13 |                 <tr>
14 |                     <th>Product</th>
15 |                     <th>Price</th>
16 |                     <th>Quantity</th>
17 |                     <th>Total</th>
18 |                 </tr>
19 |             </thead>
20 | 
21 |             <tbody>
22 |                 {cart && cart.items.length > 0 ?
23 |                     <>
24 |                         {cart.items.map(item => {
25 |                             return (
26 |                                 <tr key={ 'cart-item-' + item.id }>
27 |                                 <td>
28 |                                     <h3>{item.productName}</h3>
29 |                                 </td>
30 | 
31 |                                 { item.hasOwnProperty('total') ?
32 |                                     <td>
33 |                                         {formatMoney(item.total / item.quantity)}
34 |                                     </td>
35 |                                 :
36 |                                     <td>
37 |                                         {formatMoney(item.variant.price / item.quantity)}
38 |                                     </td>
39 |                                 }
40 | 
41 |                                 <td>
42 |                                     {item.quantity}
43 |                                 </td>
44 | 
45 |                                 { item.hasOwnProperty('total') ?
46 |                                     <td>
47 |                                         {formatMoney(item.total)}
48 |                                     </td>
49 |                                 :
50 |                                     <td>
51 |                                         {formatMoney(item.variant.price)}
52 |                                     </td>
53 |                                 }
54 |                             </tr>
55 |                             );
56 | 
57 |                         })}
58 |                     </>
59 |                 :
60 |                     <tr>
61 |                         <td>
62 |                             <p> You have no product in your cart </p>
63 |                         </td>
64 |                     </tr>
65 |                 }
66 | 
67 |             </tbody>
68 |         </table>
69 |     );
70 | }
71 | 
72 | export default CartItems;


--------------------------------------------------------------------------------
/pages/account/index.tsx:
--------------------------------------------------------------------------------
 1 | import { getAllTaxons } from "../../lib/api/resources/taxon";
 2 | import { InferGetStaticPropsType } from 'next';
 3 | import Layout from "../../components/layout/Layout";
 4 | import { useRouter } from "next/router";
 5 | import { useContext, useEffect, useState } from 'react';
 6 | import { ICustomer } from '../../types/resources/customerTypes';
 7 | import { getCustomerFromCookie } from "../../lib/api/resources/customer";
 8 | import { logoutCustomer } from "../../lib/resource/customer";
 9 | import AccountNav from '../../components/account/AccountNav';
10 | import MessageContext from "../../components/MessageContext";
11 | import { Helmet } from "react-helmet";
12 | import Breadcrumb from "../../components/layout/breadcrumb";
13 | import LoadingContext from '../../components/LoadingContext';
14 | 
15 | const Account = (
16 |     { taxons }: InferGetStaticPropsType<typeof getStaticProps>
17 | ) => {
18 | 
19 |     const router = useRouter();
20 |     const [customer, setCustomer] = useState< ICustomer | null>(null);
21 |     const { setMessage } = useContext(MessageContext);
22 |     const { setLoading } = useContext(LoadingContext);    
23 | 
24 |     useEffect(() => {
25 |         setLoading(true);
26 |         setMessage(null);
27 |         (async () => {
28 |             setLoading(true);
29 |             const customer = await getCustomerFromCookie();
30 |             setLoading(false);
31 |             
32 |             if (customer) {
33 |                 setCustomer(customer);
34 |             } else {
35 |                 logoutCustomer(router);
36 |             }
37 |         })();
38 |         setLoading(false);
39 |     }, []); 
40 |     
41 |     return (
42 |         <Layout taxons={taxons}>
43 | 
44 |             <Helmet>
45 |                 <title>My account</title>
46 |             </Helmet>
47 | 
48 |             <Breadcrumb title="My account" parents={[]}/>
49 | 
50 |             <ul role="tablist">
51 |                 <AccountNav current={"account"}/>
52 | 
53 |                 { customer &&
54 |                     <div>
55 |                         <p>Bonjour <span className="font-weight-normal text-dark">{customer.firstName} {customer.lastName} ({customer.email})</span></p>
56 |                         <p>Depuis votre compte vous pouvez voir vos informations, voir votre historique de commandes et modifier votre mot de passe.</p>
57 |                     </div>
58 |                 }
59 |             </ul>
60 |         </Layout>
61 |     );
62 | }
63 | 
64 | export const getStaticProps = async () => {
65 |     const taxons = await getAllTaxons();
66 | 
67 |     return {
68 |         props: {
69 |             taxons
70 |         }
71 |     }
72 | }
73 | 
74 | export default Account;


--------------------------------------------------------------------------------
/pages/categories/[categorySlug]/index.tsx:
--------------------------------------------------------------------------------
 1 | import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 2 | import Layout from '../../../components/layout/Layout';
 3 | import { getProductsByTaxon } from '../../../lib/api/resources/product';
 4 | import { getAllTaxons } from '../../../lib/api/resources/taxon';
 5 | import { ITaxon } from '../../../types/resources/taxonTypes';
 6 | import { IProduct } from '../../../types/resources/productTypes';
 7 | import { getTaxonBySlugFromCollection } from '../../../lib/resource/taxon';
 8 | import { getResourceTranslation } from '../../../lib/api/resources/common';
 9 | import { useContext, useEffect } from 'react';
10 | import MessageContext from '../../../components/MessageContext';
11 | import { Helmet } from 'react-helmet';
12 | import Breadcrumb from '../../../components/layout/breadcrumb';
13 | import ProductsList from '../../../components/Product/ProductsList';
14 | 
15 | type CategoryProps = {
16 |     taxons: ITaxon[],
17 |     currentTaxon: ITaxon | null,
18 |     products: IProduct[] | null
19 | }
20 | 
21 | const Category = (
22 |     { taxons, currentTaxon, products }: InferGetStaticPropsType<typeof getStaticProps>
23 | ) => {
24 | 
25 |     const { setMessage } = useContext(MessageContext);
26 |     
27 |     useEffect(() => {
28 |         setMessage(null);
29 |     }, []); 
30 | 
31 |     return (
32 | 
33 |         <Layout taxons={taxons}>
34 | 
35 |             <Helmet>
36 |                 <title>{getResourceTranslation(currentTaxon).name}</title>
37 |             </Helmet>
38 | 
39 |             
40 |             <Breadcrumb
41 |                 title={ getResourceTranslation(currentTaxon).name }
42 |                 parents={[]}
43 |             />
44 |                 
45 |             <ProductsList products={ products } />
46 | 
47 |         </Layout>
48 |     );
49 | }
50 | 
51 | export const getStaticPaths: GetStaticPaths = async () => {
52 |     const taxons = await getAllTaxons();
53 | 
54 |     const paths = taxons.map((taxon: ITaxon) => ({
55 |         params: {
56 |             categorySlug: getResourceTranslation(taxon).slug
57 |         }
58 |     }));
59 | 
60 |     return {
61 |         paths,
62 |         fallback: false
63 |     }
64 | }
65 | 
66 | export const getStaticProps: GetStaticProps<CategoryProps> = async ({ params }) => {
67 |     const taxons: ITaxon[] = await getAllTaxons();
68 |     const taxonTranslatedSlug = params?.categorySlug as string;
69 |     const currentTaxon = getTaxonBySlugFromCollection(taxons, taxonTranslatedSlug);
70 |     const products = await getProductsByTaxon(currentTaxon);
71 | 
72 |     return {
73 |         props: {
74 |             taxons,
75 |             currentTaxon,
76 |             products
77 |         },
78 |         revalidate: 60
79 |     }
80 | }
81 | 
82 | export default Category;


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import { getLastProducts } from '../lib/api/resources/product';
 2 | import { InferGetStaticPropsType } from "next";
 3 | import { getAllTaxons } from "../lib/api/resources/taxon";
 4 | import Layout from "../components/layout/Layout";
 5 | import Link from "next/link";
 6 | import { useContext, useEffect } from 'react';
 7 | import MessageContext from "../components/MessageContext";
 8 | import { Helmet } from 'react-helmet';
 9 | import Newsletter from '../components/features/Newsletter';
10 | import Image from 'next/image'
11 | import { getProductRelativeUrl, getRessourceImageUrl } from '../lib/api/urls';
12 | import { getResourceTranslation } from '../lib/api/resources/common';
13 | 
14 | const Home = (
15 |     { products, taxons, mailchimpUrl }: InferGetStaticPropsType<typeof getStaticProps>
16 | ) => {
17 |     const { setMessage } = useContext(MessageContext);
18 | 
19 |     useEffect(() => {
20 |         setMessage(null);
21 |     }, []); 
22 | 
23 |     return (
24 |         <>
25 |             <Helmet>
26 |                 <title>Homepage</title>
27 |             </Helmet>
28 | 
29 |             <Layout taxons={taxons}>
30 |                 <div>
31 |                     <section>
32 |                         <h2>Last products :</h2>
33 |                         {products.map(product => {
34 |                             return(
35 |                                 <article>
36 |                                     <Link href={getProductRelativeUrl(product)}>
37 |                                         <a>
38 |                                             <h2>{getResourceTranslation(product).name}</h2>
39 |                                         </a>
40 |                                     </Link>
41 |                                     <Image 
42 |                                         src={getRessourceImageUrl(product.images[0].path)} 
43 |                                         alt={getResourceTranslation(product).name} 
44 |                                         width="200px"
45 |                                         height="200px"
46 | 
47 |                                     />
48 |                                 </article>
49 |                             );
50 |                         })}
51 |                     </section>
52 | 
53 |                     <Newsletter mailchimpUrl={mailchimpUrl} />
54 | 
55 |                 </div>
56 |             </Layout>
57 |         </>
58 |     );
59 | }
60 | 
61 | export const getStaticProps = async () => {
62 |     const products = await getLastProducts(6);
63 |     const taxons = await getAllTaxons();
64 |     const mailchimpUrl: string = process.env.MAILCHIMP_URL as string;
65 | 
66 |     return {
67 |         props: {
68 |             products,
69 |             taxons,
70 |             mailchimpUrl
71 |         },
72 |         revalidate: 60
73 |     }
74 |     
75 | }
76 | 
77 | export default Home;


--------------------------------------------------------------------------------
/pages/search.tsx:
--------------------------------------------------------------------------------
 1 | import { getAllTaxons } from "../lib/api/resources/taxon";
 2 | import { InferGetStaticPropsType } from 'next';
 3 | import Layout from '../components/layout/Layout';
 4 | import { useContext, useEffect, useState } from 'react';
 5 | import MessageContext from "../components/MessageContext";
 6 | import { Helmet } from "react-helmet";
 7 | import Breadcrumb from "../components/layout/breadcrumb";
 8 | import LoadingContext from '../components/LoadingContext';
 9 | import { IProduct } from '../types/resources/productTypes';
10 | import { searchProducts } from '../lib/api/resources/product';
11 | import { useRouter } from 'next/router';
12 | import ProductList from '../components/Product/ProductList';
13 | 
14 | const Search = (
15 |     { taxons }: InferGetStaticPropsType<typeof getStaticProps>
16 | ) => {
17 | 
18 |     const { setMessage } = useContext(MessageContext);
19 |     const { setLoading } = useContext(LoadingContext);
20 |     const [products, setProducts] = useState<IProduct[] | null >(null);
21 |     const router = useRouter();
22 |     
23 |     const searchTerm = router.query.search as string;
24 | 
25 |     useEffect(() => {
26 |         setMessage(null);
27 | 
28 |         (async () => {
29 |             const searchTerm = router.query.search as string;
30 |             const products = await searchProducts(searchTerm);
31 |         
32 |             if (products) {
33 |                 setProducts(products);
34 |             }
35 |         })();
36 | 
37 |         setLoading(false);
38 |     }, [searchTerm]); 
39 | 
40 | 
41 |     return (
42 |         <Layout taxons={taxons}>
43 | 
44 |             <Helmet>
45 |                 <title>Search</title>
46 |             </Helmet>
47 | 
48 |             <Breadcrumb
49 |                 title="Search"
50 |                 parents={[]}
51 |             />
52 | 
53 |             {searchTerm ?
54 |                 <>
55 |                     <h2>Search results for:  "{searchTerm}" </h2> 
56 | 
57 |                     {products && products.length > 0 ?
58 |                        <div>
59 |                             {products.map((product: IProduct, index) => {
60 |                                 return (
61 |                                     
62 |                                         <ProductList product={product} key={index}/>
63 |                                     
64 |                                 );
65 |                             })}
66 |                         </div>
67 |                     :
68 |                         <h3>No product have been found</h3>
69 |                     }
70 |                     
71 |                 </>
72 |             :
73 |                 <h2>No search have been performed</h2>
74 |             }
75 | 
76 | 
77 |     </Layout>
78 |     );
79 | }
80 | 
81 | export const getStaticProps = async () => {
82 |     const taxons = await getAllTaxons();
83 | 
84 |     return {
85 |         props: {
86 |             taxons
87 |         }
88 |     }
89 | }
90 | 
91 | export default Search;


--------------------------------------------------------------------------------
/components/Product/MultipleVariants.tsx:
--------------------------------------------------------------------------------
 1 | import { useContext, useEffect } from 'react';
 2 | import { getResourceTranslation } from '../../lib/api/resources/common';
 3 | import { formatMoney } from '../../lib/config/money';
 4 | import { submitCart } from '../../lib/resource/cart';
 5 | import { IProduct } from '../../types/resources/productTypes';
 6 | import CartContext from '../CartContext';
 7 | import MessageContext from '../MessageContext';
 8 | import LoadingContext from '../LoadingContext';
 9 | import { removeOrderFromCookie } from '../../lib/api/resources/cart';
10 | 
11 | type VariantsProps = {
12 |     product: IProduct
13 | }
14 | 
15 | 
16 | const MultipleVariants = ({product}: VariantsProps): JSX.Element => {
17 | 
18 |     const { setCart } = useContext(CartContext);
19 |     const { setMessage } = useContext(MessageContext);
20 |     const { setLoading } = useContext(LoadingContext);
21 | 
22 |     const onSubmitCart = async (event: React.FormEvent<HTMLFormElement>) => {
23 |         setLoading(true);
24 |         const order = await submitCart(event);
25 | 
26 |         if (order) {
27 |             setLoading(false);
28 |             setMessage({
29 |                 'message': 'The product has been added to your cart',
30 |                 'type': 'success'
31 |             });
32 |             setCart(order);
33 |         } else {
34 |             removeOrderFromCookie();
35 |             const order = await submitCart(event);
36 |             setLoading(false);
37 |             
38 |             if (order) {
39 |                 setMessage({
40 |                     'message': 'The product has been added to your cart',
41 |                     'type': 'success'
42 |                 });
43 |                 setCart(order);
44 |             } else {
45 |                 setMessage({
46 |                     'message': "The product can't be added to your cart",
47 |                     'type': 'error'
48 |                 });
49 |             }
50 |         }
51 |     }
52 |     
53 |     return (
54 |         <>
55 |             <h5>Variants :</h5>
56 |             <form onSubmit={(event) => {onSubmitCart(event)}}>
57 |                     
58 |                 {product.variants.map((productVariant, index) => {              
59 |                     if (productVariant.enabled && productVariant.onHand > 0) {
60 |                         return (
61 |                             <div key={index}>
62 |                                 <label>{getResourceTranslation(productVariant).name} : {formatMoney(productVariant.price)}</label>
63 |                                 <input type="radio" name="product_variant_code" value={productVariant.code}/>
64 |                             </div>
65 |                         );
66 |                     }
67 |                 })}
68 |    
69 |                 <input type="number" name="quantity" id="qty" defaultValue="1" min="1" max="100" step="1"/>
70 | 
71 |                 <input type="hidden" name="product_code" value={product.code}/>
72 |                 <button  type="submit"><span>Add to cart</span></button>
73 |             </form>
74 |         </>
75 |     );
76 | }
77 | 
78 | export default MultipleVariants;


--------------------------------------------------------------------------------
/components/layout/Header.tsx:
--------------------------------------------------------------------------------
 1 | import { ITaxon } from '../../types/resources/taxonTypes';
 2 | import Link from 'next/link';
 3 | import React, { useEffect, useContext } from 'react';
 4 | import { getOrderFromCookie, removeOrderFromCookie } from '../../lib/api/resources/cart';
 5 | import CartContext from '../CartContext';
 6 | import MessageContext from '../MessageContext';
 7 | import Image from 'next/image';
 8 | import MainMenu from './MainMenu';
 9 | import { useRouter } from 'next/dist/client/router';
10 | import LoadingContext from '../LoadingContext';
11 | 
12 | interface IHeaderProps {
13 |     taxons: ITaxon[]
14 | }
15 | 
16 | const Header: React.FC<IHeaderProps> = ({taxons}) => {
17 | 
18 |     const { cart, setCart } = useContext(CartContext);
19 |     const { message } = useContext(MessageContext);
20 |     const { setLoading } = useContext(LoadingContext); 
21 |     const router = useRouter();
22 | 
23 |     useEffect(() => {
24 |         (async () => {
25 |             const order = await getOrderFromCookie();
26 | 
27 |             if (order) {
28 |                 setCart(order);
29 |             } else {
30 |                 if (router.pathname !== "panier/paiement") {
31 |                     removeOrderFromCookie();   
32 |                 }
33 |             }     
34 |         })();
35 |     }, []);
36 | 
37 |     const onSubmitSearch = (event: React.FormEvent<HTMLFormElement>) => {
38 |         setLoading(true);
39 |         event.preventDefault();
40 |         const target = event.target as HTMLFormElement;
41 |         const search = target.search.value;
42 | 
43 |         router.push({
44 |            pathname: '/recherche',
45 |            query: {
46 |                'search': search
47 |            }
48 |         });
49 |     }
50 | 
51 |     return (
52 |         <>
53 |             <header>
54 |             
55 |                 <form onSubmit={(event) => onSubmitSearch(event)}>
56 |                     <label htmlFor="search">Search</label>
57 |                     <button type="submit">Search</button>
58 |                     <input type="search" name="search" placeholder="Search products..." required />
59 |                 </form>
60 |                         
61 |                 <Link href={"/"} >
62 |                     <a>
63 |                         <Image
64 |                             src="/assets/images/sylius.png" 
65 |                             alt="Sylius"
66 |                             width="100px"
67 |                             height="29.33px"
68 |                         />
69 |                     </a>
70 |                 </Link>
71 | 
72 |                 <div>    
73 |                     <Link href={"/account/login"}>
74 |                         <a>My account</a>
75 |                     </Link>
76 |                 </div>   
77 |                 
78 |                 <Link href={"/cart"}>
79 |                     <a>
80 |                         <span>{cart ? cart.items.length + 'items' : '0 item'} in cart</span>
81 |                     </a>
82 |                 </Link>
83 | 
84 |                 <MainMenu taxons={taxons}/>
85 | 
86 |             </header>
87 | 
88 |             { message &&
89 |                 <div className={`${message.type}`} >
90 |                     <p>{message.message}</p>
91 |                 </div>
92 |             }
93 |         </>
94 |     );
95 | 
96 | }
97 | 
98 | export default Header;


--------------------------------------------------------------------------------
/pages/cart/paiement.tsx:
--------------------------------------------------------------------------------
  1 | import { getAllTaxons } from '../../lib/api/resources/taxon';
  2 | import { InferGetStaticPropsType } from 'next';
  3 | import Layout from '../../components/layout/Layout';
  4 | import CartItems from '../../components/cart/CartItems';
  5 | import CartContext from '../../components/CartContext';
  6 | import { useContext, useEffect } from 'react';
  7 | import { formatMoney } from '../../lib/config/money';
  8 | import { completeCart, createStripeCheckoutSession, removeOrderFromCookie } from '../../lib/api/resources/cart';
  9 | import getStripe from '../../lib/payment/getStripe';
 10 | import MessageContext from '../../components/MessageContext';
 11 | import { Helmet } from 'react-helmet';
 12 | import Breadcrumb from '../../components/layout/breadcrumb';
 13 | import CartResume from '../../components/cart/CartResume';
 14 | import LoadingContext from '../../components/LoadingContext';
 15 | 
 16 | 
 17 | const Payment = (
 18 |     { taxons }: InferGetStaticPropsType<typeof getStaticProps>
 19 | ) => {
 20 | 
 21 |     const { cart } = useContext(CartContext);
 22 |     const { setMessage } = useContext(MessageContext);
 23 |     const { setLoading } = useContext(LoadingContext);    
 24 | 
 25 |     useEffect(() => {
 26 |         setMessage(null);
 27 |         setLoading(false);
 28 |     }, []);
 29 | 
 30 |     const onCompleteSubmit = async (cartToken: string) => {
 31 |         setLoading(true);
 32 |         const order = await completeCart(cartToken);
 33 | 
 34 |         if (order) {
 35 | 
 36 |             removeOrderFromCookie();
 37 |             
 38 |             const stripe = await getStripe();
 39 | 
 40 |             const session = await createStripeCheckoutSession(cartToken);
 41 | 
 42 |             setLoading(false);
 43 | 
 44 |             const result = await stripe?.redirectToCheckout({
 45 |                 sessionId: session.id,
 46 |             });
 47 |         } else {
 48 |             setMessage({
 49 |                 'message': "This order have been already paid or cancelled",
 50 |                 'type': 'success'
 51 |             });
 52 |             removeOrderFromCookie();
 53 |         }
 54 | 
 55 |         setLoading(false);
 56 |     }
 57 | 
 58 |     return (
 59 | 
 60 |         <Layout taxons={taxons}>
 61 | 
 62 |             <Helmet>
 63 |                 <title>Confirmation | Cloralys Bijoux</title>
 64 |             </Helmet>
 65 | 
 66 |             <Breadcrumb
 67 |                 title="Paiement"
 68 |                 parents={[
 69 |                     {
 70 |                         'title': 'My cart',
 71 |                         'path': '/panier'
 72 |                     }
 73 |                 ]}
 74 |             />
 75 | 
 76 |             {cart && cart.items.length > 0 ?
 77 |                 <>
 78 |                     <CartItems cart={cart}/>
 79 |                     <CartResume cart={cart} customer={null}/>
 80 |                     <button onClick={() => onCompleteSubmit(cart.tokenValue)}>
 81 |                         Payment
 82 |                     </button>
 83 |                 </>
 84 |             :
 85 |                 <p>You have no current order</p>
 86 |             }
 87 | 
 88 |         </Layout>
 89 |     );
 90 | 
 91 | }
 92 | 
 93 | export const getStaticProps = async () => {
 94 |     const taxons = await getAllTaxons();
 95 | 
 96 |     return {
 97 |         props: {
 98 |             taxons
 99 |         }
100 |     }
101 | }
102 | 
103 | export default Payment;
104 | 


--------------------------------------------------------------------------------
/pages/account/login.tsx:
--------------------------------------------------------------------------------
  1 | import { getAllTaxons } from "../../lib/api/resources/taxon";
  2 | import { InferGetStaticPropsType } from 'next';
  3 | import Layout from "../../components/layout/Layout";
  4 | import { logoutCustomer, storeCustomerToken, submitConnexion } from "../../lib/resource/customer";
  5 | import { useEffect, useContext } from 'react';
  6 | import { useRouter } from "next/router";
  7 | import { getCustomerFromCookie } from '../../lib/api/resources/customer';
  8 | import MessageContext from "../../components/MessageContext";
  9 | import { Helmet } from "react-helmet";
 10 | import Breadcrumb from "../../components/layout/breadcrumb";
 11 | import Link from "next/link";
 12 | import LoadingContext from '../../components/LoadingContext';
 13 | 
 14 | const Connexion = (
 15 |     { taxons }: InferGetStaticPropsType<typeof getStaticProps>
 16 | ) => {
 17 | 
 18 |     const router = useRouter();
 19 |     const { setMessage } = useContext(MessageContext);
 20 |     const { setLoading } = useContext(LoadingContext);    
 21 | 
 22 |     const onSubmitConnexion = async (event: React.FormEvent<HTMLFormElement>) => {
 23 |         setLoading(true);
 24 |         const customerToken = await submitConnexion(event);
 25 |         setLoading(false);
 26 |         
 27 |         if (!customerToken) {
 28 |             setMessage({
 29 |                 'message': 'Your credentials are not valid',
 30 |                 'type': 'error'
 31 |             });
 32 |         } else {
 33 |             storeCustomerToken(customerToken.token);
 34 |             router.push('/account');
 35 |         }
 36 |     }
 37 | 
 38 |     useEffect(() => {
 39 |         (async () => {
 40 |             setLoading(true);
 41 |             const customer = await getCustomerFromCookie();
 42 |             setLoading(false);
 43 |             
 44 |             if (customer) {
 45 |                 router.push('/account');
 46 |             } else {
 47 |                 logoutCustomer(router);
 48 |             }
 49 |         })();
 50 |     }, []); 
 51 | 
 52 |     return (
 53 |         <Layout taxons={taxons}>
 54 |            
 55 |             <Helmet>
 56 |                 <title>Connexion</title>
 57 |             </Helmet>
 58 | 
 59 |             <Breadcrumb title="Connexion" parents={[ ]} />
 60 | 
 61 |             <h3 className="nav-link">Login</h3>
 62 | 
 63 |             <form onSubmit={(event) => onSubmitConnexion(event)}>   
 64 |                 <label htmlFor="email">Email*</label>
 65 |                 <input type="text" name="email" required />
 66 | 
 67 |                 <label htmlFor="password">Password*</label>
 68 |                 <input type="password" name="password" required />
 69 | 
 70 |                 <button type="submit">
 71 |                     <span>Login</span>
 72 |                 </button>
 73 | 
 74 |                 <Link href={'/forgotten-password'}>
 75 |                     <a>Have you forgotten your password?</a>
 76 |                 </Link>
 77 | 
 78 |             </form>
 79 |             <p>You don't have an account yet?</p>
 80 |             <Link href={'/account/register'}>
 81 |                 <a>
 82 |                     <button >Register</button>
 83 |                 </a>
 84 |             </Link>
 85 | 
 86 |         </Layout>
 87 |     );
 88 | }
 89 | 
 90 | export const getStaticProps = async () => {
 91 |     const taxons = await getAllTaxons();
 92 | 
 93 |     return {
 94 |         props: {
 95 |             taxons
 96 |         }
 97 |     }
 98 | }
 99 | 
100 | export default Connexion;


--------------------------------------------------------------------------------
/lib/resource/cart.ts:
--------------------------------------------------------------------------------
 1 | import { addAddressesToCart, addProductToCart, applyCoupon } from "../api/resources/cart";
 2 | import { IOrder } from '../../types/resources/orderTypes';
 3 | 
 4 | export const submitCoupon = async (event: React.FormEvent<HTMLFormElement>)  => {
 5 |     event.preventDefault();
 6 | 
 7 |     const target = event.target as HTMLFormElement;
 8 |     const couponCode = target.coupon_code.value;
 9 | 
10 |     return await applyCoupon(couponCode);
11 | }
12 | 
13 | export const submitCart = async (event: React.FormEvent<HTMLFormElement>): Promise<IOrder | null>  => {
14 |     event.preventDefault();
15 |     const target = event.target as HTMLFormElement;
16 | 
17 |     const productCode = target.product_code.value;
18 |     const productVariantCode = target.product_variant_code.value;
19 |     const quantity = parseInt(target.quantity.value);
20 |     
21 |     return await addProductToCart(productCode, productVariantCode, quantity);
22 | }
23 | 
24 | export const submitAddresses = async (event: React.FormEvent<HTMLFormElement>): Promise<IOrder> => {
25 |     event.preventDefault();
26 | 
27 |     const target = event.target as HTMLFormElement;
28 | 
29 |     const addresses = {
30 |          "email": target.email.value,
31 |          "billingAddress": {
32 |             "firstName": target.billing_firstname.value,
33 |             "lastName": target.billing_lastname.value,
34 |             "street": target.billing_street.value,
35 |             "countryCode": target.billing_country.value,
36 |             "city": target.billing_city.value,
37 |             "postcode": target.billing_postcode.value,
38 |          },
39 |          "shippingAddress": {
40 |             "firstName": target.shipping_firstname.value,
41 |             "lastName": target.shipping_lastname.value,
42 |             "countryCode": target.shipping_country.value,
43 |             "street": target.shipping_street.value,
44 |             "city": target.shipping_city.value,
45 |             "postcode": target.shipping_postcode.value
46 |           }
47 |     }
48 | 
49 |     return await addAddressesToCart(addresses);
50 | }
51 | 
52 | export const canOrderComplete = (order: IOrder) => {
53 |     if (order.checkoutState === "shipping_selected" || 
54 |         order.checkoutState === "shipping_skipped" || 
55 |         order.checkoutState === "payment_selected" ||
56 |         order.checkoutState === "payment_skipped"
57 |     ) {
58 |         return true;
59 |     }
60 |     return false;
61 | }
62 | 
63 | export const formatPaymentState = (paymentState: string): string => {
64 |     if (paymentState === "awaiting_payment" || 
65 |         paymentState === "cart" ||
66 |         paymentState === "partially_authorized" ||
67 |         paymentState === "authorized" ||
68 |         paymentState === "partially_paid"
69 |     ) {
70 |         return "En attente de paiement";
71 |     } else if (paymentState === "paid") {
72 |         return "Payé";
73 |     } else if (paymentState === "cancelled") {
74 |         return "Annulé";
75 |     } else if (paymentState === "partially_refunded" ||
76 |         paymentState === "refunded"
77 |     ){
78 |         return "Remboursé";
79 |     }
80 | 
81 |     return "Inconnu";
82 | }
83 | 
84 | 
85 | export const formatShippingState = (shippingState: string): string => {
86 |     if (shippingState === "ready") {
87 |         return "Prêt";
88 |     } else if (shippingState === "shipped") {
89 |         return "Envoyé";
90 |     } else if (shippingState === "cancelled") {
91 |         return "Annulé";
92 |     }
93 | 
94 |     return "Inconnu";
95 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | A next.js + Typescript boilerplate (blank) theme for the new Sylius API (includes Mailchimp contact form integration + stripe payment gateway integration). 
 2 | 
 3 | This is the first version so there is a lot of room for improvements, bugfixes etc!
 4 | 
 5 | ## Install and configure the Sylius API
 6 | 
 7 | - Install Sylius (https://docs.sylius.com/en/1.9/book/installation/installation.html) 
 8 | - Install the Sylius Extra API Plugin: https://github.com/davidroberto/SyliusExtraApiPlugin
 9 | - Create a davidroberto_sylius_extra_plugin.yaml file in your config/packages file and import the plugin config file in it:
10 | 
11 | ```
12 | imports:
13 |     - { resource: "@DavidRobertoSyliusExtraApiPlugin/Resources/app/config/config.yml" }
14 | ```
15 | 
16 | - If you want to use Stripe, create in your Stripe account a new "payment_intent.succeeded hook", calling this URL (replace the domain name with yours): 
17 | https://yourSyliusAPIDomainName/api/v2/shop/payments/stripe/notify/success
18 | - Add this env variables into your .env.local file:
19 | 
20 | ```
21 | # your stripe secret key
22 | STRIPE_SECRET_KEY=xxxxx
23 | # your stripe payment_intent.succeeded webhook secret key
24 | STRIPE_SUCCESS_ENDPOINT_SECRET_KEY=xxxx
25 | # the Next.js front end URL
26 | CLIENT_URL=
27 | # the front end url for the stripe payment success (by default "https://yourNextBoilerPlateThemeDomainName/cart/confirmation")
28 | CLIENT_URL_PAYMENT_SUCCESS=
29 | # the front end url for the stripe payment failure (by default "https://yourNextBoilerPlateThemeDomainName/cart/failed")
30 | CLIENT_URL_PAYMENT_FAILED=
31 | ```
32 | 
33 | - Configure the nelmio cors bundle to match your next js frontend url.
34 | - In your admin, in the "channel" section, set this values:
35 | -- "Ignore shipping selection step where only one shipping method exists": TRUE
36 | -- "Ignore payment selection step where only one payment method exists": TRUE
37 | -- "The account verification is mandatory": FALSE
38 | - In your admin, foreach product, set the "variant selection method" to "Variant choice"
39 | 
40 | - The plugin has a dependency on the Nelmio Cors Bundle. So you need to it to match your next js frontend url (https://github.com/nelmio/NelmioCorsBundle)
41 | 
42 | Important:
43 | - The theme don't work well yet with taxons slug containing slashes, so remove them if you want to test the theme.
44 | - Depending on yout nelmio cors configuration, the theme might not be able to perform the fetch request if you use https for your local sylius api url. You can fix it using http (only for localhost).
45 | - This theme was created with only one payment method and shipping method. So if you want to test theme theme, keep only one payment method and one shipping method. You you have multiple ones, you have to implement the select logic by your own.
46 | 
47 | 
48 | ## Install and configure the next.js boilerplate theme
49 | 
50 | - Clone this repo
51 | - Fill the .env variables into a .env.local file
52 | ```
53 | # Your Sylius API URL. Exemple: "https://yourSyliusAPIDomainName/api/v2/"
54 | NEXT_PUBLIC_API_RESOURCE_BASE_URL=
55 | # Your Sylius API base URL (without the /api/v2). Exemple: "https://yourSyliusAPIDomainName")
56 | NEXT_PUBLIC_API_PUBLIC_URL=
57 | # Your Sylius API Hostname (without the protocol). Exemple: "yourSyliusAPIDomainName"
58 | API_HOST_NAME=
59 | # your stripe public key
60 | NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
61 | # Your Mailchimp Newsletter Form Action URL
62 | MAILCHIMP_URL=
63 | ```
64 | - Tnstall the dependencies: 
65 | ```
66 | yarn install
67 | ```
68 | - Change the default locale (if needed) in lib/config/locales.ts
69 | - Launch the local dev server:
70 | 
71 | ```
72 | yarn dev
73 | ```
74 | 
75 | - it's done ! You can browse you shop!
76 | 


--------------------------------------------------------------------------------
/lib/api/resources/customer.ts:
--------------------------------------------------------------------------------
  1 | import { IRegisterCustomer, IAuthenticateCustomer, ICustomerChangePasswords, ICustomerInformations, ICustomerOrder, IReinitPasswordRequest, INewPasswordAfterForgot } from '../../../types/resources/customerTypes';
  2 | import { postResource, getResource, putResource, getCustomerResource } from '../client';
  3 | import { getCustomerIdFromToken } from '../../resource/customer';
  4 | 
  5 | export const reinitPasswordRequest = async (email: IReinitPasswordRequest): Promise<boolean> => {
  6 |     const body = email;
  7 |     
  8 |     const isMailSent = await postResource('shop/customers/password/reinit-request', null, null, body);
  9 | 
 10 |     return isMailSent;
 11 | } 
 12 | 
 13 | export const validatePasswordToken = async (token: string): Promise<boolean> => {
 14 |     const body = {
 15 |         "token": token
 16 |     };
 17 |     
 18 |     const isTokenValid = await postResource('shop/customers/password/validate-token', null, null, body);
 19 | 
 20 |     return isTokenValid;
 21 | } 
 22 | 
 23 | 
 24 | export const changeCustomerPasswordAfterForgot = async (newPassord: INewPasswordAfterForgot): Promise<boolean> => {
 25 |     const body = newPassord;
 26 |     
 27 |     const isNewPasswordSet = await postResource('shop/customers/password/reinit', null, null, body);
 28 | 
 29 |     return isNewPasswordSet;
 30 | } 
 31 | 
 32 | export const registerCustomer = async (customer: IRegisterCustomer): Promise<any> => {
 33 |     const body = customer;
 34 |     
 35 |     const isCustomerCreated = await postResource('shop/customers/', null, null, body);
 36 |     return isCustomerCreated;
 37 | }
 38 | 
 39 | export const authenthcateCustomer = async (customerCredentials: IAuthenticateCustomer): Promise<any>  => {
 40 |     const body = customerCredentials;
 41 | 
 42 |     const customerToken = await postResource('shop/authentication-token', null, null, body);
 43 | 
 44 |     return customerToken;
 45 | }
 46 | 
 47 | export const changeCustomerPassword = async (customerPasswords: ICustomerChangePasswords): Promise<any> => {
 48 |     const body = customerPasswords;
 49 | 
 50 |     const customerId = getCustomerIdFromToken();
 51 | 
 52 |     if (customerId) {
 53 |         return await putResource('shop/customers/{id}/password', {
 54 |             "id": customerId
 55 |         }, null, body)
 56 |     }
 57 | 
 58 |     return false;
 59 | }
 60 | 
 61 | export const changeCustomerInformations = async (customerInformations: ICustomerInformations): Promise<any> => {
 62 |     const body = customerInformations;
 63 | 
 64 |     const customerId = getCustomerIdFromToken();
 65 | 
 66 |     if (customerId) {
 67 |         return await putResource('shop/customers/{id}', {
 68 |             "id": customerId
 69 |         }, null, body)
 70 |     }
 71 | 
 72 |     return false;
 73 | }
 74 | 
 75 | export const getCustomer = async (customerId: number): Promise<any> => {
 76 |     const customer = await getCustomerResource('shop/customers/{id}', {
 77 |         "id": customerId
 78 |     });
 79 | 
 80 |     return customer;
 81 | }
 82 | 
 83 | export const isEmailRegistered = async (email: string): Promise<boolean> => {
 84 |     return await getResource('shop/customers/email/{id}', {
 85 |         "id": email
 86 |     });
 87 | }
 88 | 
 89 | export const getCustomerOrders = async (): Promise<any> => {
 90 |     const orders: ICustomerOrder[] | false = await getResource('shop/orders');
 91 | 
 92 |     return orders;
 93 | }
 94 | 
 95 | export const getCustomerFromCookie = async (): Promise<any> => {
 96 |     const customerId = getCustomerIdFromToken();
 97 | 
 98 |     if (customerId) {
 99 |         return await getCustomer(customerId);
100 |     } 
101 | 
102 |     return false;
103 | }


--------------------------------------------------------------------------------
/lib/api/resources/cart.ts:
--------------------------------------------------------------------------------
  1 | import { getResource, postResource, patchResource, deleteResource } from '../client';
  2 | import { getLocale } from '../../config/locales';
  3 | import Cookies from 'js-cookie';
  4 | import { IOrder } from '../../../types/resources/orderTypes';
  5 | import { IAddAddressesToCart } from '../../../types/resources/cartTypes';
  6 | import { removeCustomerTokenFromCookie } from '../../resource/customer';
  7 | 
  8 | export const addProductToCart = async (productCode: string, productVariantCode: string, quantity: number): Promise<IOrder> => {
  9 |     const orderToken = await getOrderToken();
 10 | 
 11 |     const pathParams = {
 12 |         'id': orderToken
 13 |     }
 14 | 
 15 |     const body = {
 16 |         "productCode": productCode,
 17 |         "productVariantCode": productVariantCode,
 18 |         "quantity": quantity
 19 |     };
 20 | 
 21 |     return await patchResource('shop/orders/{id}/items', pathParams, null, body);
 22 | }
 23 | 
 24 | export const addAddressesToCart: IAddAddressesToCart = async (addresses)  => {
 25 |     const orderToken = await getOrderToken();
 26 | 
 27 |     const pathParams = {
 28 |         'id': orderToken
 29 |     }
 30 | 
 31 |     const body = addresses;
 32 | 
 33 |     return await patchResource('shop/orders/{id}/address', pathParams, null, body);
 34 | }
 35 | 
 36 | export const completeCart = async (orderToken: string): Promise<IOrder> => {
 37 | 
 38 |     const pathParams = {
 39 |         'id': orderToken
 40 |     }
 41 | 
 42 |     const body = {};
 43 | 
 44 |     return await patchResource('shop/orders/{id}/complete', pathParams, null, body);
 45 | }
 46 | 
 47 | export const applyCoupon = async (couponCode: string): Promise<IOrder> => {
 48 |     const orderToken = await getOrderToken();
 49 | 
 50 |     const pathParams = {
 51 |         'id': orderToken
 52 |     }
 53 | 
 54 |     const body = {
 55 |         "couponCode": couponCode
 56 |     }
 57 | 
 58 |     return await patchResource('shop/orders/{id}/apply-coupon', pathParams, null, body);
 59 | }
 60 | 
 61 | export const createStripeCheckoutSession = async (orderToken: string): Promise<any> => {
 62 |     const pathParams = {
 63 |         'id': orderToken
 64 |     }
 65 | 
 66 |     const body = {};
 67 | 
 68 |     return await postResource('shop/orders/{id}/stripe/checkout', pathParams, null, body);
 69 | }
 70 | 
 71 | export const removeOrderFromCookie = () => {
 72 |     Cookies.remove('cartToken');
 73 | }
 74 | 
 75 | export const deleteCart = async (orderToken: string): Promise<boolean> => {
 76 | 
 77 |     const pathParams = {
 78 |         'id': orderToken
 79 |     }
 80 | 
 81 |     const isOrderDeleted = await deleteResource('shop/orders/{id}', pathParams);
 82 | 
 83 |     if (isOrderDeleted) {
 84 |         removeOrderFromCookie();
 85 |     }
 86 | 
 87 |     return isOrderDeleted; 
 88 | }
 89 | 
 90 | 
 91 | const getOrderToken =  async(): Promise<string> => {
 92 |     let cookieCartToken = Cookies.get('cartToken');
 93 | 
 94 |     if (cookieCartToken) {
 95 |         return cookieCartToken;
 96 |     }
 97 | 
 98 |     const order: IOrder = await postResource('shop/orders', null, null, {
 99 |         localeCode: getLocale()
100 |     });
101 | 
102 |     if (order) {
103 |         Cookies.set('cartToken', order.tokenValue);
104 |     } else {
105 |         removeCustomerTokenFromCookie();
106 |     }
107 |     return order.tokenValue
108 | }
109 | 
110 | 
111 | export const getOrderFromCookie = async (): Promise<IOrder | null> => {
112 |     let order = null
113 |     const cookieCartToken = Cookies.get('cartToken');
114 | 
115 | 
116 |     if (cookieCartToken) {
117 |         order = await getResource('shop/orders/{id}', {
118 |             'id': cookieCartToken
119 |         });
120 |     }
121 | 
122 |     return order;
123 | }
124 | 


--------------------------------------------------------------------------------
/pages/account/register.tsx:
--------------------------------------------------------------------------------
  1 | import { getAllTaxons } from "../../lib/api/resources/taxon";
  2 | import { InferGetStaticPropsType } from 'next';
  3 | import Layout from "../../components/layout/Layout";
  4 | import { logoutCustomer, submitRegister, removeCustomerTokenFromCookie } from '../../lib/resource/customer';
  5 | import { useContext, useEffect } from 'react';
  6 | import { useRouter } from "next/router";
  7 | import MessageContext from "../../components/MessageContext";
  8 | import { Helmet } from "react-helmet";
  9 | import Breadcrumb from "../../components/layout/breadcrumb";
 10 | import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
 11 | import Link from "next/link";
 12 | import { getCustomerFromCookie } from '../../lib/api/resources/customer';
 13 | import LoadingContext from '../../components/LoadingContext';
 14 | 
 15 | const Register = (
 16 |     { taxons }: InferGetStaticPropsType<typeof getStaticProps>
 17 | ) => {
 18 | 
 19 |     const router = useRouter();
 20 |     const { setMessage } = useContext(MessageContext);
 21 |     const { setLoading } = useContext(LoadingContext);    
 22 | 
 23 |     useEffect(() => {
 24 |         setMessage(null);
 25 | 
 26 |         (async () => {
 27 |             setLoading(true);
 28 |             const customer = await getCustomerFromCookie();
 29 |             setLoading(false);
 30 | 
 31 |             if (customer) {
 32 |                 router.push('/account');
 33 |             } else {
 34 |                 removeCustomerTokenFromCookie();
 35 |             }
 36 |         })();
 37 | 
 38 |     }, []);
 39 | 
 40 |     const onSubmitRegister = async (event: React.FormEvent<HTMLFormElement>) => {
 41 |         setLoading(true);
 42 |         const isCustomerCreated = await submitRegister(event);
 43 |         setLoading(false);
 44 | 
 45 |         if (isCustomerCreated) {
 46 |             setMessage({
 47 |                 'message': "Your account is created. You can now login",
 48 |                 'type': 'success'
 49 |             });
 50 |             logoutCustomer(router);
 51 |         } else {
 52 |             setMessage({
 53 |                 'message': "The account can't be created. Check that all the fields have been filled and that the email is not already used with another account",
 54 |                 'type': 'error'
 55 |             });
 56 |         }
 57 |     }
 58 | 
 59 |     return (
 60 |         <Layout taxons={taxons}>
 61 | 
 62 |             <Helmet>
 63 |                 <title>Register</title>
 64 |             </Helmet>
 65 | 
 66 |             <Breadcrumb title="Register" parents={[]} />
 67 | 
 68 |             <h3 className="nav-link">Register</h3>
 69 | 
 70 |             <form onSubmit={(event) => onSubmitRegister(event)}>
 71 |                 <label htmlFor="firstName">Firstname*</label>
 72 |                 <input required={true} type="text" name="firstName" />
 73 |             
 74 |                 <label htmlFor="lastName">Lastname*</label>
 75 |                 <input required={true} type="text" name="lastName" />
 76 |             
 77 |                 <label htmlFor="email">Email*</label>
 78 |                 <input required={true} type="text" name="email" />
 79 |             
 80 |                 <label htmlFor="password">Password*</label>
 81 |                 <input required={true} type="password" name="password" />
 82 |             
 83 |                 <button type="submit">
 84 |                     <span>Register</span>
 85 |                 </button>
 86 |             </form>
 87 | 
 88 |             <p >You already have an account?</p>
 89 |             <Link href={'/account/login'}>
 90 |                 <a>
 91 |                     <button>Login</button>
 92 |                 </a>
 93 |             </Link>
 94 | 
 95 |         </Layout>
 96 |     );
 97 | }
 98 | 
 99 | export const getStaticProps = async () => {
100 |     const taxons = await getAllTaxons();
101 | 
102 |     return {
103 |         props: {
104 |             taxons
105 |         }
106 |     }
107 | }
108 | 
109 | export default Register;


--------------------------------------------------------------------------------
/pages/categories/[categorySlug]/[productSlug].tsx:
--------------------------------------------------------------------------------
  1 | import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
  2 | import Layout from '../../../components/layout/Layout';
  3 | import { getResourceTranslation } from '../../../lib/api/resources/common';
  4 | import { getAllProducts, getProductByTranslatedSlug, getProductsByTaxon } from '../../../lib/api/resources/product';
  5 | import { getAllTaxons } from '../../../lib/api/resources/taxon';
  6 | import { getGenericMainTaxonSlug, getTaxonRelativeUrl } from '../../../lib/api/urls';
  7 | import { getTaxonBySlugFromCollection } from '../../../lib/resource/taxon';
  8 | import { IProduct } from '../../../types/resources/productTypes';
  9 | import { ITaxon } from '../../../types/resources/taxonTypes';
 10 | import React, { useContext } from 'react';
 11 | import { useEffect } from 'react';
 12 | import MessageContext from '../../../components/MessageContext';
 13 | import { Helmet } from 'react-helmet';
 14 | import Breadcrumb from '../../../components/layout/breadcrumb';
 15 | import ProductImages from '../../../components/Product/ProductImages';
 16 | import ProductDetails from '../../../components/Product/ProductDetails';
 17 | import ProductTabs from '../../../components/Product/ProductTabs';
 18 | import RelatedProducts from '../../../components/Product/RelatedProducts';
 19 | 
 20 | type ProductProps = {
 21 |     taxons: ITaxon[],
 22 |     currentTaxon: ITaxon | null,
 23 |     product: IProduct,
 24 |     relatedProducts: IProduct[] | null
 25 | }
 26 | 
 27 | 
 28 | const Product = (
 29 |     { taxons, currentTaxon, product, relatedProducts }: InferGetStaticPropsType<typeof getStaticProps>
 30 | ) => {
 31 |     const { setMessage } = useContext(MessageContext);
 32 | 
 33 |     useEffect(() => {
 34 |         setMessage(null);
 35 |     }, []); 
 36 | 
 37 |     return (
 38 |         <Layout taxons={taxons}>
 39 | 
 40 |             <Helmet>
 41 |                 <title>{getResourceTranslation(product).name}</title>
 42 |             </Helmet>
 43 | 
 44 |             <Breadcrumb
 45 |                 title={getResourceTranslation(product).name}
 46 |                 parents={ [
 47 |                     {
 48 |                         'title':currentTaxon ? getResourceTranslation(currentTaxon).name : '',
 49 |                         'path': currentTaxon ? getTaxonRelativeUrl(currentTaxon) : ''
 50 |                         
 51 |                     }
 52 |                 ]}
 53 |             />
 54 |             
 55 |             <ProductImages product={ product } />
 56 |         
 57 |             <ProductDetails product={ product } currentTaxon={currentTaxon} />
 58 | 
 59 |             <ProductTabs product={product} />
 60 | 
 61 |             <h2>Related products:</h2>
 62 | 
 63 |             <RelatedProducts products={relatedProducts}/>
 64 | 
 65 |         </Layout>
 66 |     );
 67 | }
 68 | 
 69 | export const getStaticPaths: GetStaticPaths = async () => {
 70 |     const products = await getAllProducts();    
 71 | 
 72 |     const paths = products.map((product: IProduct) => ({
 73 |         params: {
 74 |             categorySlug: product.mainTaxon ? getResourceTranslation(product.mainTaxon).slug : getGenericMainTaxonSlug(),
 75 |             productSlug: getResourceTranslation(product).slug
 76 |         }
 77 |     }));
 78 | 
 79 |     return {
 80 |         paths,
 81 |         fallback: false
 82 |     }
 83 | }
 84 | 
 85 | export const getStaticProps: GetStaticProps<ProductProps> = async ({ params }) => {
 86 | 
 87 |     const taxonTranslatedSlug = params?.categorySlug as string;
 88 |     const taxons: ITaxon[] = await getAllTaxons();
 89 |     const currentTaxon = getTaxonBySlugFromCollection(taxons, taxonTranslatedSlug);
 90 | 
 91 |     const productTranslatedSlug = params?.productSlug as string;
 92 |     const product = await getProductByTranslatedSlug(productTranslatedSlug);
 93 | 
 94 |     let relatedProducts = null;
 95 |     if (currentTaxon) {
 96 |         relatedProducts = await getProductsByTaxon(currentTaxon);
 97 |     }
 98 | 
 99 |     return {
100 |         props: {
101 |             taxons,
102 |             currentTaxon,
103 |             product,
104 |             relatedProducts
105 |         },
106 |         revalidate: 60
107 |     }
108 | }
109 | 
110 | export default Product;


--------------------------------------------------------------------------------
/pages/forgotten-password.tsx:
--------------------------------------------------------------------------------
  1 | import { InferGetStaticPropsType } from "next";
  2 | import { getAllTaxons } from "../lib/api/resources/taxon";
  3 | import Layout from "../components/layout/Layout";
  4 | import { useContext, useEffect, useState } from 'react';
  5 | import MessageContext from "../components/MessageContext";
  6 | import { Helmet } from 'react-helmet';
  7 | import Breadcrumb from "../components/layout/breadcrumb";
  8 | import LoadingContext from '../components/LoadingContext';
  9 | import { submitForgottenPassword, submitNewPasswordAfterForgot } from '../lib/resource/customer';
 10 | import { useRouter } from "next/router";
 11 | import { getQueryParam } from "../lib/router/router";
 12 | 
 13 | const ForgottenPassword = (
 14 |     { taxons }: InferGetStaticPropsType<typeof getStaticProps>
 15 | ) => {
 16 | 
 17 |     const { setMessage } = useContext(MessageContext);
 18 |     const { setLoading } = useContext(LoadingContext); 
 19 |     const [ token, setToken ] = useState<string | null>(null);
 20 |     const router = useRouter();
 21 | 
 22 |     useEffect(() => {
 23 |         setMessage(null);
 24 |         (async () => {
 25 |             const token = getQueryParam("token") 
 26 |             if (token) {
 27 |                 setToken(token);
 28 |             }
 29 |         })();
 30 |     }, []); 
 31 |     
 32 |     const onSubmitForgottenPassword = async (event: React.FormEvent<HTMLFormElement>) => {
 33 |         setLoading(true);
 34 |         const isMailSent = await submitForgottenPassword(event);
 35 |         setLoading(false);
 36 | 
 37 |         if (isMailSent) {
 38 |             setMessage({
 39 |                 'message': "If your account exists, you will receive an email with the instruction to reset your password",
 40 |                 'type': 'success'
 41 |             });
 42 |         } else {
 43 |             setMessage({
 44 |                 'message': "We can't reset your password",
 45 |                 'type': 'error'
 46 |             });
 47 |         }
 48 |     }
 49 | 
 50 |     const onSubmitNewPasswordAfterForgot = async (event: React.FormEvent<HTMLFormElement>) => {
 51 |         if (token) {
 52 |             setLoading(true);
 53 |             const isNewPasswordSet = await submitNewPasswordAfterForgot(event, token);
 54 |             setLoading(false);
 55 |     
 56 |             if (isNewPasswordSet) {
 57 |                 setMessage({
 58 |                     'message': "You can now login with your new password",
 59 |                     'type': 'success'
 60 |                 });
 61 |                 router.push('/account/login');
 62 |             } else {
 63 |                 setMessage({
 64 |                     'message': "The password have not been updated, the URL is invalid or expired",
 65 |                     'type': 'error'
 66 |                 });
 67 |             }
 68 |         }
 69 |     }
 70 | 
 71 |     return (
 72 |         <Layout taxons={taxons}>
 73 | 
 74 |             <Helmet>
 75 |                 <title>Forgotten password</title>
 76 |             </Helmet>
 77 |                 
 78 |             <Breadcrumb
 79 |                 title="Forgotten password"
 80 |                 parents={[]}
 81 |             />
 82 | 
 83 |             {token ?
 84 |                 <form onSubmit={(event) => onSubmitNewPasswordAfterForgot(event)}>
 85 |                     <label htmlFor="newPassword">New password*</label>
 86 |                     <input type="password" name="newPassword" required />
 87 | 
 88 |                     <button type="submit">
 89 |                         <span>Submit the new password</span>
 90 |                     </button>
 91 |                 </form> 
 92 |             :
 93 |                 <>
 94 |                     <h4>Reset your pawssword</h4> 
 95 |                     <form onSubmit={(event) => onSubmitForgottenPassword(event)}>
 96 |                         <label htmlFor="email">Email*</label>
 97 |                         <input required={true} type="text" name="email" />
 98 |                         <button type="submit">
 99 |                             <span>Reset</span>
100 |                         </button>
101 |                     </form>
102 | 
103 |                 </>
104 |             }
105 |         </Layout>
106 |     );
107 | }
108 | 
109 | export const getStaticProps = async () => {
110 |     const taxons = await getAllTaxons();
111 | 
112 |     return {
113 |         props: {
114 |             taxons
115 |         }
116 |     }
117 | }
118 | 
119 | export default ForgottenPassword;


--------------------------------------------------------------------------------
/pages/account/password.tsx:
--------------------------------------------------------------------------------
  1 | import { getAllTaxons } from "../../lib/api/resources/taxon";
  2 | import { InferGetStaticPropsType } from 'next';
  3 | import Layout from "../../components/layout/Layout";
  4 | import { useRouter } from "next/router";
  5 | import { useContext, useEffect, useState } from 'react';
  6 | import { ICustomer } from '../../types/resources/customerTypes';
  7 | import { getCustomerFromCookie } from "../../lib/api/resources/customer";
  8 | import { logoutCustomer, submitNewPassword } from "../../lib/resource/customer";
  9 | import AccountNav from "../../components/account/AccountNav";
 10 | import MessageContext from "../../components/MessageContext";
 11 | import { Helmet } from "react-helmet";
 12 | import Breadcrumb from "../../components/layout/breadcrumb";
 13 | import LoadingContext from '../../components/LoadingContext';
 14 | 
 15 | const Password = (
 16 |     { taxons }: InferGetStaticPropsType<typeof getStaticProps>
 17 | ) => {
 18 | 
 19 |     const router = useRouter();
 20 |     const [customer, setCustomer] = useState<ICustomer | null>(null);
 21 |     const { setMessage } = useContext(MessageContext);
 22 |     const { setLoading } = useContext(LoadingContext);    
 23 | 
 24 |     useEffect(() => {
 25 |         setMessage(null);
 26 |         (async () => {
 27 |             setLoading(true);
 28 |             const customer = await getCustomerFromCookie();
 29 |             setLoading(false);
 30 | 
 31 |             if (customer) {
 32 |                 setCustomer(customer);
 33 |             } else {
 34 |                 logoutCustomer(router);
 35 |             }
 36 |         })();
 37 |     }, []); 
 38 | 
 39 |     const onModifyPassword = async (event: React.FormEvent<HTMLFormElement>) => {
 40 |         setLoading(true);
 41 |         const isPasswordModified = await submitNewPassword(event);
 42 |         setLoading(false);
 43 | 
 44 |         if (isPasswordModified) {
 45 |             setMessage({
 46 |                 'message': "the password has been updated. You can now login" ,
 47 |                 'type': 'success'
 48 |             });
 49 |             logoutCustomer(router);
 50 |         } else {
 51 |             setMessage({
 52 |                 'message': "The password has not been updated. Check that the confirmation is valid and the new password is not the same as the old one",
 53 |                 'type': 'error'
 54 |             });
 55 |         }
 56 |     }
 57 |     
 58 |     return (
 59 | 
 60 |         <Layout taxons={taxons}>
 61 | 
 62 |             <Helmet>
 63 |                 <title>My password</title>
 64 |             </Helmet>
 65 |            
 66 |             <Breadcrumb title="My password" parents={ [
 67 |                 {
 68 |                     'title': 'My account',
 69 |                     'path': '/account'
 70 |                     
 71 |                 }
 72 |             ]}/>
 73 |         
 74 |             <ul role="tablist">
 75 |                 <AccountNav current={"password"}/>
 76 | 
 77 |                 { customer &&
 78 |                     <>
 79 |                         <h3 className="mb-3">Modify the password</h3>
 80 |                     
 81 |                         <form onSubmit={(event) => onModifyPassword(event)}>
 82 |                             
 83 |                             <label htmlFor="newPassword">New password*</label>
 84 |                             <input required={true} type="password" name="newPassword" />
 85 |                         
 86 |                             <label htmlFor="confirmNewPassword">Confirm the new password*</label>
 87 |                             <input required={true} type="password" name="confirmNewPassword" />
 88 |                                                                         
 89 |                             <label htmlFor="currentPassword">Old password*</label>
 90 |                             <input required={true} type="password" name="currentPassword" />
 91 |                             
 92 |                             <button type="submit">
 93 |                                 <span>Submit</span>
 94 |                             </button>
 95 |                         </form>
 96 |                     </>                                     
 97 |                 }
 98 |             </ul>
 99 | 
100 |         </Layout>
101 |     );
102 | }
103 | 
104 | export const getStaticProps = async () => {
105 |     const taxons = await getAllTaxons();
106 | 
107 |     return {
108 |         props: {
109 |             taxons
110 |         }
111 |     }
112 | }
113 | 
114 | export default Password;


--------------------------------------------------------------------------------
/pages/account/orders.tsx:
--------------------------------------------------------------------------------
  1 | import { getAllTaxons } from "../../lib/api/resources/taxon";
  2 | import { InferGetStaticPropsType } from 'next';
  3 | import Layout from "../../components/layout/Layout";
  4 | import { useRouter } from "next/router";
  5 | import { useContext, useEffect, useState } from 'react';
  6 | import { ICustomer, ICustomerOrder } from '../../types/resources/customerTypes';
  7 | import { getCustomerFromCookie, getCustomerOrders } from "../../lib/api/resources/customer";
  8 | import { logoutCustomer } from "../../lib/resource/customer";
  9 | import AccountNav from '../../components/account/AccountNav';
 10 | import { formatDateToLocale } from "../../lib/config/dates";
 11 | import { formatPaymentState, formatShippingState } from '../../lib/resource/cart';
 12 | import MessageContext from "../../components/MessageContext";
 13 | import { Helmet } from "react-helmet";
 14 | import Breadcrumb from "../../components/layout/breadcrumb";
 15 | import { formatMoney } from "../../lib/config/money";
 16 | import LoadingContext from '../../components/LoadingContext';
 17 | 
 18 | const Orders = (
 19 |     { taxons }: InferGetStaticPropsType<typeof getStaticProps>
 20 | ) => {
 21 | 
 22 |     const router = useRouter();
 23 |     const [customer, setCustomer] = useState< ICustomer | null>(null);
 24 |     const [orders, setOrders] = useState<ICustomerOrder[] | false>(false);
 25 |     const { setMessage } = useContext(MessageContext);
 26 |     const { setLoading } = useContext(LoadingContext);    
 27 | 
 28 |     useEffect(() => {
 29 |         setMessage(null);
 30 |         (async () => {
 31 |             setLoading(true);
 32 |             const customer = await getCustomerFromCookie();
 33 | 
 34 |             if (customer) {
 35 |                 setCustomer(customer);
 36 |                 const orders =  await getCustomerOrders();
 37 |                 setOrders(orders);
 38 |                 setLoading(false);
 39 |             } else {
 40 |                 setLoading(false);
 41 |                 logoutCustomer(router);
 42 |             }
 43 |         })();
 44 |     }, []); 
 45 |     
 46 |     return (
 47 | 
 48 | 
 49 |         <Layout taxons={taxons}>
 50 | 
 51 |             <Helmet>
 52 |                 <title>My orders | Cloralys Bijoux</title>
 53 |             </Helmet>
 54 | 
 55 |             <Breadcrumb title="My orders " parents={ [
 56 |                 {
 57 |                     'title': ' My account',
 58 |                     'path': '/account'
 59 |                     
 60 |                 }
 61 |             ]}/>
 62 | 
 63 |                 <AccountNav current={"orders"}/>
 64 | 
 65 |                 { customer &&
 66 |                     <>
 67 |                         <h3>Mes commandes</h3>
 68 |                         
 69 |                         { orders && orders.length > 0 ?
 70 |                             <table>
 71 |                                 <tr>
 72 |                                     <th>Number</th>
 73 |                                     <th>Date</th>
 74 |                                     <th>Payment State</th>
 75 |                                     <th>Shipping state</th>
 76 |                                     <th>Amount</th>
 77 |                                 </tr>
 78 |                                 {orders.map((order, index) => {       
 79 |                                     return(
 80 |                                         <tr key={index}>
 81 |                                             <td>{order.number}</td>
 82 |                                             <td>{formatDateToLocale(order.createdAt)}</td>
 83 |                                             <td>{formatPaymentState(order.paymentState)}</td>
 84 |                                             <td>{formatShippingState(order.shippingState)}</td>
 85 |                                             <td>{formatMoney(order.total)}</td>
 86 |                                         </tr>
 87 |                                     );
 88 |                                 })}
 89 |                             </table>
 90 |                         :
 91 |                             <p>You have not order yet</p>
 92 |                         }
 93 |                                 
 94 |                     </>
 95 | 
 96 |                 }
 97 | 
 98 |         </Layout>
 99 |     );
100 | }
101 | 
102 | export const getStaticProps = async () => {
103 |     const taxons = await getAllTaxons();
104 | 
105 |     return {
106 |         props: {
107 |             taxons
108 |         }
109 |     }
110 | }
111 | 
112 | export default Orders;


--------------------------------------------------------------------------------
/lib/resource/customer.ts:
--------------------------------------------------------------------------------
  1 | import { authenthcateCustomer, changeCustomerInformations, changeCustomerPassword, registerCustomer, reinitPasswordRequest, changeCustomerPasswordAfterForgot, isEmailRegistered } from '../api/resources/customer';
  2 | import Cookies from 'js-cookie';
  3 | import { NextRouter } from "next/router";
  4 | import { ICustomerTokenPayload } from "../../types/resources/customerTypes";
  5 | import jwt from 'jwt-decode';
  6 | 
  7 | export const checkIfUserExist = async (event: React.FormEvent<HTMLFormElement>) => {
  8 |     event.preventDefault();
  9 | 
 10 |     const target = event.target as HTMLFormElement;
 11 |     const email = target.email.value;
 12 |     
 13 |     return await isEmailRegistered(email);
 14 | }
 15 | 
 16 | export const submitForgottenPassword = async (event: React.FormEvent<HTMLFormElement>): Promise<any> => {
 17 |     event.preventDefault();
 18 |     const target = event.target as HTMLFormElement;
 19 | 
 20 |     const email = {
 21 |         "email": target.email.value
 22 |    }
 23 | 
 24 |    return await reinitPasswordRequest(email);
 25 | }
 26 | 
 27 | export const submitNewPasswordAfterForgot = async (event: React.FormEvent<HTMLFormElement>, token: string): Promise<boolean> => {
 28 |     event.preventDefault();
 29 |     const target = event.target as HTMLFormElement;
 30 | 
 31 |     const newPassword = {
 32 |         "newPassword": target.newPassword.value,
 33 |         "token": token
 34 |    }
 35 | 
 36 |    return await changeCustomerPasswordAfterForgot(newPassword);
 37 | }
 38 | 
 39 | 
 40 | export const submitRegister = async (event: React.FormEvent<HTMLFormElement>): Promise<any> => {
 41 |     event.preventDefault();
 42 |     const target = event.target as HTMLFormElement;
 43 | 
 44 |     const customer = {
 45 |         "firstName": target.firstName.value,
 46 |         "lastName": target.lastName.value,
 47 |         "email": target.email.value,
 48 |         "password": target.password.value,
 49 |    }
 50 | 
 51 |    return await registerCustomer(customer);
 52 | }
 53 | 
 54 | export const submitConnexion = async (event: React.FormEvent<HTMLFormElement>): Promise<any> => {
 55 |     event.preventDefault();
 56 |     const target = event.target as HTMLFormElement;
 57 | 
 58 |     const customerCredentials = {
 59 |         "email": target.email.value,
 60 |         "password": target.password.value,
 61 |     }
 62 | 
 63 |     return await authenthcateCustomer(customerCredentials);
 64 | }
 65 | 
 66 | 
 67 | export const submitNewPassword = async (event : React.FormEvent<HTMLFormElement>): Promise<any>  => {
 68 |     event.preventDefault();
 69 |     const target = event.target as HTMLFormElement;
 70 | 
 71 |     const customerPasswords = {
 72 |         "newPassword": target.newPassword.value,
 73 |         "confirmNewPassword": target.confirmNewPassword.value,
 74 |         "currentPassword": target.currentPassword.value
 75 |     }
 76 | 
 77 |     return await changeCustomerPassword(customerPasswords);
 78 | }
 79 | 
 80 | export const submitNewCustomerInformations = async (event : React.FormEvent<HTMLFormElement>): Promise<any>  => {
 81 |     event.preventDefault();
 82 |     const target = event.target as HTMLFormElement;
 83 | 
 84 |     const customerInformations = {
 85 |         "firstName": target.firstName.value,
 86 |         "lastName": target.lastName.value,
 87 |         "email": target.email.value
 88 |     }
 89 | 
 90 |     return await changeCustomerInformations(customerInformations);
 91 | }
 92 | 
 93 | export const storeCustomerToken = (customerToken: string) => {
 94 |     Cookies.set('customerToken', customerToken, { sameSite:'strict' });
 95 | }
 96 | 
 97 | export const getCustomerTokenFromCookie = (): string | false => {
 98 |     const customerToken = Cookies.get('customerToken');
 99 | 
100 |     if (customerToken) {
101 |         return customerToken;
102 |     }
103 | 
104 |     return false;
105 | }
106 | 
107 | export const getCustomerIdFromToken = (): number | false => {
108 |     const customerToken = getCustomerTokenFromCookie();
109 | 
110 |     if (customerToken) {
111 |         const customerTokenDecoded: ICustomerTokenPayload = jwt(customerToken);
112 |         if (customerTokenDecoded.id) {
113 |             return customerTokenDecoded.id;
114 |         }
115 |     }
116 | 
117 |     return false;
118 | }
119 | 
120 | export const removeCustomerTokenFromCookie = () => {
121 |     Cookies.remove('customerToken');
122 | }
123 | 
124 | export const logoutCustomer = (router: NextRouter) => {
125 |     removeCustomerTokenFromCookie();
126 |     router.push('/account/login');
127 | }


--------------------------------------------------------------------------------
/lib/api/client.ts:
--------------------------------------------------------------------------------
  1 | import { IGetResource, IPostResource, IPatchResource, IDeleteResource, IPutResource } from '../../types/fetchTypes';
  2 | import { getResourceUrl } from './urls';
  3 | import { getCustomerTokenFromCookie, removeCustomerTokenFromCookie } from '../resource/customer';
  4 | import { getCustomerFromCookie } from './resources/customer';
  5 | 
  6 | 
  7 | export const postResource: IPostResource = async (ressourceLocator, pathParams, queryParams, body) => {
  8 |     const url = getResourceUrl(ressourceLocator, pathParams, queryParams);
  9 | 
 10 |     return postFetchResponse(url, body).then((response) => {
 11 |         if (response.ok) {
 12 |           return response.json();
 13 |         } else {
 14 |           return false;
 15 |         }
 16 |     }).catch(() => {
 17 |         return true;
 18 |     });
 19 | }
 20 | 
 21 | export const patchResource: IPatchResource = async (ressourceLocator, pathParams, queryParams, body) => {
 22 |     const url = getResourceUrl(ressourceLocator, pathParams, queryParams);
 23 | 
 24 |     return patchFetchResponse(url, body).then((response) => {
 25 |         if (response.ok) {
 26 |           return response.json();
 27 |         } else {
 28 |           return false;
 29 |         }
 30 |     }).catch(() => {
 31 |         return true;
 32 |     });
 33 | }
 34 | 
 35 | export const putResource: IPutResource = async (ressourceLocator, pathParams, queryParams, body) => {
 36 |     const url = getResourceUrl(ressourceLocator, pathParams, queryParams);
 37 | 
 38 |     const response = await putFetchResponse(url, body);
 39 | 
 40 |     if (!response.ok) {
 41 |         return false;
 42 |     }
 43 | 
 44 |     return true;
 45 | }
 46 | 
 47 | export const deleteResource: IDeleteResource = async (resourceLocator, pathParams, queryParams) => {
 48 |     const url = getResourceUrl(resourceLocator, pathParams, queryParams);
 49 | 
 50 |     const response = await deleteFetchResponse(url);
 51 | 
 52 |     if (!response.ok) {
 53 |         return false;
 54 |     }
 55 | 
 56 |     return true
 57 | }
 58 | 
 59 | export const getResource: IGetResource = async (ressourceLocator, pathParams, queryParams) => {
 60 | 
 61 |     const url = getResourceUrl(ressourceLocator, pathParams, queryParams);
 62 |     
 63 |     return getFetchResponse(url).then((response) => {
 64 |         if (response.ok) {
 65 |           return response.json();
 66 |         } else {
 67 |           return false;
 68 |         }
 69 |     }).catch(() => {
 70 |         return true;
 71 |     });
 72 | }
 73 | 
 74 | export const getCustomerResource: IGetResource = async (ressourceLocator, pathParams, queryParams) => {
 75 | 
 76 |     const url = getResourceUrl(ressourceLocator, pathParams, queryParams);
 77 |     const customerToken = getCustomerTokenFromCookie();
 78 | 
 79 |     return await fetch(url, {
 80 |         method: 'GET',
 81 |         headers: {
 82 |             'Accept': 'application/json',
 83 |             'Content-Type': 'application/json',
 84 |             'Authorization': `Bearer ${customerToken}`
 85 |         }
 86 |     }).then((response) => {
 87 |         if (response.ok) {
 88 |           return response.json();
 89 |         } else {
 90 |           return false;
 91 |         }
 92 |     }).catch(() => {
 93 |         return true;
 94 |     });
 95 | }
 96 | 
 97 | const getFetchResponse = async (url: string) => {
 98 |     return await fetchApi('GET', url);
 99 | }
100 | 
101 | const deleteFetchResponse = async (url: string) => {
102 |     return await fetchApi('DELETE', url);
103 | }
104 | 
105 | const postFetchResponse = async (url: string, body?: {}) => {
106 |     return await fetchApi('POST', url, body);
107 | }
108 | 
109 | const putFetchResponse = async (url: string, body?: {}) => {
110 |     return await fetchApi('PUT', url, body);
111 | }
112 | 
113 | const patchFetchResponse = async (url: string, body?: {}) => {
114 |     return await fetchApi('PATCH', url, body);
115 | }
116 | 
117 | const fetchApi = async (httpMethod: string, url: string, body?: {}) => {
118 | 
119 |     const customerToken = getCustomerTokenFromCookie();
120 |     let customer = false;
121 | 
122 |     if (customerToken) {
123 |         customer = await getCustomerFromCookie();
124 |         if (!customer) {
125 |             removeCustomerTokenFromCookie();
126 |         }
127 |     }
128 | 
129 |     return await fetch(url, {
130 |         method: httpMethod,
131 |         headers: {
132 |             'Accept': 'application/json',
133 |             'Content-Type': httpMethod === 'PATCH' ? 'application/merge-patch+json' : 'application/json',
134 |             'Authorization': customer ? `Bearer ${customerToken}` : ''
135 |         },
136 |         body: body ? JSON.stringify(body) : null
137 |     });
138 | }
139 | 
140 | 


--------------------------------------------------------------------------------
/pages/cart/index.tsx:
--------------------------------------------------------------------------------
  1 | import { getAllTaxons } from '../../lib/api/resources/taxon';
  2 | import { InferGetStaticPropsType } from 'next';
  3 | import Layout from '../../components/layout/Layout';
  4 | import { useContext, useState, useEffect } from 'react';
  5 | import CartContext from '../../components/CartContext';
  6 | import { deleteCart } from '../../lib/api/resources/cart';
  7 | import CartItems from '../../components/cart/CartItems';
  8 | import { submitCoupon } from '../../lib/resource/cart';
  9 | import { getCustomerFromCookie } from '../../lib/api/resources/customer';
 10 | import { ICustomer } from '../../types/resources/customerTypes';
 11 | import MessageContext from '../../components/MessageContext';
 12 | import { Helmet } from 'react-helmet';
 13 | import Breadcrumb from '../../components/layout/breadcrumb';
 14 | import CartResume from '../../components/cart/CartResume';
 15 | import Link from 'next/link';
 16 | import LoadingContext from '../../components/LoadingContext';
 17 | 
 18 | const Cart = (
 19 |     { taxons }: InferGetStaticPropsType<typeof getStaticProps>
 20 | ) => {
 21 |     const { cart, setCart } = useContext(CartContext);
 22 |     const [customer, setCustomer] = useState< ICustomer | null>(null);
 23 |     const { setMessage } = useContext(MessageContext);
 24 |     const { setLoading } = useContext(LoadingContext);    
 25 | 
 26 |     useEffect(() => {
 27 |         setMessage(null);
 28 |     }, []);
 29 | 
 30 |     const onDeleteCart = async (cartToken: string) => {
 31 |         setLoading(true);
 32 |         const isOrderDeleted = await deleteCart(cartToken);
 33 |         setLoading(false);
 34 | 
 35 |         if (isOrderDeleted) {
 36 |             setCart(null);
 37 |         }
 38 |     }
 39 | 
 40 |     const onSubmitCoupon = async (event: React.FormEvent<HTMLFormElement>) => {
 41 |         setLoading(true);
 42 |         const orderUpdated = await submitCoupon(event);
 43 |         setLoading(false);
 44 |         
 45 |         if (orderUpdated.orderPromotionTotal != 0) {
 46 |             setCart(orderUpdated);
 47 |             setMessage({
 48 |                 'message': 'Your discount code has been applied',
 49 |                 'type': 'success'
 50 |             });
 51 |         } else {
 52 |             setMessage({
 53 |                 'message': "Your discount code is not valid",
 54 |                 'type': 'error'
 55 |             });
 56 |         }
 57 |         
 58 |     }
 59 | 
 60 |     useEffect(() => {
 61 |         (async () => {
 62 |             setLoading(true);
 63 |             const customer = await getCustomerFromCookie();
 64 |             setLoading(false);
 65 | 
 66 |             if (customer) {
 67 |                 setCustomer(customer);
 68 |             }
 69 |         })();
 70 |     }, []); 
 71 | 
 72 |     return (
 73 |         <Layout taxons={taxons}>
 74 | 
 75 |             <Helmet>
 76 |                 <title>Cart</title>
 77 |             </Helmet>
 78 | 
 79 |             <Breadcrumb 
 80 |                 title="My cart"
 81 |                 parents={[]}
 82 |             />
 83 | 
 84 |             <CartItems cart={cart}/>
 85 | 
 86 |             {cart && cart.items.length > 0 &&
 87 |                 <>
 88 |                     <form onSubmit={(event) => {onSubmitCoupon(event)}}>
 89 |                         <input type="text" name="coupon_code" placeholder="coupon code" />
 90 |                         <button type="submit">Apply</button>
 91 |                     </form>
 92 | 
 93 |                     <button onClick={() => onDeleteCart(cart.tokenValue)} >
 94 |                         <span>Clear the cart</span>
 95 |                     </button>
 96 | 
 97 |                 </>
 98 |             }
 99 | 
100 |             <CartResume cart={cart} customer={customer}/>
101 | 
102 |             { customer ?
103 |                 <Link href={'/cart/adresses'}>
104 |                     <a>Submit the cart</a>
105 |                 </Link>
106 |             :
107 |                 <>
108 |                     <Link href={'/account/login'}>
109 |                         <a>Submit the cart with your customer account</a>
110 |                     </Link>
111 |                     <p>or</p>
112 |                     <Link href={'/cart/adresses'}>
113 |                         <a>Submit the cart without login</a>
114 |                     </Link>
115 |                 </>
116 |             }
117 | 
118 |             <div>
119 |                 <Link href={'/'}> 
120 |                     <a>
121 |                         <span>Keep shopping</span>
122 |                     </a>
123 |                 </Link>
124 |             </div>
125 | 
126 |         </Layout>
127 |     );
128 | }
129 | 
130 | export const getStaticProps = async () => {
131 | 
132 |     const taxons = await getAllTaxons();
133 | 
134 |     return {
135 |         props: {
136 |             taxons
137 |         }
138 |     }
139 | }
140 | 
141 | export default Cart;


--------------------------------------------------------------------------------
/pages/cart/adresses.tsx:
--------------------------------------------------------------------------------
  1 | import { getAllTaxons } from '../../lib/api/resources/taxon';
  2 | import { InferGetStaticPropsType } from 'next';
  3 | import Layout from '../../components/layout/Layout';
  4 | import { useContext, useEffect, useState } from 'react';
  5 | import CartContext from '../../components/CartContext';
  6 | import { useRouter } from 'next/router';
  7 | import { canOrderComplete, submitAddresses } from '../../lib/resource/cart';
  8 | import { getCustomerFromCookie } from '../../lib/api/resources/customer';
  9 | import { ICustomer } from '../../types/resources/customerTypes';
 10 | import MessageContext from '../../components/MessageContext';
 11 | import { Helmet } from 'react-helmet';
 12 | import Breadcrumb from '../../components/layout/breadcrumb';
 13 | import CartResume from '../../components/cart/CartResume';
 14 | import LoadingContext from '../../components/LoadingContext';
 15 | import { getCountries } from '../../lib/api/resources/country';
 16 | import { getName as getCountryName, registerLocale as registerCountryLocale } from 'i18n-iso-countries';
 17 | import { checkIfUserExist } from '../../lib/resource/customer';
 18 | import { ICountry } from '../../types/resources/countryTypes';
 19 | 
 20 | const Addresses = (
 21 |     { taxons }: InferGetStaticPropsType<typeof getStaticProps>
 22 | ) => {
 23 | 
 24 |     const { cart, setCart } = useContext(CartContext);
 25 |     const router = useRouter();
 26 |     const [customer, setCustomer] = useState< ICustomer | null>(null);
 27 |     const { setMessage } = useContext(MessageContext);
 28 |     const { setLoading } = useContext(LoadingContext);    
 29 |     const [ countries, setCountries ] = useState<ICountry[]>([]);
 30 | 
 31 |     useEffect(() => {
 32 |         setLoading(true);
 33 | 
 34 |         (async () => {
 35 |             const countriesShipping = await getCountries();
 36 |             setCountries(countriesShipping);
 37 |         })();
 38 | 
 39 |         registerCountryLocale(require("i18n-iso-countries/langs/fr.json"));
 40 |         setMessage(null);
 41 |         setLoading(false);
 42 |     }, []); 
 43 | 
 44 |     const onSubmitAddresses = async (event: React.FormEvent<HTMLFormElement>) => {
 45 |         setLoading(true);
 46 | 
 47 |         const emailExists = await checkIfUserExist(event)
 48 | 
 49 |         if (!emailExists || customer) {
 50 |             const order = await submitAddresses(event);
 51 | 
 52 |             if (order) {
 53 |                 setCart(order);
 54 | 
 55 |                 if (canOrderComplete(order)) {
 56 |                     router.push('/cart/paiement');
 57 |                 } else {
 58 |                     setMessage({
 59 |                         'message': "Your cart cannot be submitted",
 60 |                         'type': 'error'
 61 |                     });
 62 |                 }
 63 |                 
 64 |             } else {
 65 |                 setMessage({
 66 |                     'message': "Your adress cannot be registered",
 67 |                     'type': 'error'
 68 |                 });
 69 |             }
 70 |         } else {
 71 |             setLoading(false);
 72 |             setMessage({
 73 |                 'message': "This email is already used with a customer account. Please login",
 74 |                 'type': 'error'
 75 |             });
 76 |             
 77 |             setTimeout(function(){
 78 |                 setMessage(null);
 79 |             }, 10000);
 80 |         }
 81 |         setLoading(false);
 82 |     }
 83 | 
 84 |     useEffect(() => {
 85 |         (async () => {
 86 |             setLoading(true);
 87 |             const customer = await getCustomerFromCookie();
 88 |             setLoading(false);
 89 | 
 90 |             if (customer) {
 91 |                 setCustomer(customer);
 92 |             }
 93 |         })();
 94 |         setLoading(false);
 95 | 
 96 |     }, []); 
 97 | 
 98 |     return (
 99 | 
100 |         <Layout taxons={taxons}>
101 | 
102 |             <Helmet>
103 |                 <title>Panier | Cloralys Bijoux</title>
104 |             </Helmet>
105 | 
106 |             <Breadcrumb
107 |                 title="My  shipping address"
108 |                 parents={[
109 |                     {
110 |                         'title': 'My cart',
111 |                         'path': '/cart'
112 |                     }
113 |                 
114 |                 ]}
115 |             />
116 | 
117 |                             
118 |             {cart && cart.items.length > 0 ?
119 | 
120 |                 <form onSubmit={(event) => {onSubmitAddresses(event)}}>
121 | 
122 |                     <label htmlFor="email">Email*</label>
123 |                     <input required={true} type="text" name="email" defaultValue={customer ? customer.email : ''} readOnly={customer ? true: false}/>
124 |                         
125 |                     <h3 className="mb-4">Shippinh address :</h3>
126 |                     
127 |                     <label htmlFor="billing_firstname">Firstname*</label>
128 |                     <input required={true} type="text" name="billing_firstname"/>  
129 |                 
130 |                     <label htmlFor="billing_lastname">Name</label>
131 |                     <input required={true} type="text" name="billing_lastname"/>
132 |                 
133 |                     <label htmlFor="billing_street">Street*</label>
134 |                     <input required={true} type="text" name="billing_street"/>
135 |                 
136 |                     <label htmlFor="billing_country">Country*</label>
137 |                     <select name="billing_country">
138 |                     {countries.map((country, index) => {
139 |                         return (
140 |                             <option key={index} value={country.code}>{getCountryName(country.code, 'fr')}</option>
141 |                         );
142 |                     })}
143 |                     </select>
144 |                 
145 |                     <label htmlFor="billing_city">City*</label>
146 |                     <input required={true} type="text" name="billing_city"/>
147 |                 
148 |                     <label htmlFor="billing_postcode">Zipcode*</label>
149 |                     <input required={true} type="text" name="billing_postcode"/> 
150 |                     
151 |                     <h3 className="mb-4">Billing address :</h3>
152 |                 
153 |                     <label htmlFor="shipping_firstname">Firstname</label>
154 |                     <input required={true} type="text" name="shipping_firstname"/>
155 |                 
156 |                     <label htmlFor="shipping_lastname">Name*</label>
157 |                     <input required={true} type="text" name="shipping_lastname"/>
158 |                 
159 |                     <label htmlFor="shipping_street">Street*</label>
160 |                     <input required={true} type="text" name="shipping_street"/>
161 |                 
162 |                     <label htmlFor="shipping_country">Country*</label>
163 |                     <select className="custom-select" name="shipping_country">
164 |                     {countries.map((country, index) => {
165 |                         return (
166 |                             <option key={index} value={country.code}>{getCountryName(country.code, 'fr')}</option>
167 |                         );
168 |                     })}
169 |                     </select>
170 |                         
171 |                     <label htmlFor="shipping_city">City*</label>
172 |                     <input required={true} type="text" name="shipping_city"/>  
173 |             
174 |                     <label htmlFor="shipping_postcode">Zipcode*</label>
175 |                     <input required={true} type="text" name="shipping_postcode"/>
176 |                     
177 |                     <CartResume cart={cart} customer={customer}/>
178 | 
179 |                     <button type="submit">
180 |                         Validate the order
181 |                     </button>
182 |                 
183 |                 </form>
184 | 
185 |             :
186 |                 <p>You have no item in your cart</p>
187 |             }
188 | 
189 |         </Layout>
190 | 
191 |     );
192 | }
193 | 
194 | export const getStaticProps = async () => {
195 | 
196 |     const taxons = await getAllTaxons();
197 | 
198 |     return {
199 |         props: {
200 |             taxons
201 |         }
202 |     }
203 | }
204 | 
205 | export default Addresses;


--------------------------------------------------------------------------------