Checkout Item Line Comment

The checkoutItemLineComment object is a supported web store named export that Sana expects an add-on to provide from its entry JavaScript module.

The checkoutItemLineComment object can contain the following properties:

Property	Type	Description
editor	(optional) CheckoutItemLineCommentEditor	The React component which renders checkout item line comment editor.
display	(optional) CheckoutItemLineCommentDisplay	The React component which renders checkout item line comment value.

Important

Addon components must return valid HTML. Returning malformed or incomplete HTML may lead to layout issues and accessibility problems.

CheckoutItemLineCommentEditor component

The CheckoutItemLineCommentEditor component must take as a parameter an object with props of type CheckoutItemLineCommentEditorProps.

The CheckoutItemLineCommentEditorProps type contains following properties:

Property	Type	Description
isValid	boolean	The value indicating whether the line comment is valid.
line	{ comment: string | null; }	The checkout item line.
onCommentChange	(comment: string | null, isValid: boolean) => void	The method for handling the checkout item line comment change.
product	{ id: string; attributes: Record<string, AddonFieldInfo>; }	The product of the checkout item line.
variant	{ id: string; } | null	The variant of the checkout item line.
isDesignerMode	boolean	Specifies if visual designer mode is activated.

Example:

import type { CheckoutItemLineCommentEditorProps } from 'sana/types';
import { useState, useEffect, memo } from 'react';

const CheckoutItemLineCommentEditor = ({
  isValid,
  line: { comment: initialComment },
  onCommentChange,
}: CheckoutItemLineCommentEditorProps) => {
  const [comment, setComment] = useState(initialComment ?? '');
  const [isCommentValid, setIsCommentValid] = useState(true);

  const maxCharacters = 100;
  const validationErrorMessage = `Maximum characters are ${maxCharacters}.`;

  const validateComment = (value) => {
    if (!isValid) return false;

    return value.length <= maxCharacters;
  };

  useEffect(() => {
    onCommentChange(comment, isCommentValid);
  }, [comment, isCommentValid]);

  const handleChange = (value) => {
    setComment(value);
    setIsCommentValid(validateComment(value));
  };

  return (
    <div>
      <input
        value={comment}
        onChange={(e) => handleChange(e.target.value)}
      />
    {!isCommentValid && <div>{validationErrorMessage}</div>}
    </div>
  );
};

export default memo(CheckoutItemLineCommentEditor);

CheckoutItemLineCommentDisplay component

The CheckoutItemLineCommentDisplay component must take as a parameter an object with props of type CheckoutItemLineCommentDisplayProps.

The CheckoutItemLineCommentDisplayProps type contains following properties:

Property	Type	Description
line	{ comment: string | null; }	The checkout item line.
isDesignerMode	boolean	Specifies if visual designer mode is activated.

Example:

import type { CheckoutItemLineCommentDisplayProps } from 'sana/types';
import { Placeholder } from 'sana/elements';
import { SimpleText } from 'sana/texts';

const TestCheckoutItemLineCommentDisplay = ({ line }: CheckoutItemLineCommentDisplayProps) => (
  <div>
    Addon comment from client:
    {' '}
    <SimpleText
      textKey={line.comment ? 'Comment_' + line.comment : 'CommentNotPresent'}
      placeholder={<Placeholder />}
    >
      {line.comment}
    </SimpleText>
  </div>
);

export default TestCheckoutItemLineCommentDisplay;