From f38652c1b8927aeb02b04edfbc1cd796630785bc Mon Sep 17 00:00:00 2001 From: Yurii Venher <79912799+yurii-ve@users.noreply.github.com> Date: Tue, 12 Nov 2024 10:17:50 +0200 Subject: [PATCH] fix: Remove login-related pages and UserMenu component (#237) --- app/routes/login-callback/route.tsx | 40 ---- app/routes/login/route.tsx | 23 -- app/routes/logout/route.tsx | 22 -- .../members-area.my-account/route.module.scss | 74 ------- app/routes/members-area.my-account/route.tsx | 208 ------------------ .../members-area.my-orders/route.module.scss | 87 -------- app/routes/members-area.my-orders/route.tsx | 105 --------- app/routes/members-area/route.module.scss | 20 -- app/routes/members-area/route.tsx | 26 --- src/components/header/header.tsx | 3 - .../user-menu/user-menu.module.scss | 16 -- src/components/user-menu/user-menu.tsx | 60 ----- 12 files changed, 684 deletions(-) delete mode 100644 app/routes/login-callback/route.tsx delete mode 100644 app/routes/login/route.tsx delete mode 100644 app/routes/logout/route.tsx delete mode 100644 app/routes/members-area.my-account/route.module.scss delete mode 100644 app/routes/members-area.my-account/route.tsx delete mode 100644 app/routes/members-area.my-orders/route.module.scss delete mode 100644 app/routes/members-area.my-orders/route.tsx delete mode 100644 app/routes/members-area/route.module.scss delete mode 100644 app/routes/members-area/route.tsx delete mode 100644 src/components/user-menu/user-menu.module.scss delete mode 100644 src/components/user-menu/user-menu.tsx diff --git a/app/routes/login-callback/route.tsx b/app/routes/login-callback/route.tsx deleted file mode 100644 index f6b69dd..0000000 --- a/app/routes/login-callback/route.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { LoaderFunctionArgs, redirect } from '@remix-run/node'; -import { commitSession, getSession, initializeEcomApiForRequest } from '~/src/wix/ecom/session'; - -export async function loader({ request }: LoaderFunctionArgs) { - const session = await getSession(request.headers.get('Cookie')); - const storedOauthData = session.get('oAuthData'); - - if (storedOauthData === undefined) { - return redirect('/login'); - } - - const api = await initializeEcomApiForRequest(request); - const wixClient = api.getWixClient(); - - const returnedOAuthData = wixClient.auth.parseFromUrl(request.url, 'query'); - if (returnedOAuthData.error) { - throw new Error(`Error: ${returnedOAuthData.errorDescription}`); - } - - const memberTokens = await wixClient.auth.getMemberTokens( - returnedOAuthData.code, - returnedOAuthData.state, - storedOauthData, - ); - wixClient.auth.setTokens(memberTokens); - - session.set('wixSessionTokens', memberTokens); - - const redirectUrl = new URL(storedOauthData.originalUri || new URL(request.url).host); - - // Append a dummy query parameter to avoid preserving sensitive auth params (e.g., `code`, `state`) - // Some hosts (e.g., Netlify) retain original query params on redirects, which could expose them in the URL - redirectUrl.searchParams.append('login', 'success'); - - return redirect(redirectUrl.toString(), { - headers: { - 'Set-Cookie': await commitSession(session), - }, - }); -} diff --git a/app/routes/login/route.tsx b/app/routes/login/route.tsx deleted file mode 100644 index e4c2eda..0000000 --- a/app/routes/login/route.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { LoaderFunctionArgs, redirect } from '@remix-run/node'; -import { commitSession, getSession, initializeEcomApiForRequest } from '~/src/wix/ecom/session'; - -export async function loader({ request }: LoaderFunctionArgs) { - const currentUrl = new URL(request.url); - const returnUrl = request.headers.get('Referer') ?? currentUrl.origin; - - const api = await initializeEcomApiForRequest(request); - const { oAuthData, authUrl } = await api.login( - `${currentUrl.origin}/login-callback`, - returnUrl, - ); - - const session = await getSession(request.headers.get('Cookie')); - - session.flash('oAuthData', oAuthData); - - return redirect(authUrl, { - headers: { - 'Set-Cookie': await commitSession(session), - }, - }); -} diff --git a/app/routes/logout/route.tsx b/app/routes/logout/route.tsx deleted file mode 100644 index ab2b158..0000000 --- a/app/routes/logout/route.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { LoaderFunctionArgs, redirect } from '@remix-run/node'; -import { destroySession, getSession, initializeEcomApiForRequest } from '~/src/wix/ecom/session'; - -export async function loader({ request }: LoaderFunctionArgs) { - const api = await initializeEcomApiForRequest(request); - - const currentUrl = new URL(request.url); - let logoutUrl: string | undefined; - try { - const logoutInfo = await api.logout(currentUrl.origin); - logoutUrl = logoutInfo.logoutUrl; - } catch { - // ignore logout error. it happens for instance in case if logged in user reset his password - } - - const session = await getSession(request.headers.get('Cookie')); - return redirect(logoutUrl ?? '/', { - headers: { - 'Set-Cookie': await destroySession(session), - }, - }); -} diff --git a/app/routes/members-area.my-account/route.module.scss b/app/routes/members-area.my-account/route.module.scss deleted file mode 100644 index b912335..0000000 --- a/app/routes/members-area.my-account/route.module.scss +++ /dev/null @@ -1,74 +0,0 @@ -.header { - display: flex; - justify-content: space-between; -} - -.section { - padding-bottom: 30px; - margin-bottom: 30px; - border-bottom: solid 1px rgba(23, 17, 13, 0.2); - - h2 { - padding-bottom: 16px; - } -} - -.actions { - display: flex; - gap: 12px; - justify-content: flex-end; - align-items: start; -} - -.updateInfoButton { - width: 120px; -} - -.resetPasswordButton { - width: 150px; -} - -.form { - font: var(--paragraph3); - margin: 30px 0; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 24px 60px; - - label { - display: flex; - flex-direction: column; - } -} - -.loginInfoSection { - margin-top: 30px; - display: flex; - align-items: start; - justify-content: space-between; -} - -.confirmationDialogBody { - display: flex; - justify-content: center; - gap: 12px; -} - -@media (max-width: 480px) { - .section { - flex-direction: column; - gap: 12px; - } - - .actions { - justify-content: start; - } - - .loginInfoSection { - align-items: center; - } - - .form { - grid-template-columns: 1fr; - } -} diff --git a/app/routes/members-area.my-account/route.tsx b/app/routes/members-area.my-account/route.tsx deleted file mode 100644 index a2b4308..0000000 --- a/app/routes/members-area.my-account/route.tsx +++ /dev/null @@ -1,208 +0,0 @@ -import { LoaderFunctionArgs, redirect } from '@remix-run/node'; -import type { MetaFunction } from '@remix-run/react'; -import { useLoaderData } from '@remix-run/react'; -import classNames from 'classnames'; -import { useState } from 'react'; -import { Dialog, DialogDescription, DialogTitle } from '~/src/components/dialog/dialog'; -import { Spinner } from '~/src/components/spinner/spinner'; -import { initializeEcomApiForRequest } from '~/src/wix/ecom/session'; -import { useAccountDetailsForm } from '~/src/wix/users'; - -import styles from './route.module.scss'; - -export async function loader({ request }: LoaderFunctionArgs) { - const api = await initializeEcomApiForRequest(request); - if (!api.isLoggedIn()) { - return redirect('/login'); - } - - const user = await api.getUser(); - return { user }; -} - -export default function MyAccountPage() { - const { user } = useLoaderData(); - - const [discardConfirmationOpen, setDiscardConfirmationOpen] = useState(false); - - const { - firstName, - setFirstName, - lastName, - setLastName, - phone, - setPhone, - isUpdating, - isResettingPassword, - updateAccountDetails, - discardChanges, - sendPasswordResetEmail, - } = useAccountDetailsForm(user?._id, { - firstName: user?.contact?.firstName ?? '', - lastName: user?.contact?.lastName ?? '', - phoneNumber: user?.contact?.phones?.[0] ?? '', - loginEmail: user?.loginEmail, - }); - - const onDiscardChangesClick = () => { - setDiscardConfirmationOpen(true); - }; - - const handleDiscardChanges = () => { - discardChanges(); - setDiscardConfirmationOpen(false); - }; - - return ( -
-
-
-

Account

- View and edit your personal info below. -
-
- - -
-
- -
-
-

Personal info

- Update you personal information. -
- -
- - - - - -
- -
- - -
-
- -
-
-

Login info

- View your login email and reset password. -
- -
-
-
Login email:
-
{user?.loginEmail}
-
- -
- -
-
-
- - setDiscardConfirmationOpen(open)} - > - Discard changes? - Any changes you made will be lost. -
- - -
- -
- ); -} - -export const meta: MetaFunction = () => { - return [ - { title: 'My Account | ReClaim' }, - { - name: 'description', - content: 'Essential home products for sustainable living', - }, - { - property: 'robots', - content: 'noindex, nofollow', - }, - ]; -}; diff --git a/app/routes/members-area.my-orders/route.module.scss b/app/routes/members-area.my-orders/route.module.scss deleted file mode 100644 index d39a3f6..0000000 --- a/app/routes/members-area.my-orders/route.module.scss +++ /dev/null @@ -1,87 +0,0 @@ -.title { - font: var(--heading5); - font-size: 26px; -} - -.message { - margin-top: 13px; -} - -.orders { - margin-top: 35px; -} - -.orderListHeader, -.orderHeader { - height: 78px; - display: flex; - align-items: center; - justify-content: stretch; - gap: 20px; -} - -.orderListHeaderSection, -.orderHeaderSection { - padding: 0 12px; - flex-basis: 100%; -} - -.orderHeaderSectionName { - display: none; -} - -.orderListHeader { - height: 35px; - padding-bottom: 10px; - padding-right: 20px; -} - -.orderList { - border-top: 1px solid var(--primary5); -} - -.emptyStateContainer { - display: flex; - flex-direction: column; - gap: 32px; - justify-content: center; - align-items: center; - padding: 100px 0; - border-top: 1px solid var(--primary3); - border-bottom: 1px solid var(--primary3); -} - -.emptyStateMessage { - font: var(--heading6); -} - -.startBrowsingLink { - text-decoration: underline; -} - -@media (max-width: 480px) { - .orderListHeader { - display: none; - } - - .orderHeader { - height: auto; - padding: 8px 0; - flex-direction: column; - align-items: flex-start; - gap: 4px; - font: var(--paragraph3); - } - - .orderHeader > div { - padding: 0; - } - - .orderHeaderSectionName { - display: inline; - } - - .emptyStateContainer { - padding: 40px 0; - } -} diff --git a/app/routes/members-area.my-orders/route.tsx b/app/routes/members-area.my-orders/route.tsx deleted file mode 100644 index d079a1d..0000000 --- a/app/routes/members-area.my-orders/route.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { redirect, type LoaderFunctionArgs, type MetaFunction } from '@remix-run/node'; -import { initializeEcomApiForRequest } from '~/src/wix/ecom/session'; -import { useLoaderData } from '@remix-run/react'; -import { OrderSummary } from '~/src/components/order-summary/order-summary'; -import { Accordion } from '~/src/components/accordion/accordion'; -import { CategoryLink } from '~/src/components/category-link/category-link'; - -import styles from './route.module.scss'; - -export async function loader({ request }: LoaderFunctionArgs) { - const api = await initializeEcomApiForRequest(request); - if (!api.isLoggedIn()) { - return redirect('/login'); - } - - const ordersResponse = await api.getOrders(); - return { orders: ordersResponse.items }; -} - -export default function MyOrdersPage() { - const { orders } = useLoaderData(); - - const formatOrderCreationDate = (date: Date) => - date.toLocaleDateString('en-US', { - month: 'short', - day: 'numeric', - year: 'numeric', - }); - - const accordionItems = orders.map((order) => ({ - header: ( -
-
- Date: - {formatOrderCreationDate(new Date(order._createdDate!))} -
-
- Order: - {order.number} -
-
- Status: - {order.status} -
-
- Total: - {order.priceSummary?.total?.formattedAmount} -
-
- ), - content: , - })); - - return ( -
-
-
My Orders
-
- View your order history or check the status of a recent order. -
-
-
- {orders.length > 0 ? ( - <> -
-
Date
-
Order
-
Status
-
Total
-
- - - ) : ( -
-
- {"You haven't placed any orders yet"} -
- - Start Browsing - -
- )} -
-
- ); -} - -export const meta: MetaFunction = () => { - return [ - { title: 'My Orders | ReClaim' }, - { - name: 'description', - content: 'Essential home products for sustainable living', - }, - { - property: 'robots', - content: 'noindex, nofollow', - }, - ]; -}; - -export { ErrorBoundary } from '~/src/components/error-page/error-page'; diff --git a/app/routes/members-area/route.module.scss b/app/routes/members-area/route.module.scss deleted file mode 100644 index 6d69afe..0000000 --- a/app/routes/members-area/route.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -.page { - padding-top: 100px; - width: 100%; - max-width: 980px; - margin: 0 auto; -} - -.content { - padding: 30px; -} - -@media (max-width: 768px) { - .page { - padding-top: 30px; - } - - .content { - padding: 20px 8px; - } -} diff --git a/app/routes/members-area/route.tsx b/app/routes/members-area/route.tsx deleted file mode 100644 index 0c47b95..0000000 --- a/app/routes/members-area/route.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import classNames from 'classnames'; -import { Outlet, NavLink } from '@remix-run/react'; - -import styles from './route.module.scss'; - -export default function MembersAreaPage() { - const tabClassName = ({ isActive }: { isActive: boolean }) => { - return classNames('tab', { active: isActive }); - }; - - return ( -
-
- - My Account - - - My Orders - -
-
- -
-
- ); -} diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index 1b9bce9..2f8892a 100644 --- a/src/components/header/header.tsx +++ b/src/components/header/header.tsx @@ -5,7 +5,6 @@ import { CartIcon, MenuIcon } from '~/src/components/icons'; import { getCartItemCount, useCartData, useCartOpen } from '~/src/wix/cart'; import { NavigationMenu } from '../navigation-menu/navigation-menu'; import { SidebarNavigationMenu } from '../sidebar-navigation-menu/sidebar-navigation-menu'; -import { UserMenu } from '../user-menu/user-menu'; import styles from './header.module.scss'; @@ -40,8 +39,6 @@ export const Header = ({ className }: HeaderProps) => {
- - - } - contentProps={{ - align: 'end', - sideOffset: 6, - }} - > - - - My Account - - - - - - My Orders - - - - - - - - Log out - - - - ); -};