fix: checkbox logic (#1537)

## Description

<!--- Describe the changes introduced by this pull request. -->
<!--- Explain what problem it solves or what feature/fix it adds. -->

## Related Issue

<!--- If this pull request is related to a specific issue, reference it
here using #issue_number. -->
<!--- For example, "Fixes #123" or "Addresses #456". -->

## Changes Made

<!--- Provide a summary of the changes made in this pull request. -->
<!--- Include any relevant technical details or architecture changes.
-->

- Change 1
- Change 2
- ...

## Testing Performed

<!--- Describe the testing that you have performed to validate these
changes. -->
<!--- Include information about test cases, testing environments, and
results. -->

- Tested feature X in scenario Y.
- Ran unit tests for component Z.
- Tested on browsers A, B, and C.
- ...

## Checklist

<!--- Please check the boxes that apply to this pull request. -->
<!--- You can add or remove items as needed. -->

- [ ] I have tested these changes locally and they work as expected.
- [ ] I have added/updated tests that prove the effectiveness of these
changes.
- [ ] I have updated the documentation to reflect these changes, if
applicable.
- [ ] I have followed the project's coding style guidelines.
- [ ] I have addressed the code review feedback from the previous
submission, if applicable.

## Additional Notes

<!--- Provide any additional context or notes for the reviewers. -->
<!--- This might include details about design decisions, potential
concerns, or anything else relevant. -->

apps/web/src/app/(signing)/sign/[token]/checkbox-field.tsx

@@ -12,6 +12,7 @@ import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/tr
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
+import { fromCheckboxValue, toCheckboxValue } from '@documenso/lib/universal/field-checkbox';
 import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import { trpc } from '@documenso/trpc/react';
@@ -54,6 +55,7 @@ export const CheckboxField = ({
     ...item,
     value: item.value.length > 0 ? item.value : `empty-value-${item.id}`,
   }));
+
   const [checkedValues, setCheckedValues] = useState(
     values
       ?.map((item) =>
@@ -97,7 +99,7 @@ export const CheckboxField = ({
       const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-        value: checkedValues.join(','),
+        value: toCheckboxValue(checkedValues),
         isBase64: true,
         authOptions,
       };
@@ -191,7 +193,7 @@ export const CheckboxField = ({
           await signFieldWithToken({
             token: recipient.token,
             fieldId: field.id,
-            value: updatedValues.join(','),
+            value: toCheckboxValue(checkedValues),
             isBase64: true,
           });
         }
@@ -228,6 +230,11 @@ export const CheckboxField = ({
     }
   }, [checkedValues, isLengthConditionMet, field.inserted]);
 
+  const parsedCheckedValues = useMemo(
+    () => fromCheckboxValue(field.customText),
+    [field.customText],
+  );
+
   return (
     <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Checkbox">
       {isLoading && (
@@ -277,9 +284,7 @@ export const CheckboxField = ({
                   className="h-3 w-3"
                   checkClassName="text-white"
                   id={`checkbox-${index}`}
-                  checked={field.customText
-                    .split(',')
-                    .some((customValue) => customValue === itemValue)}
+                  checked={parsedCheckedValues.includes(itemValue)}
                   disabled={isLoading}
                   onCheckedChange={() => void handleCheckboxOptionClick(item)}
                 />