@autobusal/common 0.0.40 → 1.0.0

package/ApiDetails/ApiDetails.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { IoKeySharp } from 'react-icons/io5';
+import { Button, Modal } from '../index';
+import Content from './Content';
+
+interface Props {
+  id?: number
+  type: 'devpos'
+  t: TFunction<'common'>
+}
+
+const ApiDetails = ({ id, type, t }: Props): JSX.Element => {
+  const [ show, setShow ] = useState<boolean>(false);
+
+  if (id === undefined) {
+    return <>-</>;
+  }
+
+  return (
+    <>
+      <Button
+        type="button"
+        subtype="secondary"
+        size="small"
+        text={ (
+          <>
+            <IoKeySharp />
+            { t('api_details.manage', { ns: 'common' }) }
+          </>
+        ) }
+        noMargin
+        onClick={ () => setShow(true) }
+      />
+
+      { show && (
+        <Modal
+          width={ 700 }
+          title={ t('api_details.title', { ns: 'common', title: type.toUpperCase() }) }
+          content={
+            <Content id={ id } type={ type } t={ t } />
+          }
+          onClose={ () => setShow(false) }
+        />
+      ) }
+    </>
+  );
+};
+
+export default ApiDetails;

package/ApiDetails/Content.tsx

@@ -0,0 +1,48 @@
+import { TFunction } from 'i18next';
+import { Paragraph } from '../index';
+import { success } from '@autobusal/utilities';
+import DevPos from './Devpos';
+import { DevPosForm } from './types';
+import { GetSettings, PostSettings } from './services';
+
+interface Props {
+  id: number
+  type: 'devpos'
+  t: TFunction<'common'>
+}
+
+const Content = ({ id, type, t }: Props): JSX.Element => {
+  const { data, isLoading } = GetSettings(id, type);
+
+  const { mutate: SaveSettings, isPending } = PostSettings(id, type);
+
+  if (isLoading) {
+    return <Paragraph count={ 3 } />;
+  }
+
+  if (typeof data === 'string') {
+    return (
+      <div>{ t('api_details.unavailable', { ns: 'common' }) }</div>
+    );
+  }
+
+  const onSave = (data: DevPosForm) => {
+    SaveSettings(data, {
+      onSuccess: () => success(t('api_details.messages.saved'))
+    });
+  };
+
+  switch (type) {
+    case 'devpos':
+      return (
+        <DevPos
+          data={ data }
+          loading={ isPending }
+          t={ t }
+          onSave={ onSave }
+        />
+      );
+  }
+};
+
+export default Content;

package/ApiDetails/Devpos.tsx

@@ -0,0 +1,139 @@
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { Button } from '../index';
+import { Validate, Display } from '@autobusal/utilities';
+import { ApiDetailsData } from '@autobusal/providers/types/users';
+import { DevPosForm } from './types';
+
+interface Props {
+  data?: ApiDetailsData
+  loading: boolean
+  t: TFunction<'common'>
+  onSave: (data: DevPosForm) => void
+}
+
+const DevPos = ({ data, loading, t, onSave }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors } } = useForm<DevPosForm>();
+
+  const onClick = (): void => {
+    handleSubmit(onSave)();
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
+  return (
+    <>
+      <div className="column">
+        <div className="row">
+          { t('api_details.devpos.business_code', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.business_code } { ...register('business_code', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { Display(errors.business_code) }
+        </div>
+
+        <div className="row">
+          { t('api_details.devpos.operator_code', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.operator_code } { ...register('operator_code', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { Display(errors.operator_code) }
+        </div>
+      </div>
+
+      <div className="column">
+        <div className="row">
+          { t('api_details.devpos.nuis', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.nuis } { ...register('nuis', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { Display(errors.nuis) }
+        </div>
+
+        <div className="row">
+          { t('api_details.devpos.fiscalization_number', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.fiscalization_number } { ...register('fiscalization_number', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { Display(errors.fiscalization_number) }
+        </div>
+      </div>
+
+      <div className="column">
+        <div className="row">
+          { t('api_details.devpos.username', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.username } { ...register('username', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { Display(errors.username) }
+        </div>
+
+        <div className="row">
+          { t('api_details.devpos.password', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.password } { ...register('password', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { Display(errors.password) }
+        </div>
+      </div>
+
+      <div className="row">
+        { t('api_details.devpos.bank_name', { ns: 'common' }) }
+
+        <input type="text" defaultValue={ data?.bank_name } { ...register('bank_name', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+        { Display(errors.bank_name) }
+      </div>
+
+      <div className="column">
+        <div className="row">
+          { t('api_details.devpos.bank_swift', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.bank_swift } { ...register('bank_swift', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { Display(errors.bank_swift) }
+        </div>
+
+        <div className="row">
+          { t('api_details.devpos.bank_account', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.bank_account } { ...register('bank_account', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { Display(errors.bank_account) }
+        </div>
+      </div>
+
+      <div className="column">
+        <div className="row">
+          { t('api_details.devpos.bank_address', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.bank_address } { ...register('bank_address', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { Display(errors.bank_address) }
+        </div>
+        
+        <div className="row">
+          { t('api_details.devpos.bank_city', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.bank_city } { ...register('bank_city', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { Display(errors.bank_city) }
+        </div>
+      </div>
+
+      <Button
+        type="button"
+        loading={ loading }
+        text={ t('api_details.save', { ns: 'common' }) }
+        onClick={ onClick }
+      />
+    </>
+  );
+};
+
+export default DevPos;

package/ApiDetails/services.ts

@@ -0,0 +1,39 @@
+import { useQuery, UseQueryResult, useMutation, UseMutationResult } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { ApiDetailsData } from '@autobusal/providers/types/users';
+import { DevPosForm } from './types';
+
+export const GetSettings = (id: number, type: string): UseQueryResult<ApiDetailsData | string> => (
+  useQuery({
+    queryKey: ['apidetails-get-settings', { id, type }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/api_details/admin/get', {
+          params: {
+            id,
+            type
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const PostSettings = (id: number, type: string): UseMutationResult<void, Error, DevPosForm, unknown> => (
+  useMutation({
+    mutationKey: ['apidetails-update-settings'],
+    mutationFn: async (data: DevPosForm) => (
+      await apiClient
+        .post('/api/api_details/admin/update', {
+          ...data,
+          id,
+          type
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/ApiDetails/types.ts

@@ -0,0 +1,13 @@
+export interface DevPosForm {
+  business_code: string
+  operator_code: string
+  nuis: string
+  fiscalization_number: string
+  username: string
+  password: string
+  bank_name: string
+  bank_swift: string
+  bank_account: string
+  bank_address: string
+  bank_city: string
+}

package/Autocomplete/Autocomplete.tsx

@@ -1,8 +1,8 @@
 import { useState, useRef, ChangeEvent, KeyboardEvent } from 'react';
-import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { TFunction } from 'i18next';
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { useOutside } from '@autobusal/hooks';
-import { validate } from '@autobusal/utilities';
+import { Validate } from '@autobusal/utilities';
 import Suggestions from './Suggestions';
 import { Container } from './styles';
 import { AutocompleteData } from './types';
@@ -97,7 +97,7 @@ const Autocomplete = ({ name, defaultValue, data, validation, t, refs, onUpdate
 
       { (show && q.length > 1 && options.length > 0) && <Suggestions options={ options } selected={ selected } onClick={ onSelected } /> }
 
-      <input type="hidden" defaultValue={ value } { ...refs(name, validate(validation, t)) } />
+      <input type="hidden" defaultValue={ value } { ...refs(name, Validate(validation, t)) } />
     </Container>
   );
 }

package/Avatar.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { OperatorData } from '@autobusal/providers/types/operators';
+import { AgentData } from '@autobusal/providers/types/agents';
+
+interface Props {
+  display?: OperatorData | AgentData
+}
+
+const Avatar = ({ display }: Props): JSX.Element => (
+  <Container>
+    { display?.logo_url !== '' && <img src={ display?.logo_url } />}
+    { display?.company }
+  </Container>
+);
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  & > img {
+    display: block;
+    width: 80px;
+    border-radius: ${ props => props.theme.borderRadius };
+  }
+`;
+
+export default Avatar;

package/{BackTo.tsx → Back/BackTo.tsx}

@@ -1,6 +1,6 @@
 import { TFunction } from 'i18next';
-import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+import { Link } from 'react-router-dom';
 import { BiChevronLeftCircle } from 'react-icons/bi';
 
 interface Props {
@@ -15,13 +15,14 @@ const LinkStyled = styled(Link)`
   padding: 4px 12px;
   font-size: calc(${ props => props.theme.size.info } - 1px);
   text-transform: uppercase;
-  background: ${ props => props.theme.neutral };
+  background: ${ props => props.theme.foreground.normal };
   border-radius: ${ props => props.theme.borderRadius };
+  box-shadow: ${ props => props.theme.boxShadow };
   transition: all 0.3s ease;
 
   &:hover {
+    opacity: .8;
     text-decoration: none;
-    background: ${ props => props.theme.primaryTransparent };
   }
 `;
 

package/Back/BackWithTitle.tsx

@@ -0,0 +1,30 @@
+import { TFunction } from 'i18next';
+import styled from 'styled-components';
+import BackTo from './BackTo';
+
+interface Props {
+  title: string
+  to: string
+  t: TFunction<'common'>
+}
+
+const Container = styled.div`
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  margin-bottom: 20px;
+
+  & > h1 {
+    margin-bottom: 0;
+  }
+`;
+
+const BackWithTitle = ({ title, to, t }: Props): JSX.Element => (
+  <Container>
+    <BackTo to={ to } t={ t } />
+
+    <h1>{ title }</h1>
+  </Container>
+);
+
+export default BackWithTitle;

package/Button/Button.tsx

@@ -13,7 +13,7 @@ interface Props {
   onClick?: any
 }
 
-export const Button = ({ type, size, loading, active, subtype, text, noMargin, maxWidth, onClick }: Props) => (
+const Button = ({ type, size, loading, active, subtype, text, noMargin, maxWidth, onClick }: Props) => (
   <ButtonStyled
     $size={ size }
     type={ loading ? 'button' : type }
@@ -25,4 +25,6 @@ export const Button = ({ type, size, loading, active, subtype, text, noMargin, m
   >
     { loading ? <RiLoader2Fill /> : text }
   </ButtonStyled>
-);
+);
+
+export default Button;

package/Calendar/Calendar.tsx

@@ -2,7 +2,7 @@ import { useState, useRef } from 'react';
 import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { TFunction } from 'i18next';
 import { useOutside } from '@autobusal/hooks';
-import { validate, prepareDate } from '@autobusal/utilities';
+import { Validate, prepareDate } from '@autobusal/utilities';
 import Picker from './Picker';
 import { Container } from './styles';
 
@@ -48,7 +48,7 @@ const Calendar = ({ type, name, defaultValue, t, validation, refs, onUpdate }: P
         />
       ) }
 
-      <input type="hidden" defaultValue={ prepared } { ...refs(name, validate(validation ?? '', t)) } />
+      <input type="hidden" defaultValue={ prepared } { ...refs(name, Validate(validation ?? '', t)) } />
     </Container>
   );
 }

package/{BrowseCompanyItem/BrowseCompanyItem.tsx → CompanyItem/CompanyItem.tsx}

@@ -7,7 +7,7 @@ interface Props {
   type: 'agent' | 'operator'
 }
 
-const BrowseCompanyItem = ({ item, type }: Props): JSX.Element => {
+const CompanyItem = ({ item, type }: Props): JSX.Element => {
   const isColumn = item.column === 1;
   const isBanner = item.banner === 1;
 
@@ -36,4 +36,4 @@ const BrowseCompanyItem = ({ item, type }: Props): JSX.Element => {
   );
 };
 
-export default BrowseCompanyItem;
+export default CompanyItem;

package/ContactInfo/ContactInfo.tsx

@@ -0,0 +1,40 @@
+import { TFunction } from 'i18next';
+import { BiTransfer } from 'react-icons/bi';
+import { RiMoneyEuroCircleFill, RiPhoneLine } from 'react-icons/ri';
+import { Container, Funds, LinkMore } from './styles';
+
+interface Props {
+  item: any
+  t: TFunction<'common'>
+}
+
+const ContactInfo = ({ item, t }: Props): JSX.Element => {
+  const onClick = (event: React.MouseEvent<HTMLAnchorElement>): void => {
+    event.stopPropagation();
+  };
+
+  return (
+    <Container>
+      { item.funds_display && <Funds>{ item.funds_display }</Funds> }
+
+      { item.mobile && (
+        <LinkMore to={ `tel:${ item.mobile }` } onClick={ (event) => onClick(event) }>
+          <RiPhoneLine />
+          { item.mobile }
+        </LinkMore>
+      ) }
+
+      <LinkMore to={ `/admin/funds/manage/${ item.user.id }` } onClick={ (event) => onClick(event) }>
+        <RiMoneyEuroCircleFill />
+        { t('contact_info.add_funds', { ns: 'common' }) }
+      </LinkMore>
+
+      <LinkMore to={ `/account/transactions?id=${ item.user.id }` } onClick={ (event) => onClick(event) }>
+        <BiTransfer />
+        { t('contact_info.view_transactions', { ns: 'common' }) }
+      </LinkMore>
+    </Container>
+  );
+};
+
+export default ContactInfo;

package/ContactInfo/styles.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+
+export const Funds = styled.div`
+  font-weight: 700;
+  color: ${ props => props.theme.font.info };
+`;
+
+export const LinkMore = styled(Link)`
+  align-self: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 2px 5px;
+  font-weight: 700;
+  font-size: ${ props => props.theme.size.xs };
+  border: 1px solid ${ props => props.theme.primary.normal };
+  border-radius: ${ props => props.theme.borderRadius };
+  transition: all 0.3s ease;
+
+  &:hover {
+    text-decoration: none;
+    color: ${ props => props.theme.primary.contrast };
+    background: ${ props => props.theme.primary.normal };
+  }
+`;

package/CookieNotification/CookieNotification.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
-import { Button } from '../Button/Button';
+import Button from '../Button/Button';
 import { Container, Info } from './styles';
 
 interface Props {
@@ -18,7 +18,7 @@ const CookieNotification = ({ t }: Props): (JSX.Element | null) => {
     const CookieDate = new Date();
     CookieDate.setFullYear(CookieDate.getFullYear() + 1);
 
-    document.cookie = 'AutobusCookieNotification=viewed; expires=' + CookieDate.toUTCString() + "; path=/; SameSite=None; Secure";
+    document.cookie = 'OBTCookieNotification=viewed; expires=' + CookieDate.toUTCString() + '; path=/; SameSite=None; Secure';
   };
 
   if (! show) {

package/File/File.tsx

@@ -2,26 +2,27 @@ import { TFunction } from 'i18next';
 import { useState, useRef } from 'react';
 import { UseFormRegister } from 'react-hook-form';
 import { HiOutlineCloudUpload, HiCheck } from 'react-icons/hi';
-import { Modal } from '@autobusal/common';
-import { validate } from '@autobusal/utilities';
-import { Button } from '../Button/Button';
+import Modal from '../Modal/Modal';
+import { Validate } from '@autobusal/utilities';
+import Button from '../Button/Button';
 import { Container, ImgView, ImgPreview } from './styles';
 
 interface Props {
   name: string
   value?: string
   validation?: string
+  multiple?: boolean
   t: TFunction<'comon'>
   refs: UseFormRegister<any>
 }
 
-const File = ({ name, value, validation, t, refs }: Props): JSX.Element => {
+const File = ({ name, value, validation, multiple, t, refs }: Props): JSX.Element => {
   const [ uploaded, setUploaded ] = useState<boolean>(false);
   const [ preview, setPreview ] = useState<boolean>(false);
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const rules = validate(String(validation), t);
+  const rules = Validate(String(validation), t);
 
   const onChange = (): void => {
     setUploaded(true);
@@ -38,6 +39,8 @@ const File = ({ name, value, validation, t, refs }: Props): JSX.Element => {
     }
   };
 
+  const type = multiple ? 'multiple' : 'single';
+
   return (
     <>
       <Container>
@@ -45,6 +48,7 @@ const File = ({ name, value, validation, t, refs }: Props): JSX.Element => {
           { ...rest }
           type="file"
           name={ name }
+          multiple={ multiple }
           style={{ display: 'none' }}
           ref={ (e) => {
             ref(e);
@@ -57,8 +61,8 @@ const File = ({ name, value, validation, t, refs }: Props): JSX.Element => {
           size="small"
           text={
             uploaded
-              ? <><HiCheck /> { t('file.done', { ns: 'common' }) }</>
-              : <><HiOutlineCloudUpload /> { t('file.ready', { ns: 'common' }) }</>
+              ? <><HiCheck /> { t(`file.${ type }.done`, { ns: 'common' }) }</>
+              : <><HiOutlineCloudUpload /> { t(`file.${ type }.ready`, { ns: 'common' }) }</>
           }
           noMargin
           onClick={ onClick }

package/IpLogs/IpLogs.tsx

@@ -0,0 +1,47 @@
+import { TFunction } from 'i18next';
+import { useState } from 'react';
+import { AiOutlineLogin } from 'react-icons/ai';
+import { Button } from '../index';
+import View from './View';
+import { NotAvailable } from './styles';
+
+interface Props {
+  id: number
+  page: number
+  type: 'admins' | 'agents' | 'financers' | 'operators' | 'visitors'
+  t: TFunction<'common'>
+}
+
+const IpLogs = ({ id, page, type, t }: Props): (JSX.Element | string) => {
+  const [ show, setShow ] = useState<boolean>(false);
+
+  if (id === 0) {
+    return (
+      <NotAvailable>
+        { t('ip_logs.not_available', { ns: 'common' }) }
+      </NotAvailable>
+    );
+  }
+
+  return (
+    <>
+      <Button
+        type="button"
+        subtype="secondary"
+        size="small"
+        text={ (
+          <>
+            <AiOutlineLogin />
+            { t('ip_logs.view', { ns: 'common' }) }
+          </>
+        ) }
+        noMargin
+        onClick={ () => setShow(true) }
+      />
+
+      { show && <View id={ id } page={ page } type={ type } t={ t } /> }
+    </>
+  );
+};
+
+export default IpLogs;