diff --git a/src/components/PopUpJualSaham/PopUpJualSaham.css b/src/components/PopUpJualSaham/PopUpJualSaham.css
new file mode 100644
index 0000000000000000000000000000000000000000..d5c89176909be93e0f3518668f91c1d9b5568620
--- /dev/null
+++ b/src/components/PopUpJualSaham/PopUpJualSaham.css
@@ -0,0 +1,129 @@
+.modal {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ padding: 0px 20px;
+ font-family: 'DM Sans', sans-serif;
+ border-radius: 10px;
+ box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
+}
+
+.modal .modal-dialog {
+ max-width: 600px !important;
+}
+
+.modal-header {
+ font-size: 30px;
+ margin-top: 16px;
+ margin-bottom: -5px;
+ padding: 15px 30px;
+ font-family: 'DM Sans', sans-serif;
+ font-weight: 700;
+ border-bottom: 0 none;
+}
+
+#investasi {
+ color: #E94745;
+}
+
+button.close {
+ color: #fc383f;
+ font-size: 40px;
+}
+
+button.close:hover {
+ color: #FA595F;
+}
+
+.modal-body {
+ padding: 10px 30px;
+}
+
+.modal-body > form {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 3;
+}
+
+.modal-body > form > input {
+ width: 100%;
+ padding: 10px 15px;
+ border-radius: 5px;
+ border: 0.7px solid black;
+}
+
+.modal-body > form > label {
+ font-weight: 500;
+ font-size: 15px;
+ line-height: 10px;
+}
+
+#space {
+ padding: 10px;
+}
+
+input[type='checkbox'] {
+ height: 15px;
+ width: 15px;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+ border: 1px solid black;
+ border-radius: 4px;
+ outline: none;
+ transition-duration: 0.3s;
+}
+
+input[type='checkbox']:hover {
+ background-color: #d6e1e4;
+}
+
+input[type='checkbox']:checked:hover {
+ background-color: #0CB6D8;
+ border: 1px solid #0CB6D8;
+}
+
+input[type='checkbox']:checked {
+ background-color: #0DCAF0;
+ border: 1px solid #0DCAF0;
+}
+
+input[type='checkbox']:checked:after {
+ content: '✔';
+ font-size: 12px;
+ vertical-align: middle;
+ padding-top: 5px;
+ padding-left: 2px;
+ color: white;
+}
+
+#yakin {
+ padding-left: 10px;
+ display: inline-block;
+}
+
+#yakin > span {
+ padding-left: 10px;
+ font-weight: 300;
+ vertical-align: middle;
+}
+
+#yakin > input {
+ vertical-align: middle;
+}
+
+.modal-footer {
+ border-top: 0 none;
+ padding: 20px 30px;
+}
+
+.wkd-tosca-button {
+ background-color: #0DCAF0;
+ color: white;
+}
+
+.wkd-tosca-button:hover {
+ background-color: #0CB6D8;
+ color: white;
+}
\ No newline at end of file
diff --git a/src/components/PopUpJualSaham/PopUpJualSaham.js b/src/components/PopUpJualSaham/PopUpJualSaham.js
new file mode 100644
index 0000000000000000000000000000000000000000..3c24f03940e3c34aaab36ce4ce2e7945e38736be
--- /dev/null
+++ b/src/components/PopUpJualSaham/PopUpJualSaham.js
@@ -0,0 +1,78 @@
+import {Modal} from 'react-bootstrap';
+import React from 'react';
+import './PopUpJualSaham.css';
+
+export default class PopUpJualSaham extends React.Component {
+
+constructor(props) {
+ super(props);
+ this.state = {
+ open: false
+ }
+}
+openModal() {
+ this.setState({open: true});
+}
+
+closeModal() {
+ this.setState({open: false});
+}
+
+render(){
+ return (
+ <div>
+ <button className="wkd-nav-button wkd-tosca-button jual" onClick={this.openModal.bind(this)}>Jual Investasi</button>
+ {this.state.open?
+ <Modal show={this.state.open}
+ onHide={this.closeModal.bind(this)}
+ aria-labelledby="ModalHeader"
+ data-testid="popup"
+ centered
+ >
+ <Modal.Header closeButton>
+ <p>Jual <span id="investasi">Investasi</span></p>
+ </Modal.Header>
+ <Modal.Body>
+ <form id="form-jual">
+ <label>Jumlah Lot (minimal 1)</label>
+ <input
+ id="jumlah-lot"
+ name="jumlah-lot"
+ className="jumlah-lot"
+ type="number"
+ placeholder="Tuliskan jumlah lot yang ingin dijual..."
+ step="1"
+ min="1"
+ required
+ />
+ <div id="space"></div>
+ <label>Harga Saham (Rp)</label>
+ <input
+ id="harga-saham"
+ name="harga-saham"
+ className="harga-saham"
+ type="number"
+ placeholder="Tuliskan harga jual saham..."
+ step="1"
+ min="0"
+ required
+ />
+ <div id="space"></div>
+ <label id="yakin">
+ <input
+ id="persetujuan"
+ name="persetujuan"
+ type="checkbox"
+ required
+ /><span>Saya yakin untuk menjual kepemilikan saya pada pengadaan ini</span>
+ </label>
+ </form>
+ </Modal.Body>
+ <Modal.Footer>
+ <button type="submit" className='wkd-nav-button wkd-tosca-button'>Jual Saham</button>
+ </Modal.Footer>
+ </Modal> : ''}
+ </div>
+ )
+}
+}
diff --git a/src/components/PopUpJualSaham/PopUpJualSaham.test.js b/src/components/PopUpJualSaham/PopUpJualSaham.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..9272d919cc0d6e533bf83782ecad7d7a2661ab6a
--- /dev/null
+++ b/src/components/PopUpJualSaham/PopUpJualSaham.test.js
@@ -0,0 +1,21 @@
+import PopUpJualSaham from './PopUpJualSaham';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+
+describe('<PopUpJualSaham />', () => {
+ it('popup bisa dibuka dan ditutup', () => {
+ const { getByText, getByTestId } = render(<PopUpJualSaham />)
+
+ const btnPopUp = getByText("Jual Investasi");
+ userEvent.click(btnPopUp);
+
+ const popup = getByTestId("popup");
+ expect(popup).toBeInTheDocument();
+
+ const btnClosePopUp = getByText('×');
+ userEvent.click(btnClosePopUp);
+
+ expect(popup).not.toBeInTheDocument();
+ });
+})
diff --git a/src/page/DetailInvestasi/DetailInvestasi.js b/src/page/DetailInvestasi/DetailInvestasi.js
index da8a0ac835752893bf3c829d6cb16620b27dae73..1fa38d1c1908985d5c8cb17dc0c4dc0a5cdd1269 100644
--- a/src/page/DetailInvestasi/DetailInvestasi.js
+++ b/src/page/DetailInvestasi/DetailInvestasi.js
@@ -11,6 +11,7 @@ import { Line, Bar } from 'react-chartjs-2';
import emptyIcon from '../ListOwnedPengadaan/empty.svg';
import CardMainan from '../../components/CardMainan/CardMainan';
import WalkiddieOnboarding from '../../components/OnBoarding/WalkiddieOnboarding';
+import PopUpJualSaham from '../../components/PopUpJualSaham/PopUpJualSaham';
function statusReadable(status) {
if (status === 'RSK') {
@@ -365,7 +366,7 @@ const DetailInvestasi = ({ isAuthenticated, user, location }) => {
<p>Sedang dijual.</p>
<button className="wkd-nav-button wkd-dark-green-button" onClick={() => handleCancel()}>Batalkan Jual</button>
</>}
- {!sellmode && data.statusInvestasi !== "DJL" && <button id='btn-jual-inves' className="wkd-nav-button wkd-dark-green-button" onClick={() => setSellmode(true)}>Jual Investasi</button>}
+ {!sellmode && data.statusInvestasi !== "DJL" && <button id='btn-jual-inves' className="wkd-nav-button wkd-dark-green-button" onClick={() => setSellmode(true)}>Jual Investasi (Lama)</button>}
{sellmode && <>
<p>Yakin menjual kepemilikan di perusahaan ini?</p>
<br />
@@ -373,6 +374,7 @@ const DetailInvestasi = ({ isAuthenticated, user, location }) => {
<button id="m-i-buat" className="wkd-nav-button wkd-dark-green-button" onClick={() => handleSubmit()}>Jual Saham</button>
</>}
</div>
+ <PopUpJualSaham/>
</div>
);
}