Communication

Communication React component displays a communication thread regarding selected agricultural parcel between the farmer/holding and the agency.

User interactions

In communication thread user can see sent (on the right) and delivered (on the left) messages with their attachments and add a new message. Users with appropriate user rights can also delete messages by clicking on button on the right side of the message.

Messages are ordered from the oldest to the newest one. When the communication component is displayed, the display is set to the newest message.

Adding new message

By clicking on Add new message button new window displays:

(1) text area input field for the user to write a message
(2) message attachments can be added by clicking on button. User browses file to be uploaded from local drive.
(3) already uploaded files can be removed from attachments by clicking on the button
(4) adding a new message can be canceled by clicking on the button
(5) new message is added by clicking on button

Limitations

Certain limitations apply to the communication component and sending a message.

Limitation	Description
Text length	The length of the written text in text area input field is limited to 2000 characters.
File format	Attachment files supported formats: bmp, csv, dcx, djvu, doc, docx, gif, htm, html, jpeg, jpg, jpm, mpp, odp, ods, odt, pcx, pdf, png, pnm, ppt, pptx, rtf, tif, tiff, txt, vsd, xls, xlsx, xml
File size	Attachment file size is limited to 20 MB.
Max attachments	Max number of attachments per message is 10.
Empty message	It is not allowed to send an empty message.

Communication API

Usage

  <Communication
    width={600}
    height={400}
    scope="SI22"
    farmerServiceUrl="https://am-pilot.sinergise.com/farmer/"
    amServicesAuthToken={() => keycloak.token}
    holdingId="500611"
    apId="6514199"
    isMessageFormActive={isMessageFormActive}
    onCancel={onCancel}
    onDelete={onDelete}
    onBeforePost={onBeforePost}
    messagePosted={messagePosted}
    messageDeleted={messageDeleted}
    messageStatusUpdated={messageStatusUpdated}
    language="en"
  />

Component name

The component name Communication should be used when providing the props.

Props

The props of the Communication React component are described in the table below.

Name	Type	Default	Description
`scope`*	`string`		Reference data differentiator (e.g. `SI22`). For more details see scope.
`farmerServiceUrl`*	`string`		The base URL (e.g. `https://am-pilot.sinergise.com/farmer/`) at which the endpoints for farmer service are.
`amServicesAuthToken`*	`string` or callback `(() => string)`		AM services authentication token. Either as a string or a function that returns a string.
`holdingId`*	`string`		Holding reference ID (e.g. `500611`).
`apId`*	`string`		Agricultural parcel (type of FOI) reference ID (e.g. `6514199`)
`language`	`string`	`en`	The selected language. Available options: `sl` - Slovenian, `en` - English, `de` - German
`dateFormat`	`string`		Date format (e.g. `d. M. yyyy`). If not present and `language` is present, it will take the default selected language format. If both are not present defaults to `enUS`. See the accepted format guide here.
`width`	`number` or `string`	`100%`	Width (e.g. `300`) of the component in pixels.
`height`	`number` or `string`	`100%`	Height (e.g. `300`) of the component in pixels.
`isMessageFormActive`	callback `((value: boolean) => void)`		Callback that receives a boolean value depending on if the active form has any attachments or text. See the example in isMessageFormActive.
`onCancel`	callback `(() => Promise<boolean>)`		Callback that returns a boolean promise. Functions as an interceptor for any logic you want to do before a cancel form click is either confirmed or denied. See the example in onCancel.
`onDelete`	callback `(() => Promise<boolean>)`		Callback that returns a boolean promise. Functions as an interceptor for any logic you want to do before a delete message click is either confirmed or denied. See the example in onDelete.
`onBeforePost`	callback `(() => Promise<boolean>)`		Callback that returns a boolean promise. Functions as an interceptor for any logic you want to do before a post message click is either confirmed or denied and invalid attachments are removed. See the example in onBeforePost.
`messagePosted`	callback `((value: MessagePosted) => void)`		Callback that receives an object with posted message and updated messages array. See the example in messagePosted.
`messageDeleted`	callback `((value: messageDeleted) => void)`		Callback that receives an object with deleted message ID and updated messages array. See the example in messageDeleted.
`messageStatusUpdated`	callback `((value: messageStatusUpdated) => void)`		Callback that receives an object with updated message ID, updated message status, updated message status array, updated message, and updated messages array. See the example in messageStatusUpdated.
`getMessagesInfo`	callback `((value: getMessagesInfo) => void)`		Callback that receives an object with the number of total messages and the number of unread messages. See the example in getMessagesInfo.

* indicates mandatory props

isMessageFormActive

Example for isMessageFormActive:

const isMessageFormActive = (value: boolean) => {
  console.log('IS_MESSAGE_FORM_ACTIVE', value);
};

onCancel

Example for onCancel:

const deferredAction = () => {
  let resolve: ((value: boolean | PromiseLike<boolean>) => void) | null = null;

  const promise = new Promise<boolean>((res) => {
    resolve = res;
  });

  return { promise, resolve };
};

const onCancel = async (): Promise<boolean> => {
  console.log('ON_CANCEL');

  const proceed = await deferredAction();

  console.log('ON_CANCEL_FINISHED', proceed);

  return proceed;
};

onDelete

Example for onDelete:

const deferredAction = () => {
  let resolve: ((value: boolean | PromiseLike<boolean>) => void) | null = null;

  const promise = new Promise<boolean>((res) => {
    resolve = res;
  });

  return { promise, resolve };
};

const onDelete = async (): Promise<boolean> => {
  console.log('ON_DELETE');

  const proceed = await deferredAction();

  console.log('ON_DELETE_FINISHED', proceed);

  return proceed;
};

onBeforePost

Example for onBeforePost:

const deferredAction = () => {
  let resolve: ((value: boolean | PromiseLike<boolean>) => void) | null = null;

  const promise = new Promise<boolean>((res) => {
    resolve = res;
  });

  return { promise, resolve };
};

const onBeforePost = async (): Promise<boolean> => {
  console.log('ON_BEFORE_POST');

  const proceed = await deferredAction();

  console.log('ON_BEFORE_POST_FINISHED', proceed);

  return proceed;
};

messagePosted

Example for messagePosted:

{
  message: Message;
  messages: Message[];
}

const messagePosted = (value: MessagePosted) => {
  console.log('MESSAGE_POSTED', value);
}

messageDeleted

Example for messageDeleted:

{
  messageId: number;
  messages: Message[];
}

const messageDeleted = (value: MessageDeleted) => {
  console.log('MESSAGE_DELETED', value);
}

messageStatusUpdated

Example for messageStatusUpdated:

{
  messageId: number;
  status: Status;
  statuses: Status[];
  message: Message;
  messages: Message[];
}

const messageStatusUpdated = (value: MessageStatusUpdated) => {
  console.log('MESSAGE_STATUS_UPDATED', value);
}

getMessagesInfo

Example for getMessagesInfo:

{
  totalMessages: number;
  unreadMessages: number;
}

const getMessagesInfo = (value: MessagesInfo) => {
  console.log('GET_MESSAGES_INFO', value);
}