@autobusal/order-confirm 0.0.1

package/OrderConfirm.tsx

@@ -0,0 +1,89 @@
+import { TFunction } from 'i18next';
+import { useEffect } from 'react';
+import { useSearchParams, useParams, useNavigate } from 'react-router-dom';
+import { AiOutlineCheck } from 'react-icons/ai';
+import { BiErrorAlt } from 'react-icons/bi';
+import { IoReturnUpBackOutline } from 'react-icons/io5';
+// import { useAuthContext } from '../../../context/Auth';
+import { Meta, Button } from '@autobusal/common';
+import Reason from './Reason';
+import { Title, Actions } from './styles';
+
+interface Props {
+  t: TFunction<'common'>
+}
+
+const OrderConfirm = ({ t }: Props): (JSX.Element | null) => {
+  const [ searchParams ] = useSearchParams();
+
+  const { type, order_id } = useParams();
+
+  const navigate = useNavigate();
+
+  const message = String(searchParams.get('msg') ?? '');
+
+  // @todo: sa mearga asta cu userul
+  // const { user } = useAuthContext();
+
+  const isAllowed = ['reserved', 'cancelled', 'purchased'].includes(
+    String(type)
+  );
+  
+  useEffect(() => {
+    if (!isAllowed) {
+      navigate('/');
+    }
+  }, []);
+
+  if (!isAllowed) {
+    return null;
+  }
+
+  const onManage = (): void => {
+    navigate(`/viewtrip/${ order_id }`);
+  };
+
+  const onBack = (): void => {
+    //   const backUrl = user ? '/account' : '/';
+
+    navigate('/');
+  };
+
+  return (
+    <Meta title={ t(`order_confirm.title.${ type }`) } description={ t('order_confirm.meta.description') }>
+      <Title>
+        { type === 'cancelled' ? <BiErrorAlt /> : <AiOutlineCheck /> }
+        { t(`order_confirm.title.${ type }`) }
+      </Title>
+
+      <div className="box" dangerouslySetInnerHTML={{
+        __html: t(`order_confirm.content.${ type}`, { order: `<strong>${ order_id }</strong>` })
+      }} />
+
+      <>
+        { (type === 'cancelled' && message !== '') && <Reason message={ message } t={ t } /> }
+      </>
+
+      <Actions>
+        <Button
+          type="button"
+          text={ t('order_confirm.manage') }
+          noMargin
+          onClick={ onManage }
+        />
+
+        <Button
+          type="button"
+          subtype="secondary"
+          text={
+            <><IoReturnUpBackOutline /> { t('order_confirm.back') }</>
+          }
+          noMargin
+          onClick={ onBack }
+        />
+      </Actions>
+    </Meta>
+  );
+};
+
+export default OrderConfirm;

package/Reason.tsx

@@ -0,0 +1,15 @@
+import { TFunction } from 'i18next';
+import { Cancelled } from './styles';
+
+interface Props {
+  message: string
+  t: TFunction<'common'>
+}
+
+const Reason = ({ message, t }: Props): JSX.Element => (
+  <Cancelled className="box">
+    <strong>{ t('order_confirm.cancelled.title') }:</strong> { message }
+  </Cancelled>
+);
+
+export default Reason;

package/index.ts

@@ -0,0 +1,3 @@
+import OrderConfirm from './OrderConfirm';
+
+export default OrderConfirm;

package/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@autobusal/order-confirm",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "index.ts"
+}

package/styles.ts

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const Title = styled.h1`
+  display: flex;
+  gap: 6px;
+  align-items: center;
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 15px;
+`;
+
+export const Cancelled = styled.div`
+  margin-top: 15px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #FFF;
+  background: ${ props => props.theme.font.error };
+`;