@salesgenterp/ui-components 0.4.35 → 0.4.37

package/dist/index.modern.js

@@ -1,6 +1,6 @@
 import { Stack, Tooltip, TableCell, TableContainer, TableRow, Checkbox, Grid, TextField, InputAdornment, MenuItem, CircularProgress, Table as Table$1, TableBody as TableBody$1, Stepper, Step, StepLabel, StepContent } from '@mui/material';
 import React__default, { useState, useEffect, createElement } from 'react';
-import { GrClose, GrRadialSelected } from 'react-icons/gr';
+import { GrClose } from 'react-icons/gr';
 import 'react-icons/gi';
 import { BsCartX, BsCreditCard } from 'react-icons/bs';
 import styled from 'styled-components';
@@ -13,9 +13,9 @@ import TableBody from '@mui/material/TableBody';
 import TableHead from '@mui/material/TableHead';
 import TableRow$1 from '@mui/material/TableRow';
 import TableSortLabel from '@mui/material/TableSortLabel';
-import { BiArrowBack, BiNotepad, BiLockAlt, BiWallet } from 'react-icons/bi';
+import { BiArrowBack, BiLockAlt, BiWallet, BiNotepad } from 'react-icons/bi';
 import { CgProfile } from 'react-icons/cg';
-import { MdOutlineCircle, MdOutlineDateRange, MdOutlineStickyNote2 } from 'react-icons/md';
+import { MdOutlineDateRange, MdOutlineStickyNote2 } from 'react-icons/md';
 import { Controller, useForm } from 'react-hook-form';
 import { HiOutlineChevronDown } from 'react-icons/hi';
 import { FiTruck } from 'react-icons/fi';
@@ -1832,7 +1832,8 @@ var CartSummary = function CartSummary(_ref) {
       clickRedirect = _ref.clickRedirect,
       subtotal = _ref.subtotal,
       styles = _ref.styles,
-      totalCartPrice = _ref.totalCartPrice;
+      totalCartPrice = _ref.totalCartPrice,
+      loading = _ref.loading;
   var cartSummary = styles.cartSummary,
       Btn = styles.Btn;
   return /*#__PURE__*/React__default.createElement(CartSummaryContainer, {
@@ -1955,15 +1956,15 @@ var CartPageComponent = function CartPageComponent(_ref) {
 };
 
 var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5;
-var CheckoutPageContainer = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  background-color: ", ";\n\n  margin: 0 auto;\n  padding: 3.5em 3.5em 2.5em 4.5em;\n  padding-left: min(4.5em, 2.5vw);\n  font-family: 'karla-fonts';\n  color: rgba(50, 50, 50, 1);\n  max-height: 90vh;\n  overflow: hidden;\n  border-radius: 28px;\n  @media only screen and (max-width: 1488px) {\n    flex-direction: column;\n    align-items: center;\n    max-height: max-content;\n  }\n  @media only screen and (max-width: 788px) {\n    padding: 0.5em;\n  }\n  .icon {\n    font-size: 12px;\n  }\n"])), function (props) {
+var CheckoutPageContainer = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  background-color: ", ";\n  margin: 0 auto;\n  padding: 3.5em 3.5em 2.5em 4.5em;\n  padding-left: min(4.5em, 2.5vw);\n  font-family: 'karla-fonts';\n  color: rgba(50, 50, 50, 1);\n  max-height: 90vh;\n  overflow: hidden;\n  background: gainsboro;\n  border-radius: 28px;\n  @media only screen and (max-width: 1488px) {\n    flex-direction: column;\n    align-items: center;\n    max-height: max-content;\n  }\n  @media only screen and (max-width: 788px) {\n    padding: 0.5em;\n  }\n  .icon {\n    font-size: 12px;\n  }\n"])), function (props) {
   return props.maxWidth || '1605px';
 }, function (props) {
   return props.bg || 'rgba(255, 248, 246, 1)';
 });
 var Row = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n"])));
 var CheckoutMain = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 1008px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  margin-right: 2em;\n  max-height: 80vh;\n  padding-right: 2em;\n  overflow-y: auto;\n  /* width */\n  ::-webkit-scrollbar {\n    width: 10px;\n    background: rgba(245, 197, 189, 0.5);\n    border-radius: 16px;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: rgba(245, 197, 189, 0.5);\n    border-radius: 16px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: #ef9687;\n    border-radius: 16px;\n    border: 3px solid rgba(245, 197, 189, 0.5);\n    /* border: 3px solid black; */\n  }\n  @media only screen and (max-width: 1488px) {\n    margin-bottom: 3em;\n    min-height: max-content;\n    max-height: max-content;\n    margin-right: 0;\n    overflow: visible;\n  }\n  @media only screen and (max-width: 788px) {\n    max-width: 100vw;\n    padding-right: 0;\n  }\n  /* overflow: hidden; */\n"])));
-var CheckoutHeader = styled(Row)(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  justify-content: space-around;\n  padding: 2em;\n  padding-right: 4em;\n  max-width: 57.43em;\n  width: 98%;\n  background: #ffffff;\n  border-radius: 20px;\n  margin-bottom: 2em;\n  margin-right: 0.35em;\n  .row {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    text-transform: capitalize;\n    .icon {\n      font-size: 14px;\n      font-weight: 400;\n      display: grid;\n      place-items: center;\n      margin-right: 6px;\n      color: inherit;\n    }\n    p {\n      font-size: 14px;\n    }\n  }\n  @media only screen and (max-width: 788px) {\n    width: 100%;\n    padding: 2em 0.5em;\n    .row {\n      p {\n        font-size: 12px;\n      }\n      span {\n        display: none;\n      }\n    }\n  }\n"])));
-var CheckoutStepIcon = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  font-size: 5px;\n  display: grid;\n  place-items: center;\n  margin: auto;\n  padding: 0;\n  .ic {\n    font-size: 12px;\n  }\n"])));
+var CheckoutHeader = styled(Row)(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  justify-content: space-around;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  min-height: 4.1875em;\n  max-height: 4.1875em;\n  max-width: 57.43em;\n  width: 98%;\n  background: #ffffff;\n  border-radius: 20px;\n  margin-bottom: 2em;\n  margin-right: 0.35em;\n  color: #7d7b7b;\n  padding: 0 2em;\n  .row {\n    display: flex;\n    color: inherit;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    text-transform: capitalize;\n    margin-right: 2.2%;\n    .icon {\n      font-size: 14px;\n      font-weight: 400;\n      display: grid;\n      place-items: center;\n      margin-right: 6px;\n      color: inherit;\n    }\n    p,\n    span {\n      font-size: 0.95em;\n      color: inherit;\n      font-weight: 300;\n    }\n    .checked {\n      color: #323232;\n      .icon {\n        color: rgba(36, 153, 55, 1);\n      }\n    }\n  }\n  @media only screen and (max-width: 788px) {\n    width: 100%;\n    padding: 2em 0.5em;\n    .row {\n      p {\n        font-size: 12px;\n      }\n      span {\n        display: none;\n      }\n    }\n  }\n"])));
+var CheckoutStepIcon = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  font-size: 5px;\n  display: grid;\n  place-items: center;\n  margin: auto;\n  padding: 0;\n  .circle {\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    font-size: 5px;\n    display: grid;\n    place-items: center;\n    margin: auto;\n    padding: 0;\n  }\n  .ic {\n    font-size: 8px;\n  }\n"])));
 
 var _templateObject$7, _templateObject2$7, _templateObject3$7;
 var CheckoutSummaryContainer = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n\n  border-radius: 20px;\n  padding: max(1.5em, 30px);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  max-width: 422px;\n  min-width: min(412px, 95%);\n  font-size: 16px;\n"])), function (props) {
@@ -2016,10 +2017,10 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
   }))));
 };
 
-var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 var StepContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  min-width: 57.43em;\n  max-width: 57.43em;\n  background: white;\n  padding: 1em 2em;\n  background: #ffffff;\n  border-radius: 20px;\n  margin-left: 2em;\n  margin-top: -2em;\n  margin-bottom: 1em;\n  @media screen and (max-width: 1305px) {\n    width: 80vw;\n    min-width: 0;\n  }\n  @media screen and (max-width: 768px) {\n    width: 96%;\n    margin-left: 1em;\n    padding: 0.8em;\n  }\n"])));
-var StepsContent = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  padding-left: 2.5em;\n\n  min-height: max-content;\n  .bold {\n    text-transform: uppercase;\n    word-spacing: 5px;\n    margin-top: 1em;\n    span {\n      font-weight: 700;\n      cursor: pointer;\n    }\n    .red {\n      color: red;\n    }\n  }\n  @media screen and (max-width: 768px) {\n    padding: 0;\n    width: 100%;\n  }\n"])));
-var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  font-family: 'karla-fonts';\n  color: #323232;\n  padding: ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n  /* color: grey; */\n  border-bottom: 1px solid #fff0ec;\n  background: #ffffff;\n  border-radius: 20px;\n  max-width: 919px;\n  h5 {\n    font-size: 16px;\n    font-weight: 700;\n    text-transform: capitalize;\n  }\n  .icon {\n    font-size: 1.3em;\n    margin-right: 8px;\n  }\n  .dropIcon {\n    font-size: 1.4em;\n    cursor: pointer;\n    transform: rotate(-90deg);\n    transition: 0.3s;\n    color: rgba(50, 50, 50, 0.75);\n  }\n  @media screen and (max-width: 768px) {\n    max-width: 97%;\n    margin-left: 1em;\n    padding-right: 1em;\n    h5 {\n      font-size: 12px;\n    }\n\n    /* padding: 1.5em 2em; */\n  }\n"])), function (props) {
+var StepsContent = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  padding-left: 1.565em;\n  min-height: max-content;\n  p {\n    font-size: 0.75em;\n  }\n  .bold {\n    text-transform: uppercase;\n    word-spacing: 5px;\n    margin-top: 0.95em;\n    span {\n      font-weight: 600;\n      cursor: pointer;\n      font-size: 0.94rem;\n    }\n    .red {\n      color: red;\n    }\n  }\n  @media screen and (max-width: 768px) {\n    padding: 0;\n    width: 100%;\n  }\n"])));
+var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  font-family: 'karla-fonts';\n  color: #323232;\n  /* padding: ", "; */\n  margin-bottom: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n  /* color: grey; */\n  border-bottom: 1px solid #fff0ec;\n  background: #ffffff;\n  border-radius: 20px;\n  max-width: 919px;\n  min-height: 4.35em;\n  max-height: 4.35em;\n  padding: ", ";\n  h5 {\n    font-size: 16px;\n    font-weight: 600;\n    text-transform: capitalize;\n    margin-left: 0.6em;\n  }\n  .icon {\n    font-size: 1.3em;\n    margin-right: 8px;\n  }\n  .dropIcon {\n    font-size: 1.4em;\n    cursor: pointer;\n    transform: rotate(-90deg);\n    transition: 0.3s;\n    color: rgba(50, 50, 50, 0.75);\n  }\n  @media screen and (max-width: 768px) {\n    max-width: 97%;\n    margin-left: 1em;\n    padding-right: 1em;\n    h5 {\n      font-size: 12px;\n    }\n  }\n"])), function (props) {
   return props.single ? '1.8em 2em' : '1em 0';
 }, function (props) {
   return props.single ? '-1.56em' : '1em';
@@ -2027,10 +2028,14 @@ var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8
   return props.single ? '-1.56em' : '0';
 }, function (props) {
   return props.single ? '1.5em' : '0';
+}, function (props) {
+  return props.single ? '0 2em' : '0';
 });
-var TextFeildContainer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n  && {\n    input {\n      font-size: 0.975em !important;\n      height: 28px;\n      &::placeholder {\n        font-size: 0.975em !important;\n      }\n    }\n    .icon {\n      color: black;\n      font-size: 1em;\n    }\n  }\n"])));
-var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  padding: ", ";\n  background: ", ";\n  display: grid;\n  place-items: center;\n  color: white;\n  margin: 0 1em;\n  text-transform: ", ";\n  transition: 0.4s;\n  cursor: ", ";\n  &:hover,\n  &:focus {\n    opacity: 0.7;\n  }\n"])), function (props) {
-  return props.padding || '.4em 1.6em';
+var TextFeildContainer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n  && {\n    input {\n      font-size: 0.75em !important;\n      height: 24px;\n      color: rgba(107, 106, 106, 1);\n      &::placeholder {\n        font-size: 0.975em !important;\n      }\n    }\n    .icon {\n      color: black;\n      font-size: 1em;\n    }\n  }\n"])));
+var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  width: ", ";\n  height: ", ";\n\n  background: ", ";\n  display: grid;\n  place-items: center;\n  color: white;\n  margin: 0 1em;\n  font-weight: 500;\n  letter-spacing: 1px;\n  text-transform: ", ";\n  transition: 0.4s;\n  cursor: ", ";\n  &:hover,\n  &:focus {\n    opacity: 0.7;\n  }\n"])), function (props) {
+  return props.width || '8.05em';
+}, function (props) {
+  return props.height || '2.25em';
 }, function (props) {
   return props.color || '#FD0015';
 }, function (props) {
@@ -2038,21 +2043,26 @@ var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
 });
-var ButtonRowContainer = styled.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n\n  .back {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    font-size: 0.812em;\n    font-weight: 500;\n    justify-content: flex-start;\n    font-size: 0.8em;\n    cursor: ", ";\n    transition: 0.4s;\n    .icon {\n      font-size: 1.2em;\n      margin-right: 2px;\n    }\n    &:hover,\n    &:focus {\n      letter-spacing: 1px;\n      outline: none;\n    }\n  }\n"])), function (props) {
+var SaveButton = styled.button(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  font-size: 0.8125em;\n  text-transform: uppercase;\n  font-weight: 600;\n  border-radius: 7px;\n  padding: 0.55em 1em;\n  background: ", ";\n  display: grid;\n  place-items: center;\n  color: white;\n  margin: 1em 0;\n  letter-spacing: 1px;\n  transition: 0.4s;\n  cursor: ", ";\n  &:hover,\n  &:focus {\n    opacity: 0.7;\n  }\n"])), function (props) {
+  return props.color || '#FD0015';
+}, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
 });
-var CheckBoxRow = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  padding: ", ";\n  p {\n    font-size: 0.85em;\n  }\n  button {\n    border: none;\n    padding: 0.8em 3em;\n    background: rgba(253, 0, 21, 1);\n    color: white;\n    text-transform: uppercase;\n    font-weight: 700;\n    margin: 1em;\n    margin-top: 2em;\n    transition: 0.4s;\n    cursor: pointer;\n    font-family: 'karla-fonts';\n    &:hover {\n      padding: 0.7em 2.7em;\n    }\n  }\n  .back {\n    background-color: rgba(107, 106, 106, 1);\n    padding: 0.8em 2em;\n    &:hover {\n      padding: 0.8em 2.4em;\n    }\n  }\n"])), function (props) {
+var ButtonRowContainer = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n\n  .back {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    font-size: 0.812em;\n    font-weight: 500;\n    justify-content: flex-start;\n    font-size: 0.8em;\n    cursor: ", ";\n    transition: 0.4s;\n    .icon {\n      font-size: 1.2em;\n      margin-right: 2px;\n    }\n    &:hover,\n    &:focus {\n      letter-spacing: 1px;\n      outline: none;\n    }\n  }\n"])), function (props) {
+  return props.disabled ? 'not-allowed' : 'pointer';
+});
+var CheckBoxRow = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  padding: ", ";\n  p {\n    font-size: 0.85em;\n  }\n  button {\n    border: none;\n    padding: 0.8em 3em;\n    background: rgba(253, 0, 21, 1);\n    color: white;\n    text-transform: uppercase;\n    font-weight: 600;\n    margin: 1em;\n    margin-top: 2em;\n    transition: 0.4s;\n    cursor: pointer;\n    font-family: 'karla-fonts';\n    &:hover {\n      padding: 0.7em 2.7em;\n    }\n  }\n  .back {\n    background-color: rgba(107, 106, 106, 1);\n    padding: 0.8em 2em;\n    &:hover {\n      padding: 0.8em 2.4em;\n    }\n  }\n"])), function (props) {
   return props.padding;
 });
-var DeliveryCard = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: #fd0015;\n  color: white;\n  height: 34px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5em 1em;\n  margin-right: 1em;\n  margin-bottom: 1em;\n  /* padding: 1em 0.4em; */\n  cursor: pointer;\n  img {\n    width: 38px;\n    height: 17px;\n    margin-bottom: -5px;\n    margin-right: 4px;\n  }\n  p {\n    font-size: 10px;\n  }\n  .circle {\n    width: 10px;\n    height: 10px;\n    border-radius: 1px solid black;\n    background-color: white;\n    display: grid;\n    place-items: center;\n    border-radius: 50%;\n    margin-left: auto;\n    margin-left: 5px;\n    .smallCircle {\n      width: 4px;\n      height: 4px;\n      background: black;\n      border-radius: 50%;\n    }\n  }\n"])));
-var CreditCard = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  width: 70px;\n  min-height: 48px;\n  max-height: 50px;\n  background-color: white;\n  border: 3px solid rgba(217, 217, 217, 0.1);\n  display: grid;\n  place-items: center;\n  margin: auto;\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: 5px;\n  transition: 0.1s;\n  border: 1px solid transparent;\n  text-align: center;\n  p {\n    font-size: 10px;\n  }\n  &:hover,\n  &:focus {\n    border: 1px solid black;\n  }\n"])));
-var StyledTableRow = styled(TableRow)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  && {\n    box-shadow: none;\n    border: none;\n    background-color: ", ";\n    p {\n      font-size: 0.9em;\n      font-family: 'karla-fonts';\n    }\n    .max {\n      min-width: max-content;\n    }\n    .red {\n      color: red;\n      font-weight: inherit;\n    }\n    .price {\n      font-weight: 700;\n    }\n    @media only screen and (max-width: 640px) {\n      p {\n        font-size: 12px;\n      }\n      .sm {\n        font-size: 8px;\n      }\n      .price,\n      .red {\n        font-size: 10px;\n      }\n      .total {\n        font-size: 14px;\n      }\n    }\n  }\n"])), function (props) {
+var DeliveryCard = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: #fd0015;\n  color: white;\n  height: 34px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5em 1em;\n  margin-right: 1em;\n  margin-bottom: 1em;\n  /* padding: 1em 0.4em; */\n  cursor: pointer;\n  img {\n    width: 38px;\n    height: 17px;\n    margin-bottom: -5px;\n    margin-right: 4px;\n  }\n  p {\n    font-size: 10px;\n  }\n  .circle {\n    width: 10px;\n    height: 10px;\n    border-radius: 1px solid black;\n    background-color: white;\n    display: grid;\n    place-items: center;\n    border-radius: 50%;\n    margin-left: auto;\n    margin-left: 5px;\n    .smallCircle {\n      width: 4px;\n      height: 4px;\n      background: black;\n      border-radius: 50%;\n    }\n  }\n"])));
+var CreditCard = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  width: 70px;\n  min-height: 48px;\n  max-height: 50px;\n  background-color: white;\n  border: 3px solid rgba(217, 217, 217, 0.1);\n  display: grid;\n  place-items: center;\n  margin: auto;\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: 5px;\n  transition: 0.1s;\n  border: 1px solid transparent;\n  text-align: center;\n  p {\n    font-size: 10px;\n  }\n  &:hover,\n  &:focus {\n    border: 1px solid black;\n  }\n"])));
+var StyledTableRow = styled(TableRow)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  && {\n    box-shadow: none;\n    border: none;\n    background-color: ", ";\n    p {\n      font-size: 0.9em;\n      font-family: 'karla-fonts';\n    }\n    .max {\n      min-width: max-content;\n    }\n    .red {\n      color: red;\n      font-weight: inherit;\n    }\n    .price {\n      font-weight: 600;\n    }\n    @media only screen and (max-width: 640px) {\n      p {\n        font-size: 12px;\n      }\n      .sm {\n        font-size: 8px;\n      }\n      .price,\n      .red {\n        font-size: 10px;\n      }\n      .total {\n        font-size: 14px;\n      }\n    }\n  }\n"])), function (props) {
   return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
 });
-var StyledTableCell = styled(TableCell)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  && {\n    border: none;\n    font-size: 1em;\n    .noAboveSm {\n      display: none;\n    }\n    @media only screen and (max-width: 748px) {\n      display: ", ";\n      padding: 0.5em 0.3em;\n      .noAboveSm {\n        display: inline-block;\n        margin-right: 6px;\n      }\n    }\n  }\n"])), function (props) {
+var StyledTableCell = styled(TableCell)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  && {\n    border: none;\n    font-size: 1em;\n    .noAboveSm {\n      display: none;\n    }\n    @media only screen and (max-width: 748px) {\n      display: ", ";\n      padding: 0.5em 0.3em;\n      .noAboveSm {\n        display: inline-block;\n        margin-right: 6px;\n      }\n    }\n  }\n"])), function (props) {
   return props.noSmall ? 'none' : '';
 });
-var BottomGrid = styled(Grid)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  .bold {\n    font-weight: 700;\n    text-transform: capitalize;\n    margin: 1em 0;\n    font-size: 1em;\n  }\n  .icon {\n    font-size: 1.6em;\n    color: rgba(253, 0, 21, 1);\n  }\n  textarea {\n    width: 100%;\n    resize: none;\n    background: #fff8f6;\n    border: 1px solid rgba(253, 0, 21, 0.5);\n    border-radius: 4px;\n    margin-bottom: 2em;\n    padding: 1em;\n  }\n  p {\n    font-size: 12px;\n    .ul {\n      text-decoration: underline;\n      font-size: inherit;\n    }\n  }\n  .bottom {\n    margin-left: 3em;\n    font-style: italic;\n    span {\n      font-weight: 700;\n      color: rgba(253, 0, 21, 1);\n\n      cursor: pointer;\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"])));
+var BottomGrid = styled(Grid)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  .bold {\n    font-weight: 600;\n    text-transform: capitalize;\n    margin: 1em 0;\n    font-size: 1em;\n  }\n  .icon {\n    font-size: 1.6em;\n    color: rgba(253, 0, 21, 1);\n  }\n  textarea {\n    width: 100%;\n    resize: none;\n    background: #fff8f6;\n    border: 1px solid rgba(253, 0, 21, 0.5);\n    border-radius: 4px;\n    margin-bottom: 2em;\n    padding: 1em;\n  }\n  p {\n    font-size: 12px;\n    .ul {\n      text-decoration: underline;\n      font-size: inherit;\n    }\n  }\n  .bottom {\n    margin-left: 3em;\n    font-style: italic;\n    span {\n      font-weight: 600;\n      color: rgba(253, 0, 21, 1);\n\n      cursor: pointer;\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"])));
 
 var CheckoutInput = function CheckoutInput(_ref) {
   var controlls = _ref.controlls;
@@ -2119,39 +2129,14 @@ var CheckoutSelect = function CheckoutSelect(_ref3) {
   }));
 };
 
-var ButtonRow = function ButtonRow(_ref) {
-  var handleBack = _ref.handleBack,
-      handleNext = _ref.handleNext,
-      backDisabled = _ref.backDisabled,
-      nextDisabled = _ref.nextDisabled;
-  return /*#__PURE__*/React__default.createElement(ButtonRowContainer, {
-    disabled: backDisabled
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "back",
-    tabIndex: "1",
-    onClick: function onClick() {
-      if (backDisabled) return;
-      handleBack();
-    }
-  }, /*#__PURE__*/React__default.createElement(BiArrowBack, {
-    className: "icon"
-  }), "Back"), /*#__PURE__*/React__default.createElement(CommonCheckoutBtn, {
-    disabled: nextDisabled,
-    tabIndex: "1",
-    onClick: function onClick() {
-      if (nextDisabled) return;
-      handleNext();
-    }
-  }, "Next"));
-};
-
 var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
   var text = _ref.text,
       username = _ref.username,
-      Icon = _ref.Icon,
+      icon = _ref.icon,
       single = _ref.single,
       closed = _ref.closed,
       handleClick = _ref.handleClick;
+  console.log("/images/checkout/vector-" + icon + ".svg");
   return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
     single: single
   }, /*#__PURE__*/React__default.createElement(Stack, {
@@ -2159,10 +2144,17 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
     flexDirection: "row",
     sx: {
       width: '100%'
-    }
+    },
+    alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Stack, {
-    flexDirection: "row"
-  }, Icon(), /*#__PURE__*/React__default.createElement("h5", null, text, " ", username && "" + username)), /*#__PURE__*/React__default.createElement(HiOutlineChevronDown, {
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: "/images/checkout/vector-" + icon + ".svg",
+    alt: "vector",
+    width: 18,
+    height: 18
+  }), /*#__PURE__*/React__default.createElement("h5", null, text, " ", username && "" + username)), /*#__PURE__*/React__default.createElement(HiOutlineChevronDown, {
     className: "dropIcon",
     style: closed ? {
       transform: 'rotate(-90deg)'
@@ -2179,8 +2171,6 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
 var Step0 = function Step0(_ref) {
   var loading = _ref.loading,
       userName = _ref.userName,
-      handleBack = _ref.handleBack,
-      handleNext = _ref.handleNext,
       handleLogin = _ref.handleLogin;
 
   var _useForm = useForm(),
@@ -2191,17 +2181,10 @@ var Step0 = function Step0(_ref) {
     handleLogin(data);
   };
 
-  function Icon() {
-    return /*#__PURE__*/React__default.createElement(CgProfile, {
-      className: "icon"
-    });
-  }
-
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'welcome',
     username: userName,
-    Icon: Icon,
-    step: 0
+    icon: 1
   }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement("p", null, "Please choose how you want to proceed"), /*#__PURE__*/React__default.createElement("p", {
     className: "bold"
   }, /*#__PURE__*/React__default.createElement("span", null, "register"), " | ", /*#__PURE__*/React__default.createElement("span", {
@@ -2216,7 +2199,7 @@ var Step0 = function Step0(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    sm: 8,
+    sm: 6.5,
     xs: 12
   }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
@@ -2228,7 +2211,7 @@ var Step0 = function Step0(_ref) {
     }
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    sm: 8,
+    sm: 6.5,
     xs: 12
   }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
@@ -2254,106 +2237,285 @@ var Step0 = function Step0(_ref) {
   }, loading ? /*#__PURE__*/React__default.createElement(CircularProgress, {
     color: "inherit",
     size: 15
-  }) : 'Login'))), /*#__PURE__*/React__default.createElement(ButtonRow, {
-    handleBack: handleBack,
-    handleNext: handleNext,
-    backDisabled: true,
-    nextDisabled: !userName
-  })));
+  }) : 'Login')))));
 };
 
-var Step1 = function Step1(_ref) {
-  var _Object$keys2;
-
+var ButtonRow = function ButtonRow(_ref) {
   var handleBack = _ref.handleBack,
-      _handleNext = _ref.handleNext,
-      setShipping = _ref.setShipping,
-      setBillingAddress = _ref.setBillingAddress,
+      handleNext = _ref.handleNext,
+      backDisabled = _ref.backDisabled,
+      nextDisabled = _ref.nextDisabled;
+  return /*#__PURE__*/React__default.createElement(ButtonRowContainer, {
+    disabled: backDisabled
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "back",
+    tabIndex: "1",
+    onClick: function onClick() {
+      if (backDisabled) return;
+      handleBack();
+    }
+  }, /*#__PURE__*/React__default.createElement(BiArrowBack, {
+    className: "icon"
+  }), "Back"), /*#__PURE__*/React__default.createElement(CommonCheckoutBtn, {
+    disabled: nextDisabled,
+    tabIndex: "1",
+    onClick: function onClick() {
+      if (nextDisabled) return;
+      handleNext();
+    }
+  }, "Next"));
+};
+
+var StoreForm = function StoreForm(_ref) {
+  var control = _ref.control,
+      _onSubmit = _ref.onSubmit,
+      handleSubmit = _ref.handleSubmit;
+  return /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    columnSpacing: 1,
+    component: "form",
+    rowSpacing: 1,
+    paddingY: 4,
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      handleSubmit(_onSubmit)(e);
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 10
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'storeName',
+      placeholder: 'Store Name',
+      control: control
+    }
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 6,
+    sm: 3.33
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'taxNumber',
+      placeholder: 'Tax number',
+      control: control,
+      type: 'number'
+    }
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 6,
+    sm: 3.33
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'Mobile',
+      placeholder: 'Mobile',
+      control: control,
+      type: 'number'
+    }
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 6,
+    sm: 3.33
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'email',
+      placeholder: 'Email',
+      control: control
+    }
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 10
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'description',
+      placeholder: 'Description',
+      control: control,
+      rows: '4'
+    }
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 4
+  }, /*#__PURE__*/React__default.createElement(SaveButton, null, "save store")));
+};
+
+var AddressForm = function AddressForm(_ref) {
+  var control = _ref.control,
+      countries = _ref.countries,
+      _onSubmit = _ref.onSubmit,
+      handleSubmit = _ref.handleSubmit;
+  return /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    rowSpacing: 2,
+    columnSpacing: 2,
+    paddingY: 2,
+    component: "form",
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      handleSubmit(_onSubmit)(e);
+    },
+    sx: {
+      paddingBottom: '1em'
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 10
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'fullAddress',
+      placeholder: 'Full Address*',
+      control: control
+    }
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 3.34
+  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
+    controlls: {
+      name: 'country',
+      placeholder: 'Country',
+      control: control,
+      List: countries,
+      key: 'name'
+    }
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 6,
+    sm: 3.33
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'state',
+      placeholder: 'State/Province*',
+      control: control
+    }
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 3.34
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'city',
+      placeholder: 'City*',
+      control: control
+    }
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 3.34
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'zip',
+      placeholder: 'Zip/Postal Code*',
+      control: control
+    }
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 3.34
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'mobile',
+      placeholder: 'Mobile*',
+      control: control,
+      type: 'number'
+    }
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 8,
+    sm: 8
+  }, /*#__PURE__*/React__default.createElement(SaveButton, {
+    type: "submit"
+  }, "save address")));
+};
+
+var Step1 = function Step1(_ref) {
+  var addStore = _ref.addStore,
+      addStoreAddress = _ref.addStoreAddress,
       stores = _ref.stores,
-      addresses = _ref.addresses;
+      addresses = _ref.addresses,
+      countries = _ref.countries;
 
   var _useForm = useForm(),
       control = _useForm.control,
-      dirtyFields = _useForm.formState.dirtyFields,
-      getValues = _useForm.getValues;
+      watch = _useForm.watch,
+      resetField = _useForm.resetField,
+      handleSubmit = _useForm.handleSubmit;
 
-  var _React$useState = React__default.useState(false),
-      setAddress = _React$useState[0],
-      setSetAddress = _React$useState[1];
+  var _useForm2 = useForm(),
+      addressControl = _useForm2.control,
+      watchAddress = _useForm2.watch,
+      resetAddress = _useForm2.resetField,
+      handleSubmitAddress = _useForm2.handleSubmit;
+
+  var StoresList = [].concat(stores, [{
+    storeName: 'add Store',
+    id: 99999999
+  }]);
+  var selectedStore = watch('store');
+  var selectedAddress = watchAddress('billingAddress');
+  var addressList = [].concat(addresses, [{
+    name: 'add billing Address',
+    id: 99999999
+  }]);
 
-  function Icon() {
-    return /*#__PURE__*/React__default.createElement(BiNotepad, {
-      className: "icon"
-    });
-  }
+  var onSubmit = function onSubmit(data) {
+    console.log(data);
+    addStore(data);
+    resetField('store');
+  };
+
+  var addAddress = function addAddress(data) {
+    console.log(data);
+    addStoreAddress(data);
+    resetAddress('billingAddress');
+  };
 
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'billing information',
-    Icon: Icon
+    icon: 2
   }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     rowSpacing: 2,
-    sx: {
-      paddingTop: '1em'
-    }
+    columnSpacing: 1
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
-    md: 10
+    sm: 10
   }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
     controlls: {
       name: 'store',
       placeholder: 'Please Select your store',
       control: control,
-      List: stores,
+      List: StoresList,
       key: 'storeName'
     }
-  })), /*#__PURE__*/React__default.createElement(Grid, {
+  }))), selectedStore === 99999999 && /*#__PURE__*/React__default.createElement(StoreForm, {
+    control: control,
+    onSubmit: onSubmit,
+    handleSubmit: handleSubmit
+  }), /*#__PURE__*/React__default.createElement(Grid, {
+    container: true
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
-    md: 10
+    sm: 10,
+    sx: {
+      padding: '1em 0'
+    }
   }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
     controlls: {
       name: 'billingAddress',
       placeholder: 'Select a billing address from your address book ',
-      control: control,
-      List: addresses,
+      control: addressControl,
+      List: addressList,
       key: 'name'
     }
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React__default.createElement(CheckBoxRow, {
-    onClick: function onClick() {
-      setSetAddress(false);
-    }
-  }, /*#__PURE__*/React__default.createElement(Checkbox, {
-    checked: !setAddress,
-    icon: /*#__PURE__*/React__default.createElement(MdOutlineCircle, null),
-    checkedIcon: /*#__PURE__*/React__default.createElement(GrRadialSelected, null)
-  }), /*#__PURE__*/React__default.createElement("p", null, "Ship to this address"))), /*#__PURE__*/React__default.createElement(CheckBoxRow, {
-    padding: '0 0 1em 0',
-    onClick: function onClick() {
-      setSetAddress(true);
-    }
-  }, /*#__PURE__*/React__default.createElement(Checkbox, {
-    checked: setAddress,
-    icon: /*#__PURE__*/React__default.createElement(MdOutlineCircle, null),
-    checkedIcon: /*#__PURE__*/React__default.createElement(GrRadialSelected, null)
-  }), /*#__PURE__*/React__default.createElement("p", null, "Ship to a different address "))), /*#__PURE__*/React__default.createElement(ButtonRow, {
-    handleBack: handleBack,
-    handleNext: function handleNext() {
-      var _Object$keys;
-
-      if (((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) === 2) {
-        console.log(setAddress, getValues());
-        setShipping(setAddress);
-        setBillingAddress(getValues());
-
-        _handleNext();
-      }
-    },
-    nextDisabled: ((_Object$keys2 = Object.keys(dirtyFields)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.length) !== 2
+  }))), selectedAddress === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
+    control: addressControl,
+    handleSubmit: handleSubmitAddress,
+    onSubmit: addAddress,
+    countries: countries
   })));
 };
 
@@ -2385,57 +2547,22 @@ var Step2 = function Step2(_ref) {
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'shipping information',
     Icon: Icon
-  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    rowSpacing: 2,
-    columnSpacing: 2,
-    sx: {
-      paddingBottom: '1em'
-    }
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12,
-    md: 10
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(AddressForm, {
+    countries: countries,
+    control: control
+  }), ' ', /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
-      name: 'fullAddress',
-      placeholder: 'Full Address*',
+      name: 'city',
+      placeholder: 'City*',
       control: control
     }
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 6,
-    md: 3.33
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'zipCode',
-      placeholder: 'Zip/Postal Code*',
-      control: control,
-      type: 'number'
-    }
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 6,
-    md: 3.33
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+  }), ' ', /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'city',
       placeholder: 'City*',
       control: control
     }
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12,
-    md: 3.34
-  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
-    controlls: {
-      name: 'country',
-      placeholder: 'Country',
-      control: control,
-      List: countries,
-      key: 'name'
-    }
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
+  }), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     columnSpacing: 0.5,
     rowSpacing: 2,
@@ -2840,7 +2967,7 @@ var Step4 = function Step4(_ref) {
 };
 
 var steps = [{
-  text: 'welcome',
+  text: 'Personal Information',
   Icon: function Icon() {
     return /*#__PURE__*/React__default.createElement(CgProfile, {
       className: "icon"
@@ -2884,6 +3011,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       handleLogin = _ref.handleLogin,
       setShipping = _ref.setShipping,
       userName = _ref.userName,
+      addStore = _ref.addStore,
+      addStoreAddress = _ref.addStoreAddress,
       setBillingAddress = _ref.setBillingAddress,
       setShippingAddress = _ref.setShippingAddress,
       setShippingMethod = _ref.setShippingMethod,
@@ -2908,12 +3037,9 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
   }, /*#__PURE__*/React__default.createElement(CheckoutMain, null, /*#__PURE__*/React__default.createElement(CheckoutHeader, null, steps.map(function (item, i) {
     var words = item.text.split(' ');
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "row"
+      className: currStep > i ? 'row checked' : 'row'
     }, /*#__PURE__*/React__default.createElement("span", {
-      className: "icon",
-      style: currStep > i ? {
-        color: 'rgba(36, 153, 55, 1)'
-      } : {}
+      className: "icon"
     }, /*#__PURE__*/React__default.createElement(AiOutlineCheckCircle, null)), ' ', /*#__PURE__*/React__default.createElement("p", null, words[0], " ", /*#__PURE__*/React__default.createElement("span", null, words[1])));
   })), /*#__PURE__*/React__default.createElement(Stepper, {
     activeStep: currStep,
@@ -2929,6 +3055,17 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
         padding: 0
       },
       icon: /*#__PURE__*/React__default.createElement(CheckoutStepIcon, {
+        style: currStep >= index ? {
+          background: '#ff717c',
+          color: 'white',
+          padding: 0
+        } : {
+          background: '#FAE8E5',
+          color: 'inherit',
+          padding: 0
+        }
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "circle",
         style: currStep >= index ? {
           background: 'rgba(253, 0, 21, 1)',
           color: 'white',
@@ -2940,13 +3077,14 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
         }
       }, /*#__PURE__*/React__default.createElement(AiOutlineCheck, {
         className: "ic"
-      }))
+      })))
     }, currStep !== index && /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
       text: item.text,
       Icon: item.Icon,
       single: true,
       username: index === 0 ? userName : '',
       closed: true,
+      icon: index + 1,
       handleClick: function handleClick() {
         if (currStep > index) {
           handleBack(index);
@@ -2974,7 +3112,10 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       setShipping: setShipping,
       setBillingAddress: setBillingAddress,
       stores: userStores,
-      addresses: userAddresses
+      addresses: userAddresses,
+      addStore: addStore,
+      countries: countries,
+      addStoreAddress: addStoreAddress
     })), index === 2 && /*#__PURE__*/React__default.createElement(StepContent, {
       sx: {
         padding: 0