# 11 - More functionalities, Payment selection process, and Deployment
### Tooltip with actions
Tooltips display informative text when users hover over, focus on, or tap an element.

Let's add tooltip into the action button of "Product Card" for the following repo:
https://github.com/ProgFadi/task-09.git

Just wrape the component with Tooltip like below:

<Tooltip title={'Add to cart'}>
        <IconButton aria-label="add to cart">
          <AddShoppingCartIcon />
        </IconButton>
</Tooltip>
       

### Skeleton
Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.

Let's add Skeleton to each product card comonent as below:
1. Add isLoading state to products page, with default value set to true

const [isLoading, setIsLoading] = useState(true)

then change value to false once fetching data finished in useEffect:

 useEffect(()=>{
        axios.get('https://fakestoreapi.com/products')
        .then((res)=>{
            console.log(res)
            setProducts(res.data)
            setIsLoading(false)
        })
        .catch((err)=>{
            console.log(err)
            setIsLoading(false)
        })
    },[])

Now we have to pass isLoading as props to the product card:

 {
               products && products.map((item)=>{
                   return <PCard obj={item} isLoading={isLoading}/>
               })
 }

See sample of implemeting Skeleton in product card component:

{props.isLoading ? (
        <Box
        sx={{
            display:'flex',
            flexDirection:'row',
            justifyContent:'flex-start',
            alignItems:'center'
        }}
        >
             <Skeleton
            animation="wave"
            variant="circular"
            width={40}
            height={40}
          />
          <Skeleton
            animation="wave"
            height={10}
            width="80%"
            style={{ marginBottom: 6 }}
          />
        </Box>
      ) : (
        <CardHeader
          avatar={
            <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
              R
            </Avatar>
          }
          action={
            <IconButton aria-label="settings">
              <MoreVertIcon />
            </IconButton>
          }
          title={obj.title}
          subheader={obj.category}
        />
      )}

see full implemented code at repo.

### Delete a cart from cart list
- Add new function called "removeCart" in CartContext which contains the following code that removes a cart from localstorage array by passing id of the cart.

  const removeCart = (id)=>{
        
        let cartsTemp = carts.filter((item)=>{
           return item.id != id
        })
        localStorage.setItem(CARTS_KEY,JSON.stringify(cartsTemp))

        setCarts(cartsTemp)

    }

- in Carts.jsx component, use `removeCart` from CartContext and use it in card component.

 <IconButton
    onClick={()=>removeCart(cart.id)}
    >
    <RemoveCircleIcon/>
 </IconButton>

above code part should be added to card item rendering.

### Transition
There are several ways to apply a Transition to a component.
**MUI Transition**
Example:

<Grow
        in={!props.isLoading}
        style={{ transformOrigin: '0 0 0' }}
        {...(!props.isLoading ? { timeout: 1000 } : {})}
      >
        <CardHeader
          avatar={
            <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
              R
            </Avatar>
          }
          action={
            <IconButton aria-label="settings">
              <MoreVertIcon />
            </IconButton>
          }
          title={obj.title}
          subheader={obj.category}
        />
</Grow>

**Using CSS-Transition library**
**Simple Transition:**
Take a look at the following example on sandbox which illustrates applying a simple transition like we did with MUI.
https://codesandbox.io/s/m77l2vp00x?file=/index.js

### Responsive UI
https://mui.com/guides/responsive-ui/

## Payment Process & Checkout
### Payment Page
The payment page is a web page that allows customers to purchase items easily and securely. It is a term which is widely applied in e-commerce and is connected with different e-commerce web pages.

There are two kinds of payment pages:
* HPP(Hosted Payment Page). That is when a customer is redirected to an external link so to accomplish the payment.
* API. That is when a customer pays for services and products inside the website.

### Online Payment Methods
Before we get into how payment processing works, let’s review some of the different payments methods customers prefer for online purchases:

**Credit Cards:** One of the most popular and straightforward ways to pay both offline and online.
**Direct Debit:** Customers can enter their bank account details, making this the equivalent of paying in cash or by check.
**Alternative Payments Methods:** This includes wallets, like PayPal, Amazon Pay, Google Pay and Apple Pay, and buy-now-pay-later solutions, like Affirm, Afterpay, Klarna and Sezzle.
**Digital Currency:** A very small number of people do pay with Bitcoin or another cryptocurrency.

### Ecommerce Payment Processing
**Payment gateways:** act as the courier between your ecommerce website where the customer enters their payment information and your payment processor
**Payment processors:** take the information from the gateway, verify that the customer has the funds, and deposit the money in your merchant account
**Merchant accounts:** receive the funds once they are processed

**How Do Ecommerce Payment Processors, Gateways and Merchant Accounts Work Together?**
let’s review the steps for a standard transaction to see how the payment systems work together once the customer is finished adding items to their shopping cart:

Step 1. The customer enters their credit or debit information at checkout.
Step 2. The payment gateway secures the data and sends it to the payment processor
Step 3. The payment processor checks with the credit card network (Bank) to ensure that the customer has the funds to cover the purchase.
Step 4. The customer’s credit card issuing bank either accepts or rejects the payment request.
Step 5. The payment processor then sends the results (approved or denied) through the payment gateway, so the customer can view on the merchant’s website if the transaction was approved.

**How Do Ecommerce Payment Processors, Gateways and Merchant Accounts Work Together?**
Now that we’ve explained each element, let’s review the steps for a standard transaction to see how the payment systems work together once the customer is finished adding items to their shopping cart:

**Step 1.** The customer enters their credit or debit information at checkout.

**Step 2.** The payment gateway secures the data and sends it to the payment processor.

**Step 3.** The payment processor checks with the credit card network to ensure that the customer has the funds to cover the purchase.

**Step 4.** The customer’s credit card issuing bank either accepts or rejects the payment request.

**Step 5.** The payment processor then sends the results (approved or denied) through the payment gateway, so the customer can view on the merchant’s website if the transaction was approved.

**Step 6.** The payment processor issues the funds to either the merchant account or the merchant’s bank.

## Deployment
Deployment is the mechanism which through it we can deliver applications, modules, updates, and patches to users.

**Netlify**
Netlify is a cloud computing company that offers hosting and server less back end services for static websites.

It is a tool that provides an intuitive online interface for deploying websites in just a few clicks.

## Ways to deploy
**1. Primitive Way**
By Drag and drop `build` folder of your application to netlify.

But First, build your Reactjs application

npm run build

Then drag build folder and drop it on Netlify site.
Now just visit the generated URL of your app, it must work.

Note: If your application is Router-based, then mostly you will get 404 error when you try to navigate to a route of your SPA!.

Example:
Try visit your generated with `/login`, you will get 404 error.

Reason:
This occured because web server of netlify doesn't define and know `/login`, this route defined and used in SPA to be worked at the client side.

Solution:
We need to find a way to tell web server to redirect any user try to navigate to /* into `index.html` of the SPA. this will help us to throw responsibility for routing user on defined routes at client broswer.

- Create a new file inside `public` folder of your project and name it "_redirects"
- Add the following line to enable rewrite rule:

/*    /index.html   200

- Now again do `npm run build`, then drag and drop build folder to netlify site.
- Try to visit generated URL again with route `/login`

**2. Deploy the app from a GitHub Repository**
In fact, This is better way of deploying applications on Netlify.

Whenever you push any changes to the GitHub repository, it will automatically be deployed to Netlify. You can also see all deployed versions and easily roll back to any previously working version of code with just a single click.

- Link your github to your netlify account.
- Configure the Netlify app on GitHub button at the bottom of the page.
- Give netlify a permission towards a repo.
- Next, setup configuration of publishing the repo like (branch, command to build, etc.), after that deploy the app and waiting for generated URL.

Deploying in progress:

Now again, we will face 404 error, just fix the issue with _redirects file. then commit and push your changes, netlify automatically will be notified and ruild your app again and deploy it.
you can see log in netlify deploy log area.