Shopify Post-Purchase Extensionでレジ前販売を実装する　機能拡張編③ 〜ディスカウント・確認〜

  const changes: AddVariantChange[] = [
    {
      type: 'add_variant',
      variantId,
      quantity: 1,
      discount: {
        value: 15,
        valueType: "percentage",
        title: "特別割引",
      }
    }
  ];

    // originalPrice,
    // discountedPrice
  } = product as UpsellVariant;

...
...

  const discountedPrice: string = calculatedPurchase?.updatedLineItems[0].totalPriceSet.presentmentMoney.amount || ''; //
  const originalPrice: string = calculatedPurchase?.updatedLineItems[0].priceSet.presentmentMoney.amount;

type ExplicitDiscount = {
  value: number;
  valueType: "percentage" | "fixed_amount";
  title: string;
}

type AddVariantChange = {
  type: 'add_variant';
  variantId: number;
  quantity: number;
  discount?: ExplicitDiscount;
}

function ProceedButtons({ variantId, total }: {
  variantId: number;
  total: string;
}) {
  const { loading, acceptOffer, declineOffer } = useContext(AppContext);
  const changes: AddVariantChange[] = [{ type: 'add_variant', variantId, quantity: 1 }];

  const [isChceked, setConfirmation] = useState(false);

  return (
    <BlockStack>
      <BlockStack alignment='center'>
        <Checkbox onChange={() => setConfirmation((prev) => !prev)}>
          購入ボタンを押すと決済に商品が追加されます
        </Checkbox>
      </BlockStack>
      <Button onPress={async () => { await acceptOffer(changes) }} submit loading={loading} disabled={!isChceked}>
        Pay now · {formatCurrency(total)}
      </Button>
      <Button onPress={declineOffer} subdued loading={loading}>
        Decline this offer
      </Button>
    </BlockStack>
  )
}