Implement autocomplete and geocoding

package.json

@@ -52,6 +52,7 @@
     "react-i18next": "^11.7.3",
     "react-redux": "^7.2.3",
     "react-router-dom": "^5.2.0",
+    "react-select": "^4.3.1",
     "react-table": "^7.6.3",
     "react-to-typescript-definitions": "^3.0.1",
     "reactstrap": "^8.7.1",
@@ -70,6 +71,7 @@
     "@pagopa/openapi-codegen-ts": "9.0.0",
     "@pagopa/ts-commons": "9.1.0",
     "@svgr/parcel-plugin-svgr": "^5.5.0",
+    "@types/react-select": "^4.0.15",
     "@types/react-google-recaptcha": "^2.1.0",
     "@types/classnames": "^2.2.11",
     "@types/file-saver": "^2.0.2",

src/api/api.yaml

@@ -25,8 +25,24 @@ tags:
     description: API Token
   - name: help
     description: Help
+  - name: geolocation-token
+    description: API Geolocation Token
 
 paths:
+  /geolocation-token:
+    get:
+      tags:
+        - geolocation-token
+      summary: Get token for geolocation
+      operationId: getGeolocationToken
+      responses:
+        200:
+          description: Token for geolocation
+          schema:
+            $ref: '#/definitions/GeolocationToken'
+        403:
+          $ref: '#/responses/Forbidden'
+
   /agreements:
     post:
       tags:
@@ -906,6 +922,9 @@ definitions:
       creationDate:
         type: string
         format: date
+      suspendedReasonMessage:
+        type: string
+        maxLength: 250
   DiscountState:
     type: string
     enum:
@@ -927,23 +946,25 @@ definitions:
   Address:
     type: object
     required:
-      - street
-      - zipCode
-      - city
-      - district
+      - fullAddress
+      - coordinates
     properties:
-      street:
-        type: string
-      zipCode:
+      fullAddress:
         type: string
-        minLength: 5
-        maxLength: 5
-      city:
-        type: string
-      district:
-        type: string
-        minLength: 2
-        maxLength: 2
+        minLength: 10
+      coordinates:
+        $ref: '#/definitions/Coordinates'
+
+  Coordinates:
+    type: object
+    required:
+      - latitude
+      - longitude
+    properties:
+      latitude:
+        type: number
+      longitude:
+        type: number
 
   Documents:
     type: object
@@ -1003,6 +1024,14 @@ definitions:
       message:
         type: string
         maxLength: 200
+  GeolocationToken:
+    type: object
+    required:
+      - token
+    properties:
+      token:
+        type: string
+        minLength: 1
 
 responses:
   InvalidRequest:

src/api/api_backoffice.yaml

@@ -58,6 +58,8 @@ paths:
           format: date
         - $ref: '#/parameters/PageSize'
         - $ref: '#/parameters/PageNumber'
+        - $ref: '#/parameters/RequestColumnSort'
+        - $ref: '#/parameters/SortDirection'
       responses:
         200:
           description: List of agreements
@@ -320,7 +322,27 @@ parameters:
     enum:
       - Agreement
       - ManifestationOfInterest
-
+  RequestColumnSort:
+    name: sortColumn
+    in: query
+    description: Sort by column
+    required: false
+    type: string
+    enum:
+      - Operator
+      - RequestDate
+      - State
+      - Assignee
+  SortDirection:
+    name: sortDirection
+    in: query
+    description: Sort Direction
+    required: false
+    type: string
+    default: ASC
+    enum:
+      - ASC
+      - DESC
 definitions:
   Agreements:
     type: object
@@ -669,7 +691,8 @@ definitions:
             type: array
             minItems: 1
             items:
-              $ref: '#/definitions/Address'
+              type: string
+              minLength: 10
 
   BothChannels:
     allOf:
@@ -685,34 +708,15 @@ definitions:
             type: array
             minItems: 1
             items:
-              $ref: '#/definitions/Address'
+              type: string
+              minLength: 10
 
   SalesChannelType:
     type: string
     enum:
       - OnlineChannel
       - OfflineChannel
       - BothChannels
-  Address:
-    type: object
-    required:
-      - street
-      - zipCode
-      - city
-      - district
-    properties:
-      street:
-        type: string
-      zipCode:
-        type: string
-        minLength: 5
-        maxLength: 5
-      city:
-        type: string
-      district:
-        type: string
-        minLength: 2
-        maxLength: 2
 
   Documents:
     type: array

src/api/api_public.yaml

@@ -45,6 +45,7 @@ definitions:
       - emailAddress
       - category
       - message
+      - recaptchaToken
     properties:
       legalName:
         type: string
@@ -71,6 +72,8 @@ definitions:
       message:
         type: string
         maxLength: 200
+      recaptchaToken:
+        type: string
 
 
 responses:

src/api/index.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosError } from 'axios';
 import { getCookie, logout } from '../utils/cookie';
-import {AgreementApi, ProfileApi, DiscountApi, DocumentApi, DocumentTemplateApi, ApiTokenApi, HelpApi } from './generated';
+import {AgreementApi, ProfileApi, DiscountApi, DocumentApi, DocumentTemplateApi, ApiTokenApi, HelpApi, GeolocationTokenApi } from './generated';
 
 const token = getCookie();
 
@@ -30,4 +30,5 @@ export default {
 	DocumentTemplate: new DocumentTemplateApi(undefined, process.env.BASE_API_PATH, axiosInstance),
 	ApiToken: new ApiTokenApi(undefined, process.env.BASE_API_PATH, axiosInstance),
 	Help: new HelpApi(undefined, process.env.BASE_API_PATH, axiosInstance), 
+	GeolocationToken: new GeolocationTokenApi(undefined, process.env.BASE_API_PATH, axiosInstance), 
 };

src/components/Form/CreateProfileForm/ProfileData/ProfileData.tsx

@@ -21,7 +21,7 @@ const defaultSalesChannel = {
   channelType: "",
   websiteUrl: "",
   discountCodeType: "",
-  addresses: [{ street: "", zipCode: "", city: "", district: "" }]
+  addresses: [{ fullAddress: "", coordinates: { latitude: "", longitude: "" } }]
 };
 
 const defaultInitialValues = {
@@ -63,6 +63,7 @@ const ProfileData = ({
   const [initialValues, setInitialValues] = useState<any>(defaultInitialValues);
   const { triggerTooltip } = useTooltip();
   const [loading, setLoading] = useState(true);
+  const [geolocationToken, setGeolocationToken] = useState<any>();
 
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -105,23 +106,46 @@ const ProfileData = ({
       .map(response => response.data)
       .fold(
         () => setLoading(false),
-        profile => {
+        (profile: any) => {
           setInitialValues({
             ...profile,
+            salesChannel:
+              profile.salesChannel.channelType === "OfflineChannel"
+                ? {
+                    ...profile.salesChannel,
+                    addresses: profile.salesChannel.addresses.map(
+                      (address: any) => ({
+                        ...address,
+                        value: address.fullAddress,
+                        label: address.fullAddress
+                      })
+                    )
+                  }
+                : profile.salesChannel,
             hasDifferentFullName: !!profile.name
           });
           setLoading(false);
         }
       )
       .run();
 
+  const getGeolocationToken = async () =>
+    await tryCatch(() => Api.GeolocationToken.getGeolocationToken(), toError)
+      .map(response => response.data)
+      .fold(
+        () => void 0,
+        token => setGeolocationToken(token.token)
+      )
+      .run();
+
   useEffect(() => {
     if (isCompleted) {
       setLoading(true);
       void getProfile(agreement.id);
     } else {
       setLoading(false);
     }
+    void getGeolocationToken();
   }, []);
 
   const getSalesChannel = (salesChannel: any) => {
@@ -166,17 +190,19 @@ const ProfileData = ({
         });
       }}
     >
-      {({ values }) => (
+      {({ values, setFieldValue }) => (
         <Form autoComplete="off">
           <FormContainer className="mb-20">
             <ProfileInfo formValues={values} />
             <ReferentData />
             <ProfileImage />
             <ProfileDescription />
             <SalesChannels
+              geolocationToken={geolocationToken}
               handleBack={handleBack}
               formValues={values}
               isValid={!!agreement.imageUrl}
+              setFieldValue={setFieldValue}
             />
           </FormContainer>
         </Form>