@autobusal/order-process 0.0.1

package/BKT/Bkt.tsx

@@ -0,0 +1,90 @@
+import { useEffect, useRef } from 'react';
+import { TFunction } from 'i18next';
+import { Inline } from '@autobusal/common';
+import { useForm } from 'react-hook-form';
+import { Container } from '../styles';
+import { BKTFormData } from '../types';
+import { PostBkt } from '../services';
+
+interface Props {
+  hash?: string
+  t: TFunction<'common'>
+}
+
+const Bkt = ({ hash, t }: Props): JSX.Element => {
+  const { register, handleSubmit } = useForm<BKTFormData>();
+
+  const ref = useRef<HTMLFormElement>(null);
+
+  const { data, isLoading, isSuccess } = PostBkt(
+    String(hash)
+  );
+
+  const onSubmit = (): void => {
+    ref.current?.submit();
+  };
+
+  useEffect(() => {
+    if (isSuccess) {
+      handleSubmit(onSubmit)();
+    }
+  }, [isSuccess]);
+
+  if (isLoading) {
+    return (
+      <Container>
+        <Inline text={ t('order_process.bkt') } />
+      </Container>
+    );
+  }
+
+  return (
+    <Container>
+      <Inline text={ t('order_process.bkt') } />
+
+      <form ref={ ref } action="https://pgw.bkt.com.al/fim/est3Dgate" method="POST" onSubmit={ handleSubmit(onSubmit) }>
+        <input type="hidden" defaultValue={ data?.clientid } { ...register('clientid') } />
+        <input type="hidden" defaultValue="3d_pay_hosting" { ...register('storetype') } />
+        <input type="hidden" defaultValue={ data?.trantype } { ...register('trantype') } />
+        <input type="hidden" defaultValue={ data?.currency } { ...register('currency') } />
+        <input type="hidden" defaultValue={ data?.okUrl } { ...register('okUrl') } />
+        <input type="hidden" defaultValue={ data?.failUrl } { ...register('failUrl') } />
+        <input type="hidden" defaultValue={ data?.oId } { ...register('oId') } />
+        <input type="hidden" defaultValue={ data?.amount } { ...register('amount') } />
+        <input type="hidden" defaultValue={ data?.lang } { ...register('lang') } />
+
+        <input type="hidden" defaultValue={ data?.Email } { ...register('Email') } />
+        <input type="hidden" defaultValue={ data?.tel } { ...register('tel') } />
+
+        <input type="hidden" defaultValue={ data?.ShipToCompany } { ...register('ShipToCompany') } />
+        <input type="hidden" defaultValue={ data?.ShippingNameSurname } { ...register('ShippingNameSurname') } />
+        <input type="hidden" defaultValue={ data?.ShipToStreet1 } { ...register('ShipToStreet1') } />
+        <input type="hidden" defaultValue={ data?.ShipToCity } { ...register('ShipToCity') } />
+        <input type="hidden" defaultValue={ data?.ShipToPostalCode } { ...register('ShipToPostalCode') } />
+        <input type="hidden" defaultValue={ data?.ShipToCountry } { ...register('ShipToCountry') } />
+
+        <input type="hidden" defaultValue={ data?.ShipToCompany } { ...register('BillToCompany') } />
+        <input type="hidden" defaultValue={ data?.ShippingNameSurname } { ...register('BillToName') } />
+        <input type="hidden" defaultValue={ data?.ShipToStreet1 } { ...register('BillToStreet1') } />
+        <input type="hidden" defaultValue={ data?.ShipToCity } { ...register('BillToCity') } />
+        <input type="hidden" defaultValue={ data?.ShipToPostalCode } { ...register('BillToPostalCode') }  />
+        <input type="hidden" defaultValue={ data?.ShipToCountry } { ...register('BillToCountry') } />
+
+        <input type="hidden" defaultValue={ data?.rnd } { ...register('rnd') } />
+        <input type="hidden" defaultValue={ data?.hash } { ...register('hash') } />
+        <input type="hidden" defaultValue="utf-8" { ...register('encoding') } />
+
+        <input type="hidden" defaultValue={ data?.ObtBktId } { ...register('ObtBktId') } />
+        <input type="hidden" defaultValue={ data?.ObtBktPrice } { ...register('ObtBktPrice') } />
+
+        <input type="hidden" defaultValue={ data?.ObtBktDomain } { ...register('ObtBktDomain') } />
+        <input type="hidden" defaultValue={ data?.ObtBktLabelId } { ...register('ObtBktLabelId') } />
+
+        <input type="hidden" defaultValue={ data?.ObtBktUid } { ...register('ObtBktUid') } />
+        <input type="hidden" defaultValue={ 0 } { ...register('refreshtime') } />
+      </form>
+    </Container>
+  );
+};
+
+export default Bkt;

package/Content.tsx

@@ -0,0 +1,21 @@
+import { TFunction } from 'i18next';
+import Standard from './Standard/Standard';
+import Bkt from './BKT/Bkt';
+
+interface Props {
+  type?: string
+  hash?: string
+  t: TFunction<'common'>
+}
+
+const Content = ({ type, hash, t }: Props): JSX.Element => {
+  switch (type) {
+    case 'bkt':
+      return <Bkt hash={ hash } t={ t } />;
+
+    default:
+      return <Standard type={ type } hash={ hash } t={ t } />;
+  }
+};
+
+export default Content;

package/OrderProcess.tsx

@@ -0,0 +1,20 @@
+import { TFunction } from 'i18next';
+import { useParams } from 'react-router-dom';
+import { Meta } from '@autobusal/common';
+import Content from './Content';
+
+interface Props {
+  t: TFunction<'common'>
+}
+
+const OrderProcess = ({ t }: Props): JSX.Element => {
+  const { type, hash } = useParams();
+
+  return (
+    <Meta title={ t('order_process.title') }>
+      <Content type={ type } hash={ hash } t={ t } />
+    </Meta>
+  );
+};
+
+export default OrderProcess;

package/Standard/Standard.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { TFunction } from 'i18next';
+import { useNavigate } from 'react-router-dom';
+import { Inline } from '@autobusal/common';
+import { Container } from '../styles';
+import { PostStandard } from '../services';
+
+interface Props {
+  type?: string
+  hash?: string
+  t: TFunction<'common'>
+}
+
+const Standard = ({ type, hash, t }: Props): JSX.Element => {
+  const { data, isSuccess } = PostStandard(
+    String(type), String(hash)
+  );
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isSuccess) {
+      navigate(data);
+    }
+  }, [isSuccess]);
+
+  return (
+    <Container>
+      <Inline text={ t('order_process.loading') } />
+    </Container>
+  );
+};
+
+export default Standard;

package/index.ts

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

package/package.json

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

package/services.ts

@@ -0,0 +1,36 @@
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { BKTFormData } from './types';
+
+export const PostStandard = (type: string, hash: string): UseQueryResult<string> => (
+  useQuery({
+    queryKey: ['process-payment-standard', { type, hash }],
+    queryFn: async () => (
+      await apiClient
+        .post('/api/payment/make', {
+          type,
+          hash
+        })
+        .then(response => (
+          response?.data ?? ''
+        ))
+        .catch(() => {})
+    )
+  })
+);
+
+export const PostBkt = (hash: string): UseQueryResult<BKTFormData> => (
+  useQuery({
+    queryKey: ['process-payment-bkt', { hash }],
+    queryFn: async () => (
+      await apiClient
+        .post('/api/payment/bkt', {
+          hash
+        })
+        .then(response => (
+          response?.data ?? ''
+        ))
+        .catch(() => {})
+    )
+  })
+);

package/styles.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  padding: 50px 0;
+`;

package/types.ts

@@ -0,0 +1,34 @@
+export interface BKTFormData {
+  clientid: string
+  storetype: string
+  trantype: string
+  currency: number
+  okUrl: string
+  failUrl: string
+  oId: number
+  amount: number
+  lang: string
+  Email: string
+  tel: string
+  ShipToCompany?: string
+  ShippingNameSurname: string
+  ShipToStreet1: string
+  ShipToCity: string
+  ShipToPostalCode: string
+  ShipToCountry: string
+  BillToCompany?: string
+  BillToName: string
+  BillToStreet1: string
+  BillToCity: string
+  BillToPostalCode: string
+  BillToCountry: string
+  hash: string
+  rnd: string
+  encoding: string
+  ObtBktId: number
+  ObtBktPrice: number
+  ObtBktDomain: string
+  ObtBktLabelId: number
+  ObtBktUid: number
+  refreshtime: string
+}