bukazu-portal-react 3.2.2 → 3.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bukazu-portal-react",
-  "version": "3.2.2",
+  "version": "3.3.2",
   "description": "A package for loading the calendar and search module from bukazu loading into a react app.",
   "repository": "https://github.com/BUKAZU/React-portal",
   "scripts": {
@@ -29,7 +29,6 @@
     "autoprefixer": "^10.4.13",
     "chalk": "1.1.3",
     "cypress": "^13.1.0",
-    "dotenv": "4.0.0",
     "eslint": "^8.49.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^4.2.1",
@@ -52,10 +51,10 @@
     "whatwg-fetch": "2.0.3"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.5",
+    "@apollo/client": "^3.11.8",
     "date-fns": "^2.29.3",
     "formik": "^2.2.9",
-    "graphql": "^15.6.0",
+    "graphql": "^16.9.0",
     "react-date-picker": "^8.1.1",
     "react-intl": "^6.2.5",
     "react-paginate": "^8.1.4"

package/src/_lib/Tracking.ts

@@ -0,0 +1,51 @@
+export async function TrackEvent(data: any) {
+    const cookie = getCookie('bu_portal_session');
+
+    const all_data = {
+        ...data,
+        url: window.location.href,
+        session_identifier: cookie
+    }
+    fetch("https://api.bukazu.com/tracking", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(all_data)
+      }).then((response) => response.text())
+        .then((data) => { 
+          setCookie('bu_portal_session', data, 14);
+      } );
+}
+
+export function getSessionIdentifier() {
+    const sessionIdentifier = getCookie('bu_portal_session');
+    if (sessionIdentifier === '') {
+      return null
+    } else {
+      return sessionIdentifier
+    }
+  }
+
+function setCookie(cname, cvalue, exdays) {
+    const d = new Date();
+    d.setTime(d.getTime() + (exdays*24*60*60*1000));
+    let expires = "expires="+ d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+  }
+
+function getCookie(cname: string) {
+    let name = cname + "=";
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for(let i = 0; i <ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) == ' ') {
+        c = c.substring(1);
+      }
+      if (c.indexOf(name) == 0) {
+        return c.substring(name.length, c.length);
+      }
+    }
+    return "";
+  }

package/src/_lib/queries.ts

@@ -115,6 +115,8 @@ export const BOOKING_PRICE_QUERY = gql`
       company_name_label
       extra_fields_drivers_license_label
       extra_fields_destination_label
+      form_submit_text
+      form_submit_button_text
       booking_fields {
         id
         label
@@ -179,6 +181,7 @@ export const CREATE_BOOKING_MUTATION = gql`
     $departure_date: String!
     $costs: Json
     $extra_fields: String
+    $sessionIdentifier: String
   ) {
     createBooking(
       first_name: $first_name
@@ -214,6 +217,7 @@ export const CREATE_BOOKING_MUTATION = gql`
       comment: $comment
       costs: $costs
       extra_fields: $extra_fields
+      sessionIdentifier: $sessionIdentifier
     ) {
       booking_nr
     }

package/src/components/App.tsx

@@ -23,7 +23,7 @@ interface Props {
 }
 
 function App({ pageType, locale, filters }: Props): JSX.Element {
-  const { portalCode, objectCode } = useContext(AppContext);  
+  const { portalCode, objectCode } = useContext(AppContext);
 
   const { loading, error, data } = useQuery(PORTAL_QUERY, {
     variables: { id: portalCode }

package/src/components/CalendarPage/BookingForm.tsx

@@ -5,11 +5,12 @@ import { BOOKING_PRICE_QUERY } from '../../_lib/queries';
 import { useQuery } from '@apollo/client';
 import { AppContext } from '../AppContext';
 import { CalendarContext } from './CalendarParts/CalendarContext';
-
+import { TrackEvent } from '../../_lib/Tracking';
 
 function BookingForm(): JSX.Element {
-  const { portalCode, objectCode } = useContext(AppContext);
-  const { arrivalDate, departureDate } = useContext(CalendarContext)
+  const { portalCode, objectCode, locale } = useContext(AppContext);
+  const { arrivalDate, departureDate } = useContext(CalendarContext);
+
   const { data, loading, error } = useQuery(BOOKING_PRICE_QUERY, {
     variables: {
       portalCode,
@@ -31,12 +32,18 @@ function BookingForm(): JSX.Element {
 
   const result = data.PortalSite.houses[0];
 
-  return (
-    <FormCreator
-      house={result}
-      PortalSite={data.PortalSite}     
-    />
-  );
+  TrackEvent({
+    house_code: objectCode,
+    portal_code: portalCode,
+    locale: locale,
+    interaction_type: 'booking_started',
+    interaction_data: {
+      arrival_date: arrivalDate.date,
+      departure_date: departureDate.date
+    }
+  });
+
+  return <FormCreator house={result} PortalSite={data.PortalSite} />;
 }
 
 export default BookingForm;

package/src/components/CalendarPage/CalendarParts/GenerateCalendar.tsx

@@ -7,17 +7,25 @@ import { AppContext } from '../../AppContext';
 import { ApiError } from '../../Error';
 import Loading from '../../icons/loading.svg';
 import Calendar from '../Calendar';
+import { TrackEvent } from '../../../_lib/Tracking';
 
 interface Props {
   PortalSite: PortalSiteType;
 }
 
 function GenerateCalendar({ PortalSite }: Props): JSX.Element {
-  const { portalCode, objectCode } = useContext(AppContext);
+  const { portalCode, objectCode, locale } = useContext(AppContext);
   const { loading, error, data } = useQuery(SINGLE_HOUSE_QUERY, {
     variables: { portalCode, objectCode }
   });
 
+  TrackEvent({
+    house_code: objectCode,
+    portal_code: portalCode,
+    interaction_type: 'calendar_view',
+    locale: locale
+  });
+
   if (loading)
     return (
       <div>

package/src/components/CalendarPage/FormCreator.tsx

@@ -22,6 +22,7 @@ import {
   CalendarContext,
   CalendarContextDispatch
 } from './CalendarParts/CalendarContext';
+import { getSessionIdentifier } from '../../_lib/Tracking';
 
 interface Props {
   house: HouseType;
@@ -52,6 +53,10 @@ function FormCreator({ house, PortalSite }: Props): JSX.Element {
 
   const optBookingFieldsInitialized = initializeBookingFields(bookingFields);
 
+  const sessionIdentifier = getSessionIdentifier();
+
+  console.log({ sessionIdentifier });
+
   return (
     <Formik
       validate={(values) => validateForm(values, house, bookingFields)}
@@ -85,7 +90,8 @@ function FormCreator({ house, PortalSite }: Props): JSX.Element {
           arrival_date: values.arrivalDate.date,
           departure_date: values.departureDate.date,
           costs: JSON.stringify(values.costs),
-          extra_fields: JSON.stringify(values.extra_fields)
+          extra_fields: JSON.stringify(values.extra_fields),
+          sessionIdentifier: sessionIdentifier
         };
 
         createBooking({ variables }).then(() => {
@@ -175,7 +181,7 @@ function FormCreator({ house, PortalSite }: Props): JSX.Element {
             <Summary house={house} values={values} />
             {status && status.msg && <div>{status.msg}</div>}
             <div className="terms">
-              <FormattedMessage id="agree_with" />{' '}
+              {PortalSite.form_submit_text}{' '}
               <FormattedMessage id="terms">
                 {(fm) => (
                   <Modal buttonText={fm}>
@@ -212,7 +218,7 @@ function FormCreator({ house, PortalSite }: Props): JSX.Element {
               type="submit"
               disabled={isSubmitting}
             >
-              <FormattedMessage id="book" />
+              {PortalSite.form_submit_button_text}
             </button>
           </div>
         </Form>

package/src/components/SearchPage/SearchPage.tsx

@@ -3,6 +3,7 @@ import Filters from './Filters';
 import Results from './Results';
 import { PortalOptions, PortalSiteType } from '../../types';
 import { FiltersType } from './filters/filter_types';
+import { TrackEvent } from '../../_lib/Tracking';
 
 type MyProps = {
   options: PortalOptions;
@@ -71,7 +72,13 @@ class SearchPage extends Component<MyProps, MyState> {
 
   render() {
     const { filters, activePage, limit, skip } = this.state;
-    const { options, PortalSite } = this.props;
+    const { options, PortalSite, locale } = this.props;
+
+    TrackEvent({
+      portal_code: PortalSite.portal_code,
+      interaction_type: 'search_view',
+      locale: locale
+    });
 
     return (
       <div