Feature/yoma 94 improve opportunity completion flow (#1220)

* yoma: opportunity completion flow improvements (time to complete, starRating, feedback, recommendable)

* yoma: opportunity completion flow improvements (readonly view)

src/web/src/api/models/myOpportunity.ts

@@ -13,6 +13,15 @@ export interface MyOpportunityRequestVerify {
   geometry: Geometry | null;
   dateStart: string | null;
   dateEnd: string | null;
+  commitmentInterval: MyOpportunityRequestVerifyCommitmentInterval | null;
+  recommendable: boolean | null;
+  starRating: number | null;
+  feedback: string | null;
+}
+
+export interface MyOpportunityRequestVerifyCommitmentInterval {
+  id: string;
+  count: number;
 }
 
 export enum VerificationStatus {
@@ -52,9 +61,10 @@ export interface MyOpportunitySearchResults {
 export interface MyOpportunityInfo {
   id: string;
   userId: string;
-  userEmail: string;
-  userPhoneNumber: string;
-  userDisplayName: string | null;
+  username: string;
+  userEmail: string | null;
+  userPhoneNumer: string | null;
+  userDisplayName: string;
   userCountry: string | null;
   userEducation: string | null;
   userPhotoId: string | null;
@@ -76,16 +86,29 @@ export interface MyOpportunityInfo {
   verificationStatusId: string | null;
   verificationStatus: VerificationStatus | null | string; //NB: string
   commentVerification: string | null;
+  commitmentInterval: TimeIntervalOption | null;
+  commitmentIntervalCount: number | null;
   dateStart: string | null;
   dateEnd: string | null;
   dateCompleted: string | null;
   zltoReward: number | null;
   yomaReward: number | null;
+  recommendable: boolean | null;
+  starRating: number | null;
+  feedback: string | null;
   dateModified: string;
   verifications: MyOpportunityInfoVerification[] | null;
   skills: Skill[] | null;
 }
 
+export enum TimeIntervalOption {
+  Minute,
+  Hour,
+  Day,
+  Week,
+  Month,
+}
+
 export interface Skill {
   id: string;
   name: string;

src/web/src/components/Opportunity/LocationPicker.tsx

@@ -122,7 +122,7 @@ const LocationPicker: React.FC<InputProps> = ({
     >
       <div className="flex w-full flex-row">
         <div className="hidden items-center p-8 md:flex">
-          <IoMdPin className="h-6 w-6 text-gray-dark" />
+          <IoMdPin className="h-10 w-10 text-purple" />
         </div>
         <div className="flex flex-grow flex-col items-start justify-center p-4 md:p-0">
           <div>{label}</div>