Implementing sign in

.dockerignore

@@ -0,0 +1 @@
+node_modules

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:20
+
+WORKDIR /usr/src/app
+
+COPY package.json ./
+COPY yarn.lock ./
+RUN yarn install --production
+COPY . .
+RUN yarn build
+
+CMD [ "yarn", "start" ]

app/routes/account.tsx → app/_routes/account.tsx

@@ -4,12 +4,12 @@ import {
   ShoppingBagIcon,
   UserCircleIcon,
 } from '@heroicons/react/24/solid';
-import { Form, Outlet, useLoaderData, useMatches } from '@remix-run/react';
+import { Form, Outlet, useLoaderData } from '@remix-run/react';
 import { DataFunctionArgs, json, redirect } from '@remix-run/server-runtime';
-import { TabProps } from '~/components/tabs/Tab';
-import { TabsContainer } from '~/components/tabs/TabsContainer';
-import { getActiveCustomerDetails } from '~/providers/customer/customer';
 import { useTranslation } from 'react-i18next';
+import { TabProps } from '~/components/_tabs/Tab';
+import { TabsContainer } from '~/components/_tabs/TabsContainer';
+import { getActiveCustomerDetails } from '~/providers/customer/customer';
 
 export async function loader({ request }: DataFunctionArgs) {
   const { activeCustomer } = await getActiveCustomerDetails({ request });

app/routes/account/addresses.tsx → app/_routes/account/addresses.tsx

@@ -1,15 +1,15 @@
 import { Outlet, useLoaderData } from '@remix-run/react';
+import { LoaderFunctionArgs } from '@remix-run/router';
 import { ActionFunctionArgs, json } from '@remix-run/server-runtime';
-import AddAddressCard from '~/components/account/AddAddressCard';
-import EditAddressCard from '~/components/account/EditAddressCard';
+import AddAddressCard from '~/components/_account/AddAddressCard';
+import EditAddressCard from '~/components/_account/EditAddressCard';
 import { Address, ErrorCode, ErrorResult } from '~/generated/graphql';
+import { getFixedT } from '~/i18next.server';
 import {
   deleteCustomerAddress,
   updateCustomerAddress,
 } from '~/providers/account/account';
 import { getActiveCustomerAddresses } from '~/providers/customer/customer';
-import { getFixedT } from '~/i18next.server';
-import { LoaderFunctionArgs } from '@remix-run/router';
 
 export async function loader({ request }: LoaderFunctionArgs) {
   const res = await getActiveCustomerAddresses({ request });

app/routes/account/addresses/$addressId.tsx → app/_routes/account/addresses/$addressId.tsx

@@ -2,24 +2,24 @@ import {
   useActionData,
   useLoaderData,
   useNavigate,
-  useSubmit,
   useNavigation,
+  useSubmit,
 } from '@remix-run/react';
 import { DataFunctionArgs, json, redirect } from '@remix-run/server-runtime';
-import { useRef, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { validationError } from 'remix-validated-form';
+import CustomerAddressForm, {
+  validator,
+} from '~/components/_account/CustomerAddressForm';
+import Modal from '~/components/_modal/Modal';
 import { Button } from '~/components/Button';
-import Modal from '~/components/modal/Modal';
 import { HighlightedButton } from '~/components/HighlightedButton';
 import { Address } from '~/generated/graphql';
-import useToggleState from '~/utils/use-toggle-state';
-import CustomerAddressForm, {
-  validator,
-} from '~/components/account/CustomerAddressForm';
 import { updateCustomerAddress } from '~/providers/account/account';
 import { getAvailableCountries } from '~/providers/checkout/checkout';
 import { getActiveCustomerAddresses } from '~/providers/customer/customer';
-import { useTranslation } from 'react-i18next';
+import useToggleState from '~/utils/use-toggle-state';
 
 export async function loader({ request, params }: DataFunctionArgs) {
   const { activeCustomer } = await getActiveCustomerAddresses({ request });

app/routes/account/addresses/new.tsx → app/_routes/account/addresses/new.tsx

@@ -6,18 +6,18 @@ import {
   useSubmit,
 } from '@remix-run/react';
 import { DataFunctionArgs, json } from '@remix-run/server-runtime';
-import { useRef, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { validationError } from 'remix-validated-form';
-import { Button } from '~/components/Button';
-import Modal from '~/components/modal/Modal';
-import { HighlightedButton } from '~/components/HighlightedButton';
-import useToggleState from '~/utils/use-toggle-state';
 import CustomerAddressForm, {
   validator,
-} from '~/components/account/CustomerAddressForm';
+} from '~/components/_account/CustomerAddressForm';
+import Modal from '~/components/_modal/Modal';
+import { Button } from '~/components/Button';
+import { HighlightedButton } from '~/components/HighlightedButton';
 import { createCustomerAddress } from '~/providers/account/account';
 import { getAvailableCountries } from '~/providers/checkout/checkout';
-import { useTranslation } from 'react-i18next';
+import useToggleState from '~/utils/use-toggle-state';
 
 export async function loader({ request, params }: DataFunctionArgs) {
   const { availableCountries } = await getAvailableCountries({ request });

app/routes/account/history.tsx → app/_routes/account/history.tsx

@@ -1,24 +1,19 @@
 import { useLoaderData, useNavigation, useSubmit } from '@remix-run/react';
 import { DataFunctionArgs, json, redirect } from '@remix-run/server-runtime';
-import OrderHistoryItem from '~/components/account/OrderHistoryItem';
-import { getActiveCustomerOrderList } from '~/providers/customer/customer';
-import { OrderListOptions, SortOrder } from '~/generated/graphql';
-import { Pagination } from '~/components/Pagination';
-import { ValidatedForm } from 'remix-validated-form';
 import { withZod } from '@remix-validated-form/with-zod';
+import { useTranslation } from 'react-i18next';
+import { ValidatedForm } from 'remix-validated-form';
+import OrderHistoryItem from '~/components/_account/OrderHistoryItem';
+import { Pagination } from '~/components/Pagination';
+import { allowedPaginationLimits, paginationLimitMinimumDefault } from '~/constants';
+import { OrderListOptions, SortOrder } from '~/generated/graphql';
+import { getActiveCustomerOrderList } from '~/providers/customer/customer';
 import {
+  paginationValidationSchema,
   translatePaginationFrom,
   translatePaginationTo,
-  paginationValidationSchema,
 } from '~/utils/pagination';
-import { useTranslation } from 'react-i18next';
 
-const paginationLimitMinimumDefault = 10;
-const allowedPaginationLimits = new Set<number>([
-  paginationLimitMinimumDefault,
-  20,
-  30,
-]);
 const orderPaginationSchema = paginationValidationSchema(
   allowedPaginationLimits,
 );

app/routes/account/index.tsx → app/_routes/account/index.tsx

@@ -3,21 +3,21 @@ import { useActionData, useLoaderData, useNavigation } from '@remix-run/react';
 import { DataFunctionArgs, json, redirect } from '@remix-run/server-runtime';
 import { withZod } from '@remix-validated-form/with-zod';
 import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ValidatedForm, validationError } from 'remix-validated-form';
 import { z } from 'zod';
 import { Button } from '~/components/Button';
 import { ErrorMessage } from '~/components/ErrorMessage';
 import { HighlightedButton } from '~/components/HighlightedButton';
 import { Input } from '~/components/Input';
-import Modal from '~/components/modal/Modal';
+import Modal from '~/components/_modal/Modal';
 import {
   requestUpdateCustomerEmailAddress,
   updateCustomer,
 } from '~/providers/account/account';
 import { getActiveCustomerDetails } from '~/providers/customer/customer';
 import useToggleState from '~/utils/use-toggle-state';
 import { replaceEmptyString } from '~/utils/validation';
-import { useTranslation } from 'react-i18next';
 
 enum FormIntent {
   UpdateEmail = 'updateEmail',

app/_routes/api/active-order.tsx

@@ -0,0 +1,163 @@
+import {
+  addItemToOrder,
+  adjustOrderLine,
+  getActiveOrder,
+  removeOrderLine,
+  setCustomerForOrder,
+  setOrderShippingAddress,
+  setOrderShippingMethod,
+} from '~/providers/orders/order';
+import { DataFunctionArgs, json } from '@remix-run/server-runtime';
+import {
+  CreateAddressInput,
+  CreateCustomerInput,
+  ErrorCode,
+  ErrorResult,
+  OrderDetailFragment,
+} from '~/generated/graphql';
+import { getSessionStorage } from '~/sessions';
+import { shippingFormDataIsValid } from '~/utils/validation';
+
+export type CartLoaderData = Awaited<ReturnType<typeof loader>>;
+
+export async function loader({ request }: DataFunctionArgs) {
+  return {
+    activeOrder: await getActiveOrder({ request }),
+  };
+}
+
+export async function action({ request, params }: DataFunctionArgs) {
+  const body = await request.formData();
+  const formAction = body.get('action');
+  let activeOrder: OrderDetailFragment | undefined = undefined;
+  let error: ErrorResult = {
+    errorCode: ErrorCode.NoActiveOrderError,
+    message: '',
+  };
+  switch (formAction) {
+    case 'setCheckoutShipping':
+      if (shippingFormDataIsValid(body)) {
+        const shippingFormData = Object.fromEntries<any>(
+          body.entries(),
+        ) as CreateAddressInput;
+        const result = await setOrderShippingAddress(
+          {
+            city: shippingFormData.city,
+            company: shippingFormData.company,
+            countryCode: shippingFormData.countryCode,
+            customFields: shippingFormData.customFields,
+            fullName: shippingFormData.fullName,
+            phoneNumber: shippingFormData.phoneNumber,
+            postalCode: shippingFormData.postalCode,
+            province: shippingFormData.province,
+            streetLine1: shippingFormData.streetLine1,
+            streetLine2: shippingFormData.streetLine2,
+          },
+          { request },
+        );
+        if (result.setOrderShippingAddress.__typename === 'Order') {
+          activeOrder = result.setOrderShippingAddress;
+        } else {
+          error = result.setOrderShippingAddress;
+        }
+      }
+      break;
+    case 'setOrderCustomer': {
+      const customerData = Object.fromEntries<any>(
+        body.entries(),
+      ) as CreateCustomerInput;
+      const result = await setCustomerForOrder(
+        {
+          emailAddress: customerData.emailAddress,
+          firstName: customerData.firstName,
+          lastName: customerData.lastName,
+        },
+        { request },
+      );
+      if (result.setCustomerForOrder.__typename === 'Order') {
+        activeOrder = result.setCustomerForOrder;
+      } else {
+        error = result.setCustomerForOrder;
+      }
+      break;
+    }
+    case 'setShippingMethod': {
+      const shippingMethodId = body.get('shippingMethodId');
+      if (typeof shippingMethodId === 'string') {
+        const result = await setOrderShippingMethod(shippingMethodId, {
+          request,
+        });
+        if (result.setOrderShippingMethod.__typename === 'Order') {
+          activeOrder = result.setOrderShippingMethod;
+        } else {
+          error = result.setOrderShippingMethod;
+        }
+      }
+      break;
+    }
+    case 'removeItem': {
+      const lineId = body.get('lineId');
+      const result = await removeOrderLine(lineId?.toString() ?? '', {
+        request,
+      });
+      if (result.removeOrderLine.__typename === 'Order') {
+        activeOrder = result.removeOrderLine;
+      } else {
+        error = result.removeOrderLine;
+      }
+      break;
+    }
+    case 'adjustItem': {
+      const lineId = body.get('lineId');
+      const quantity = body.get('quantity');
+      if (lineId && quantity != null) {
+        const result = await adjustOrderLine(lineId?.toString(), +quantity, {
+          request,
+        });
+        if (result.adjustOrderLine.__typename === 'Order') {
+          activeOrder = result.adjustOrderLine;
+        } else {
+          error = result.adjustOrderLine;
+        }
+      }
+      break;
+    }
+    case 'addItemToOrder': {
+      const variantId = body.get('variantId')?.toString();
+      const quantity = Number(body.get('quantity')?.toString() ?? 1);
+      if (!variantId || !(quantity > 0)) {
+        throw new Error(
+          `Invalid input: variantId ${variantId}, quantity ${quantity}`,
+        );
+      }
+      const result = await addItemToOrder(variantId, quantity, {
+        request,
+      });
+      if (result.addItemToOrder.__typename === 'Order') {
+        activeOrder = result.addItemToOrder;
+      } else {
+        error = result.addItemToOrder;
+      }
+      break;
+    }
+    case 'addPaymentToOrder': {
+    }
+    default:
+    // Don't do anything
+  }
+  let headers: ResponseInit['headers'] = {};
+  const sessionStorage = await getSessionStorage();
+  const session = await sessionStorage.getSession(
+    request?.headers.get('Cookie'),
+  );
+  session.flash('activeOrderError', error);
+  headers = {
+    'Set-Cookie': await sessionStorage.commitSession(session),
+  };
+  return json(
+    { activeOrder: activeOrder || (await getActiveOrder({ request })) },
+    {
+      headers,
+    },
+  );
+}

app/_routes/api/logout.ts

@@ -0,0 +1,11 @@
+import { DataFunctionArgs, redirect } from '@remix-run/server-runtime';
+import { logout } from '~/providers/account/account';
+
+export async function action({ request }: DataFunctionArgs) {
+  const result = await logout({ request });
+  return redirect('/', { headers: result._headers });
+}
+
+export async function loader() {
+  return redirect('/');
+}