Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | 8x 161x 161x 161x 161x | import { useFormContext } from "react-hook-form";
import { Box } from "@mui/material";
import { SLUG_MAX_CHARACTER_LENGTH } from "@constants/constants";
import useSlugPrefixFormatter from "@components/Merchants/MerchantPreview/hooks/useSlugPrefixFormatter";
import { HFGiveInput } from "@shared/HFInputs/HFGiveInput/HFGiveInput";
import GiveText from "@shared/Text/GiveText";
import GiveTruncateText from "@shared/Text/GiveTruncateText";
import CopyButton from "../../GiveMerchantFile/components/CopyButton";
import { useSlugPrefix } from "./useSlugPrefix";
type MerchantSlugInputProps = {
id?: string;
name: string;
label?: string;
parentName?: string;
disabled?: boolean;
focusViewColor?: string;
value?: string;
placeholder?: string;
isProvider?: boolean;
};
const MerchantSlugInput = ({
name,
label,
parentName,
disabled = false,
isProvider,
...rest
}: MerchantSlugInputProps) => {
const { watch } = useFormContext();
const { prefix, copyText, webDomain } = useSlugPrefix({
isProvider,
parentSlug: parentName || watch("parent_slug"),
slugValue: watch(name),
});
const slugPrefix = useSlugPrefixFormatter(prefix);
return (
<HFGiveInput
name={name}
label={label}
fullWidth
maxLength={SLUG_MAX_CHARACTER_LENGTH}
disabled={disabled}
InputProps={{
sx: {
"& .MuiInputAdornment-positionEnd": {
maxWidth: "45%",
},
},
}}
leftContent={
<GiveText variant="bodyS" color="secondary">
{slugPrefix}
</GiveText>
}
rightContent={
<Box
display="flex"
alignItems="center"
gap={1}
sx={{ minWidth: 0, maxWidth: "100%" }}
>
{isProvider && (
<GiveTruncateText
lineClamp={1}
variant="bodyS"
color="secondary"
sx={{ minWidth: 0, flex: 1 }}
title={webDomain}
>
{webDomain}
</GiveTruncateText>
)}
<Box sx={{ flexShrink: 0, display: "flex" }}>
<CopyButton
hidden={!watch(name)}
text={copyText}
testId="copy-permalink-btn"
/>
</Box>
</Box>
}
{...rest}
/>
);
};
export default MerchantSlugInput;
|