aso/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogSendWa.tsx

import { Stack, Typography, Button, Paper, Grid, IconButton, TextField } from "@mui/material";
import MuiDialog from "@/components/MuiDialog";
import { fDate, fDateTimesecond } from '@/utils/formatTime';
import { ContentCopy, WhatsApp, Instagram, Facebook, Telegram } from "@mui/icons-material";

type DialogConfirmationType = {
  openDialog: boolean;
  setOpenDialog: any;
  onSubmit?: void;
  requestLog: any;
  shareLink: boolean;
};

export default function DialogSendWa({
  requestLog,
  setOpenDialog,
  openDialog,
  shareLink = false,
}: DialogConfirmationType) {
  const data = {
    provider: requestLog?.provider || "LOG",
    memberId: requestLog?.member_id || "-",
    policyNumber: requestLog?.policy_number || "-",
    name: requestLog?.name || "-",
    submissionDate: requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : "-",
    claimMethod: requestLog?.claim_method || "-",
    serviceType: requestLog?.service_type || "-",
    linkApproval: requestLog?.url_approval || "https://example.com/approval-link",
  };

  const getContent = () => (
    <Stack spacing={2} sx={{ marginTop: 2, padding: 2 }}>
          <Typography>Are you sure want to send this request ?</Typography>
          <Paper variant="outlined" sx={{ p: 2 }}>
            <Grid container spacing={1}>
              <Grid item xs={5}>
                <Typography variant="body2" color="textSecondary">
                  Member ID
                </Typography>
              </Grid>
              <Grid item xs={7}>
                <Typography>{data.memberId}</Typography>
              </Grid>

              <Grid item xs={5}>
                <Typography variant="body2" color="textSecondary">
                  Policy Number
                </Typography>
              </Grid>
              <Grid item xs={7}>
                <Typography fontWeight="bold">{data.policyNumber}</Typography>
              </Grid>

              <Grid item xs={5}>
                <Typography variant="body2" color="textSecondary">
                  Name
                </Typography>
              </Grid>
              <Grid item xs={7}>
                <Typography>{data.name}</Typography>
              </Grid>

              <Grid item xs={5}>
                <Typography variant="body2" color="textSecondary">
                  Submission Date
                </Typography>
              </Grid>
              <Grid item xs={7}>
                <Typography>{data.submissionDate}</Typography>
              </Grid>

              <Grid item xs={5}>
                <Typography variant="body2" color="textSecondary">
                  Claim Method
                </Typography>
              </Grid>
              <Grid item xs={7}>
                <Typography>{data.claimMethod}</Typography>
              </Grid>

              <Grid item xs={5}>
                <Typography variant="body2" color="textSecondary">
                  Service Type
                </Typography>
              </Grid>
              <Grid item xs={7}>
                <Typography>{data.serviceType}</Typography>
              </Grid>
            </Grid>
          </Paper>
        {shareLink ? (
        <>
          <Typography>Share this link only with authorized parties!</Typography>
          {/* <Stack direction="row" spacing={2}>
            <IconButton color="success">
              <WhatsApp />
            </IconButton>
            <IconButton color="primary">
              <Instagram />
            </IconButton>
            <IconButton color="primary">
              <Telegram />
            </IconButton>
            <IconButton color="primary">
              <Facebook />
            </IconButton>
          </Stack> */}

          <Typography variant="body2">or copy link</Typography>
          <Stack direction="row" spacing={1}>
            <TextField
              fullWidth
              size="small"
              value={data.linkApproval}
              InputProps={{
                readOnly: true,
              }}
            />
            <Button
              variant="outlined"
              onClick={() => navigator.clipboard.writeText(data.linkApproval)}
            >
              Copy
            </Button>
          </Stack>
        </>
      ): null }
    </Stack>
  );

  const getAction = () => {
    if (shareLink) {
      return (
        <Stack direction="row" justifyContent="flex-end">
          <Button variant="outlined" onClick={() => setOpenDialog(false)}>
            Cancel
          </Button>
        </Stack>
      );
    }

    const handleSend = () => {
      const message = `*Request Approval*
        Yth. Bapak/Ibu, Nama Penerima
        Mohon persetujuan atas data berikut:

        Provider: *${data.provider}*
        Member ID: ${data.memberId}
        Nama: ${data.name}
        Policy Number: ${data.policyNumber}
        Submission Date: ${data.submissionDate}
        Claim Method: ${data.claimMethod}
        Service Type: ${data.serviceType}

        Silakan klik link berikut untuk approval:
        ${data.linkApproval}`;

      const encodedMessage = encodeURIComponent(message);
      const waUrl = `https://wa.me/6283807417196?text=${encodedMessage}`;
      window.open(waUrl, "_blank");
    };

    return (
      <Stack direction="row" justifyContent="space-between" spacing={2}>
        <Button variant="outlined" onClick={() => setOpenDialog(false)}>
          Cancel
        </Button>
        <Button variant="contained" onClick={handleSend}>
          Send
        </Button>
      </Stack>
    );
  };

  return (
    <MuiDialog
      title={{ name: "Confirmation", variant: "h4" }}
      openDialog={openDialog}
      setOpenDialog={setOpenDialog}
      content={getContent()}
      action={getAction()}
      maxWidth="sm"
    />
  );
}