Issue with formatting sp700 printout, stardot

[haikumedia]

Hello! I hope all is well, we are having issues with formatting sp700 printouts.

Printout is poor quality/ pixelated printout does not adhere to formatting printout is oversized see pic here: https://drive.google.com/file/d/1jDVIgOg8ISmISwfxW0PD2V9S0agq_Clj/view?usp=sharing

OrderReceipt.tsx

import React, { useMemo } from "react";
import { Box, Text } from "native-base";
import { useStore } from "effector-react";
import { $restaurant } from "@/stores/restaurant.store";
import { $date } from "@/plugins/date";

interface Props {
  order: any;
  magnification?: number;
  width?: number;
}

const FONT_BASE = 14;
const FONT_LG = 16;
const FONT_XL = 20;

export const OrderReceipt: React.FC<Props> = ({ order, magnification = 0, width = 576 }) => {
  const restaurant = useStore($restaurant);

  const lineHeight = useMemo(() => {
    if (magnification > 5) {
      const ratio = magnification / 1.5;
      return 21 + ratio;
    }

    return 21;
  }, [magnification]);

  const line = useMemo(() => {
    const finalWidth = width / 4.5;
    let strip: string = "";

    for (let step = 0; step < finalWidth; step++) {
      strip += "-";
    }

    return strip;
  }, [width]);

  return (
    <>
      <Box mb={2}>
        <Text
          textAlign="center"
          style={{
            fontSize: FONT_BASE + magnification,
            lineHeight,
          }}
        >
          {order.user.name}
        </Text>
        <Text
          textAlign="center"
          style={{
            fontSize: FONT_BASE + magnification,
            lineHeight,
          }}
        >
          {order.id_without_timestamp}
        </Text>
      </Box>

      <Text
        textAlign="center"
        mb={2}
        style={{
          fontSize: FONT_BASE + magnification,
          lineHeight,
        }}
      >
        ADDRESS: {order.address}
      </Text>

      <Box>
        <Text
          textAlign="center"
          style={{
            fontSize: FONT_BASE + magnification,
            lineHeight,
          }}
        >
          {$date(order.created_at).format("MMMM DD, YYYY")}
        </Text>

        <Text
          textAlign="center"
          style={{
            fontSize: FONT_BASE + magnification,
            lineHeight,
          }}
        >
          {$date(order.created_at).format("hh:mm A")}
        </Text>
      </Box>

      <Text textAlign="center">{line}</Text>

      <Text
        textAlign="center"
        fontWeight="bold"
        style={{
          fontSize: FONT_XL + magnification,
          lineHeight: lineHeight + 10,
        }}
      >
        {order.delivery_type == 1 ? "DELIVERY" : "PICK UP"}
      </Text>

      <Text textAlign="center">{line}</Text>

      <Box>
        {order.items.map((item: any) => (
          <Box key={`item-${item.id}`} mt={3}>
            <Text
              fontWeight="medium"
              style={{
                fontSize: FONT_LG + magnification,
                lineHeight,
              }}
            >
              {item.quantity}X {item.name}
            </Text>

            {item.addons?.map((addon: any) => (
              <Text
                key={`addon-${addon.id}`}
                fontSize="md"
                color="red.600"
                style={{
                  fontSize: FONT_BASE + magnification,
                  lineHeight,
                }}
              >
                - {item.quantity}X {addon.name}
              </Text>
            ))}
          </Box>
        ))}
      </Box>

      <Text textAlign="center">{line}</Text>

      <Text
        textAlign="center"
        fontWeight="bold"
        style={{
          fontSize: FONT_BASE + magnification,
          lineHeight,
        }}
      >
        HANGRY
      </Text>

      <Text
        textAlign="center"
        fontWeight="bold"
        style={{
          fontSize: FONT_BASE + magnification,
          lineHeight,
        }}
      >
        {restaurant.name}
      </Text>

      <Text textAlign="center">{line}</Text>
    </>
  );
};

OrderReceipt.defaultProps = {
  magnification: 0,
};

[gare-bear]

@haikumedia last we spoke, I told you your image width is 576 which is too large for the sp700. all issues you mentioned are related to this. ideally you need to make two different layouts; one for thermal and one for impact.

any update? did you fix your issue?

[gare-bear]

Closing this as there's been no activity on this issue for sometime. If you're still running into this problem, we can reopen this issue.