add chat offer, fix android ui issue

Author: alexjs-dev

.env

@@ -1,2 +1,2 @@
-API_URL=https://forautobackend.herokuapp.com
-API_URL_A=http://localhost:3030
+API_URL_A=https://forautobackend.herokuapp.com
+API_URL=http://localhost:3030

components/Cards/VehicleCard.js

@@ -125,7 +125,11 @@ const VehicleCard = (props) => {
         visible={overlayActive}
         onClose={() => setOverlayActive(false)}
       >
-        <VehicleCardScreen price={finalPrice} title={vehicleTitle} />
+        <VehicleCardScreen
+          listingId={listingId}
+          price={finalPrice}
+          title={vehicleTitle}
+        />
       </VehicleCardOverlay>
       <div className={styles.image}>
         <BaseButton

components/Cards/VehicleCardScreen/VehicleCardScreen.tsx

@@ -12,11 +12,13 @@ const screens = {
 type Props = {
   price?: number
   title: string
+  listingId: string
 }
 
 const VehicleCardScreen: React.FunctionComponent<Props> = ({
   price,
   title,
+  listingId,
 }) => {
   const [screen, setScreen] = useState(screens.BASE)
 
@@ -35,6 +37,7 @@ const VehicleCardScreen: React.FunctionComponent<Props> = ({
         visible={screen === screens.OFFER}
         price={price}
         title={title}
+        listingId={listingId}
       />
       <BaseScreen
         onOfferScreenOpen={() => setScreen(screens.OFFER)}

components/Cards/VehicleCardScreen/screens/OfferScreen.tsx

@@ -10,21 +10,24 @@ type Props = {
   visible: boolean
   price?: number
   title: string
+  listingId: string
 }
 
 const OfferScreen: React.FunctionComponent<Props> = ({
   onCancel,
   visible,
   price,
   title,
+  listingId,
 }) => {
   const { t } = useTranslation()
   if (!visible) return null
   return (
     <div className={styles.container}>
       <h5>{title}</h5>
       {price && <p>{price}€</p>}
-      <OfferForm />
+      {/* @ts-ignore */}
+      <OfferForm listingId={listingId} />
       <Button
         color={Button.colors.RED}
         onClick={onCancel}

components/Forms/OfferForm.js

@@ -1,13 +1,28 @@
 import React from 'react'
 import { reduxForm } from 'redux-form'
 import { useTranslation } from 'react-i18next'
+import get from 'lodash/get'
+import toNumber from 'lodash/toNumber'
+import { useDispatch } from 'react-redux'
 import { Button, Input } from '~components'
+import ChatCreators from '~store/chats/creators'
 import styles from './OfferForm.module.scss'
 
-const OfferForm = ({ handleSubmit, disabled }) => {
+const OfferForm = ({ handleSubmit, listingId, disabled }) => {
   const { t } = useTranslation()
+  const dispatch = useDispatch()
   const onSubmit = (val) => {
-    console.log('values', val)
+    const offer = get(val, 'offer', 0)
+    if (listingId && offer && toNumber(offer) > 0) {
+      dispatch(
+        ChatCreators.createChat({
+          listingId,
+          currency: 'EUR',
+          offer: toNumber(offer),
+          redirect: false,
+        })
+      )
+    }
   }
   return (
     <form
@@ -28,7 +43,7 @@ const OfferForm = ({ handleSubmit, disabled }) => {
       />
       <Button
         fluid
-        label="Offer"
+        label={t('button.offer')}
         disabled={disabled}
         onClick={handleSubmit(onSubmit)}
       />

components/VehicleOfTheDay/VehicleOfTheDay.tsx

@@ -102,7 +102,7 @@ const VehicleContent: React.FunctionComponent<VehicleOfTheDayProps> = ({
         phone={listing.contactPhone}
         userId={listing.userId}
       />
-      <OfferForm />
+      <OfferForm listingId={listing._id} />
       <Price
         price={listing.price}
         discountedPrice={

components/VehicleOfTheDay/components/VotdActions.tsx

@@ -11,7 +11,7 @@ type Props = {
   phone?: string | null
   email?: string | null
   userId: string
-  listingId: string
+  listingId?: string
 }
 
 const VotdActions: React.FunctionComponent<Props> = ({

pages/listing/[id].tsx

@@ -113,7 +113,7 @@ const ListingPage: React.FunctionComponent<Props> = ({ prefetchedListing }) => {
           />
         )}
         {/* @ts-ignore */}
-        {!isSold && <OfferForm disabled={isSold} />}
+        {!isSold && <OfferForm disabled={isSold} listingId={listing._id} />}
         <VehicleAdvDetails vehicle={listing.vehicle} />
         <div className={styles.spacer} />
         <ListingsCarousel

pages/messages/components/ChatList.tsx

@@ -14,6 +14,7 @@ import { BaseButton, Loader, Button } from '../../../components'
 import { getUsername } from '../../../utils/helpers'
 import styles from './ChatList.module.scss'
 import ChatAvatar from './ChatAvatar'
+import { getMessage } from './chatUtils'
 
 type Props = {
   onPaginate: () => void
@@ -60,7 +61,9 @@ const ChatList: React.FunctionComponent<Props> = ({ onPaginate }) => {
                   {get(chat, 'lastMessage.userId') === currentUser._id && (
                     <FiCornerDownRight />
                   )}
-                  <span>{get(chat, 'lastMessage.text', '')}</span>
+                  <span>
+                    {get(chat, 'lastMessage') && getMessage(chat.lastMessage)}
+                  </span>
                 </section>
                 {unreads > 0 && (
                   <span className={styles.unreadsBubble}>{unreads}</span>

pages/messages/components/MessagesList.module.scss

@@ -44,6 +44,14 @@
         align-self: flex-start;
         color: $color-dark;
       }
+      &.unstyledMessage {
+        background-color: transparent;
+        box-shadow: unset;
+        color: $color-red;
+        padding: 0;
+        font-weight: $font-weight-medium;
+        font-family: $font-family;
+      }
     }
   }
 }