implement refferal code

9 months ago · 885f408558
2 changed files with 168 additions and 66 deletions
--- a/src/views/SimproV2/Settings/DialogForm.js
+++ b/src/views/SimproV2/Settings/DialogForm.js
@ -26,6 +26,8 @@ const DialogForm = ({
    addressProp,
    emailProp,
    userNameProp,
+    refferalCode,
+    userProfile
 }) => {
    const token = window.localStorage.getItem('token');
    const [typeDialog, setTypeDialog] = useState(typeDialogProp)
@ -38,15 +40,15 @@ const DialogForm = ({
    const [birthdayDate, setBirthdaydate] = useState(birthdayDateProp)
    const [idNumber, setIdnumber] = useState(idNumberProp)
    const [email, setEmail] = useState(emailProp)
-    const [password, setPassword] = useState('')
+    const [refferal, setRefferalCode] = useState('')
    const [oldPassword, setOldPassword] = useState('')
    const [newPassword, setNewPassword] = useState('')
    const [newPasswordConfirm, setNewPasswordConfirm] = useState('')
    const [activeTab, setActiveTab] = useState('tab1')
-
+    console.log('typeDialogProp',typeDialogProp)
    const handleSave = () => {
        let data = '';
-        if (typeDialog === "Personal") {
+        if (typeDialog === "Personal" && typeDialogProp !== "Refferal") {
            data = {
                name: name,
                phone_number: noHp,
@ -59,14 +61,22 @@ const DialogForm = ({
                data.birth_date = birthdayDate;
            }
            closeDialog('profile', data)
-        } else if (typeDialog === "Account") {
+        } else if (typeDialog === "Account" && typeDialogProp !== "Refferal") {
            data = {
                username: userName,
                email: email,
                password: newPassword,
            }
            closeDialog('profile', data)
-        }
+        } else {
+          data = {
+            code: refferal,
+            user_id: userProfile.id,
+            username: userProfile.username,
+            ktp_number: userProfile.ktp_number
+          }
+          closeDialog('refferal_code', data)
+          }
    }

    const handleCancel = () => {
@ -85,6 +95,19 @@ const DialogForm = ({
        )
    }

+    function generateRandomString(length) {
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+      let result = '';
+      for (let i = 0; i < length; i++) {
+          result += characters.charAt(Math.floor(Math.random() * characters.length));
+      }
+      return result;
+    }
+
+    function generateReferralCode() {
+        const newReferralCode = generateRandomString(6);
+        setRefferalCode(newReferralCode);
+    }

    const renderForm = () => {
        return (
@ -197,45 +220,46 @@ const DialogForm = ({
    }

    return (
-        <>
-            <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
-                <ModalHeader className="capitalize" toggle={closeDialog}>
-                    Update {typeDialog == "Personal" ? `Personal` : "Account"} Data
-                </ModalHeader>
-                <ModalBody>
+        <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
+            <ModalHeader className="capitalize" toggle={closeDialog}>
+                Update {typeDialog == "Personal" ? `Personal` : "Account"} Data
+            </ModalHeader>
+            <ModalBody>
+              {typeDialogProp !== 'Refferal' ? (
+                  <>
                    <Nav tabs>
-                        <NavItem>
-                            <NavLink
-                                onClick={() => {
-                                    setActiveTab("tab1");
-                                    setTypeDialog("Personal");
-                                }}
-                                active={activeTab === "tab1"}
-                            >
-                                Personal
-                            </NavLink>
-                        </NavItem>
-                        <NavItem>
-                            <NavLink
-                                onClick={() => {
-                                    setActiveTab("tab2");
-                                    setTypeDialog("Account");
-                                }}
-                                active={activeTab === "tab2"}
-                            >
-                                Account
-                            </NavLink>
-                        </NavItem>
-                        <NavItem>
-                            <NavLink
-                                onClick={() => {
-                                    setActiveTab("tab3");
-                                    setTypeDialog("Setting");
-                                }}
-                                active={activeTab === "tab3"}
-                            >
-                                Setting
-                            </NavLink>
+                      <NavItem>
+                          <NavLink
+                              onClick={() => {
+                                  setActiveTab("tab1");
+                                  setTypeDialog("Personal");
+                              }}
+                              active={activeTab === "tab1"}
+                          >
+                              Personal
+                          </NavLink>
+                      </NavItem>
+                      <NavItem>
+                          <NavLink
+                              onClick={() => {
+                                  setActiveTab("tab2");
+                                  setTypeDialog("Account");
+                              }}
+                              active={activeTab === "tab2"}
+                          >
+                              Account
+                          </NavLink>
+                      </NavItem>
+                      <NavItem>
+                          <NavLink
+                              onClick={() => {
+                                  setActiveTab("tab3");
+                                  setTypeDialog("Setting");
+                              }}
+                              active={activeTab === "tab3"}
+                          >
+                              Setting
+                          </NavLink>
                        </NavItem>
                    </Nav>
                    <TabContent activeTab={activeTab}>
@ -249,13 +273,37 @@ const DialogForm = ({
                            {renderFormSetting()}
                        </TabPane>
                    </TabContent>
-                </ModalBody>
-                <ModalFooter>
-                    <Button color="primary" onClick={() => handleSave()}>{typeDialog == "Profile" ? `Profile` : "Save"}</Button> {' '}
-                    <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
-                </ModalFooter>
-            </Modal>
-        </>
+                  </>
+              ):(
+                <Form>
+                  <Row>
+                    <Col md={12}>
+                      <span style={{ color: "red" }}>*</span> Wajib diisi.
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col md={12}>
+                      <FormGroup>
+                        <Label className="capitalize">Refferal Code</Label>
+                        <Row>
+                          <Col md={8}>
+                            <Input maxLength={16} type="text" value={refferal || refferalCode} onChange={(e) => setRefferalCode(e.target.value)} placeholder={'Input refferal code'} />
+                          </Col>
+                          <Col md={4}>
+                            <Button color="primary" onClick={generateReferralCode}>Generate</Button>
+                          </Col>
+                        </Row>
+                      </FormGroup>
+                    </Col>
+                  </Row>
+                </Form >
+              )}
+            </ModalBody>
+            <ModalFooter>
+                <Button color="primary" onClick={() => handleSave()}>{typeDialogProp !== 'Refferal' ? typeDialog == "Profile" ? `Profile` : "Save" : "Generate Code"}</Button> {' '}
+                <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
+            </ModalFooter>
+        </Modal>
    )


--- a/src/views/SimproV2/Settings/index.js
+++ b/src/views/SimproV2/Settings/index.js
@ -5,14 +5,11 @@ import axios from "../../../const/interceptorApi"
 import { Card, CardBody, CardHeader, Col, Row, Input, Table, Button } from 'reactstrap';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import { Pagination, Tooltip } from 'antd';
-import { USER_EDIT, SATUAN_ADD, SATUAN_EDIT, SATUAN_DELETE, SATUAN_SEARCH } from '../../../const/ApiConst';
+import { USER_EDIT, USER_GET_ID, REFFERAL_GET_ID, REFFERAL_ADD, REFFERAL_EDIT } from '../../../const/ApiConst';
 import profile from '../../../assets/img/profile.png'
 import DialogForm from './DialogForm'
 import { ROLE_SEARCH, BASE_OSPRO } from '../../../const/ApiConst'

-
-
-
 const Setting = ({ params }) => {
    const token = localStorage.getItem("token")
    const config = {
@ -21,17 +18,13 @@ const Setting = ({ params }) => {
            "Authorization": `Bearer ${token}`
        }
    }
-
    const pageName = params.name;
-
-
-
-
    const [openDialog, setOpenDialog] = useState(false)
    const [typeDialog, setTypeDialog] = useState('Personal')
    const [id, setId] = useState(0)
    const [roleList, setRoleList] = useState([])
    const [userProfile, setUserprofile] = useState(null)
+    const [refferal, setReferralCode] = useState(null)
    const [userName, setUserName] = useState("")
    const [name, setName] = useState('')
    const [noHp, setNohp] = useState("")
@ -44,7 +37,7 @@ const Setting = ({ params }) => {
    const [role, setRole] = useState("")
    const [email, setEmail] = useState("")
    const [employeeType, setEmployeeType] = useState("")
-
+    const [isCopied, setIsCopied] = useState(false);

    useEffect(() => {
        getDataProfileUser();
@ -68,7 +61,7 @@ const Setting = ({ params }) => {
            setEmployeeType(userProfile?.employee_type);

        }
-    }, [userProfile])
+    }, [userProfile, typeDialog])

    const handleOpenDialog = (type) => {
        setOpenDialog(true)
@ -78,12 +71,13 @@ const Setting = ({ params }) => {
    const handleCloseDialog = (type, data) => {
        if (type === "profile") {
            saveProfile(data);
+        } else if(type === "refferal_code") {
+            updateRefferal(data);
        }
        setOpenDialog(false)
    }

    const saveProfile = async (data) => {
-
        let urlEdit = USER_EDIT(id)
        const formData = data

@ -99,6 +93,20 @@ const Setting = ({ params }) => {
        }
    }

+    const updateRefferal = async (data) => {
+      let urlEdit = REFFERAL_EDIT(id)
+      const formData = data
+      const result = await axios.put(urlEdit, formData, config)
+          .then(res => res)
+          .catch((error) => error.response);
+      if (result && result.data && result.data.code === 200) {
+          getDataRefferal(data.user_id, data.username, data.ktp_number);
+          NotificationManager.success(`Code refferal berhasil diedit`, 'Success!!');
+      } else {
+          NotificationManager.error(`Code refferal gagal di edit`, `Failed!!`);
+      }
+  }
+
    const toggleAddDialog = () => {
        setOpenDialog(!openDialog)
    }
@ -121,10 +129,7 @@ const Setting = ({ params }) => {

    const getDataProfileUser = async () => {
        const id = localStorage.getItem("user_id")
-
-        const url = `${BASE_OSPRO}/api/human-resource/edit/${id}`
-
-
+        const url = USER_GET_ID(id);
        const result = await axios
            .get(url, config)
            .then((res) => res)
@ -132,11 +137,49 @@ const Setting = ({ params }) => {
        if (result && result.data && result.data.code == 200) {
            let dataRes = result.data.data;
            setUserprofile(dataRes);
+            await getDataRefferal(id, dataRes.username, dataRes.ktp_number);
        } else {
            NotificationManager.error("Gagal Mengambil Data!!", "Failed");
        }
    };

+    const getDataRefferal = async (user_id, username, ktp_number) => {
+      const url = REFFERAL_GET_ID(user_id);
+      const result = await axios
+          .get(url, config)
+          .then((res) => res)
+          .catch((error) => error.response);
+      if (result && result.data && result.data.code == 200) {
+          let dataRes = result.data.data;
+          setReferralCode(dataRes);
+      } else {
+          saveRefferalCode(user_id, username, ktp_number);
+      };
+    }
+
+    const saveRefferalCode = async (user_id, username, ktp_number) => {
+      const formData = {
+        'id': parseInt(user_id),
+        'code': username + ktp_number.substring(0, 4),
+        'amount': 0
+      }
+      const result = await axios
+          .post(REFFERAL_ADD, formData, config)
+          .then((res) => res)
+          .catch((error) => error.response);
+      if (result && result.data && result.data.code == 200) {
+        await getDataRefferal(user_id, username, ktp_number);
+      }
+    }
+
+    function copyToClipboard(text) {
+      navigator.clipboard.writeText(text).then(() => {
+          setIsCopied(true);
+          setTimeout(() => setIsCopied(false), 2000);
+      }, (err) => {
+          console.error('Gagal menyalin teks ke clipboard: ', err);
+      });
+    }


    return (
@ -158,6 +201,8 @@ const Setting = ({ params }) => {
                addressProp={address}
                emailProp={email}
                userNameProp={userName}
+                refferalCode={refferal?.code}
+                userProfile={userProfile}
            />

            <Card>
@ -233,6 +278,15 @@ const Setting = ({ params }) => {
                            <td><b>Tanggal Lahir      &nbsp; </b></td>
                            <td>: &nbsp; {birthdayDate}</td>
                        </tr>
+                        <tr>
+                            <td><b>Referral Code      &nbsp; </b></td>
+                            <td>: &nbsp; {refferal?.code} <small style={{ color:'blue', cursor: 'pointer' }} onClick={() => copyToClipboard(refferal?.code)}>{isCopied ? 'Copied' : 'Copy'}</small></td>
+                            <td>
+                            <Tooltip title='Custom Refferal Code'>
+                              <Button color="success" onClick={() => handleOpenDialog('Refferal')}>Custom Refferal Code</Button>
+                            </Tooltip>
+                            </td>
+                        </tr>
                    </tbody>
                    <br />
                </Col>