# Steps to add property in listing page.

We have static listing of property.

Find file listingPage.js
PROPERTY_LISTING variable is present with previous property, to add property just add object of below property as :

  {
    id: number,
    city: string,
    targetIRR: string,
    minInvestment: string,
    image: string, public image link
    link: string,
    label: string, CLOSE | INVESEST
  }
  

For above object id should always be unique.

Then we need to add propery detials in PROPERTY list declared in listinPage.js as below object

  id: 1,
  city: 'Austin, Texas',
  address: '937 Stampede Rd, San Marcos, TX 78666',
  downloadLink: 'https://docsend.com/view/d2i5nwi7uvvtsaq7',
  propertyImages: [
    {
      id: 0,
      // img: '/static/images/listing-img/img1.jpg',
      img: '/static/images/featured-listing-house.png',
      main: true,
    },
    {
      id: 1,
      img: '/static/images/listing-img/img2.jpg',
      main: false,
    },
    {
      id: 2,
      img: '/static/images/listing-img/img3.jpg',
      main: false,
    },
  ],
  propertyOverview: [
    {
      img: '/static/images/listing-img/Bed.png',
      text: '4 bedroom',
    },
    {
      img: '/static/images/listing-img/Bath.png',
      text: `2 1/2 bath`,
    },
    {
      img: '/static/images/listing-img/roadster-fill.png',
      text: '2 parking spaces',
    },
    {
      img: '/static/images/listing-img/Duplicate.png',
      text: '2,281 sqft',
    },
  ],
  propertyDetails: {
    title: 'Property Details',
    description:
      'Austin is one of the most sought-after real estate markets in the nation and home to numerous high-tech companies. By 2050 the population of the Austin MSA is projected to more than double in size to more than 4.5 million residents.',
    readMore:
      'Tesla is building a factory in Austin and bringing thousands of technology jobs to the area, and Apple plans to build $1 billion-dollar campus that will add 5000+ jobs to the market. Other notable employers include Amazon, PayPal, Dell, AMD, Applied Materials, Oracle, and Samsung.',
    stats: [
      {
        title: 'Property Built In',
        stat: '2019',
      },
      {
        title: 'Acquisition Price',
        // title: 'Property Value',
        stat: '$370,000',
      },
      {
        title: 'Equity',
        // title: 'Total Equity',
        stat: '$122,500',
      },
      {
        title: 'Target IRR',
        stat: '22.0%',
      },
      {
        title: 'Leverage',
        stat: '75%',
      },
      // {
      //   title: 'Funded',
      //   stat: '25%',
      // },
      {
        title: 'Strategy',
        stat: 'Long Term Rental',
      },
      {
        title: 'Lock-up Period',
        stat: '1 year',
      },
      {
        title: 'Investment',
        stat: '$1,000 min',
      },
      {
        title: '1 Token',
        stat: '$1,000',
      },
    ],
  },
},

Components needed to work for propery addition listing:
a. PropertyListingPage.jsx
b. ListingForm.jsx

Users can also request tokens if token for property is available.

https://invest-api-dev.tirios.ai/api/v1/tokens/tokenPurchaseRequestDetails/?extendedVersion=true&propertySpvId=6

{
	"response": {
		"pendingTokens": 0,
		"ownedTokens": 0,
		"availableTokens": 97,
		"processingTokens": 0,
		"tokenAmount": null,
		"targetIrr": null,
		"propertyLabel": null,
		"propertySpvId": null,
		"contractStatus": null,
		"purchaseRequestStatus": null,
		"purchaseRequestId": null
	}
}

Above api gives us details regarding tokens availability.

switchButton state in listingForm components:
switchButton state is false if purchaseRequestStatus is payment_processing or null

switchButton state is true if purchaseRequestStatus is pending

so basically switchButton state helps to identify if tokens has been requested but not paid so user can cancel requests if switchButton is true else user can request for tokens as no payment process is on pending.