Shopify Post-Purchase Extensionでレジ前販売を実装する　仕上げ編 〜モバイル〜

import React, { Children, Dispatch, Fragment, SetStateAction, useContext, useEffect, useState } from 'react';
import fetch from 'node-fetch';

import {
  extend,
  render,
  BlockStack,
  Button,
  CalloutBanner,
  Heading,
  Image,
  Layout,
  Text,
  TextBlock,
  TextContainer,
  Tiles,
  useExtensionInput,
  Separator,
  InlineStack,
  Checkbox,
  View,
} from "@shopify/post-purchase-ui-extensions-react";
import { PostPurchaseRenderApi } from '@shopify/post-purchase-ui-extensions/build/ts/extension-points/api/post-purchase';

extend("Checkout::PostPurchase::ShouldRender", async ({ storage, inputData }): Promise<{ render: boolean }> => {
  console.log('Shouldrender hook');
  console.log(storage);
  console.log(inputData);
  console.log(navigator);
  // 購入金額
  const initialPurchasePrice = parseInt(inputData.initialPurchase.totalPriceSet.presentmentMoney.amount, 10);
  // コレクション取得
  const postPurchaseOffer: UpsellVariant[] = await fetch(
    'http://localhost:8077/offer', {}
  ).then((res) => res.json());

  // 初期購入金額の半分以下の商品を候補にする
  const candidateProducts = postPurchaseOffer.filter((product) => {
    const originalPrice = parseInt(product.originalPrice, 10);
    return initialPurchasePrice / 2 > originalPrice;
  })

  //候補が無い場合はPost-Purchase画面を表示せずにThankyou画面へ
  const render = candidateProducts.length > 0;

  if (render) {
    let pickedProducts = candidateProducts;
    // 候補からランダムに
    if (candidateProducts.length > 2) {
      const randomNumbers = generateRandomNumbers(2, candidateProducts.length);
      pickedProducts = candidateProducts.filter((element, i) => {
        return randomNumbers.includes(i + 1); // 乱数 -1 が配列の添字
      })
    }

    // Saves initial state, provided to `Render` via `storage.initialData`
    await storage.update(pickedProducts);
  }

  return {
    render,
  };
});

render('Checkout::PostPurchase::Render', () => <App />);

type AppContext = {
  isDesktop: boolean;
  loading: boolean;
  setLoading: Dispatch<SetStateAction<boolean>>;
  acceptOffer: (changes: AddVariantChange[]) => Promise<void>;
  declineOffer: () => void;
}

const AppContext = React.createContext({} as AppContext);

export function App() {
  const {
    storage,
    inputData,
    calculateChangeset,
    applyChangeset,
    done,
  } = useExtensionInput() as PostPurchaseRenderApi;

  const upsellProducts = storage.initialData as UpsellVariant[];

  const isDesktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|webOS|BlackBerry|IEMobile|Opera Mini)/i);

  const [loading, setLoading] = useState(true);

  // 追加購入時の処理
  async function acceptOffer(changes: AddVariantChange[]) {
    setLoading(true);
    //  return true;
    // Make a request to your app server to sign the changeset
    const token = await fetch('http://localhost:8077/sign-changeset', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        referenceId: inputData.initialPurchase.referenceId,
        changes: changes,
        token: inputData.token,
      }),
    })
      .then((response) => response.json())
      .then((response) => response.token);

    // 決済情報を書き換えるリクエスト
    await applyChangeset(token);

    // Redirect to the thank-you page
    done();
  }

  //拒否時
  function declineOffer() {
    setLoading(true);
    done();
  }

  return (
    <AppContext.Provider value={{ isDesktop, loading, setLoading, acceptOffer, declineOffer }} >
      <BlockStack spacing="loose">
        <CalloutBanner>
          <BlockStack spacing="tight">
            <TextContainer>
              <Text size="medium" emphasized>
                こちらの商品もいかがでしょうか？..
              </Text>
            </TextContainer>
            <TextContainer>
              <Text size="medium">こちらの画面から購入すると </Text>
              <Text size="medium" emphasized>
                15% オフ！
              </Text>
            </TextContainer>
          </BlockStack>
        </CalloutBanner>
        <Layout
          media={[
            { viewportSize: 'small', sizes: [1, 0, 1], maxInlineSize: 0.9 },
            { viewportSize: 'medium', sizes: [532, 0, 1], maxInlineSize: 420 },
            { viewportSize: 'large', sizes: [768, 38, 340] },
          ]}
        >
          <BlockStack>
            {upsellProducts.map((_product, i) => {
              return (
                <ProductListItem
                  key={i}
                  product={_product}
                  index={i}
                  calculateChangeset={calculateChangeset}
                />
              )
            })
            }

          </BlockStack>
        </Layout>
      </BlockStack>
    </AppContext.Provider>
  );
}


function ProductListItem
  ({ index, product, calculateChangeset }: {
    index: number;
    product: UpsellVariant;
    calculateChangeset: (changeset: any) => Promise<any>;
  }) {
  const {
    variantId,
    productTitle,
    productImageURL,
    productDescription,
    // originalPrice,
    // discountedPrice
  } = product as UpsellVariant;

  // const [loading, setLoading] = useState(true);
  const [calculatedPurchase, setCalculatedPurchase] = useState<any>();

  const { isDesktop, loading, setLoading } = useContext(AppContext);

  useEffect(() => {
    async function calculatePurchase() {
      // Request Shopify to calculate shipping costs and taxes for the upsell
      const result = await calculateChangeset({ changes });

      setCalculatedPurchase(result.calculatedPurchase);
    }
    calculatePurchase();
    setLoading(false);
  }, []);

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

  // calculatedPurchase から表示するための金額を取得
  // より詳しくは: node_modules/@shopify/post-purchase-ui-extensions/src/extension-points/api/post-purchase/post-purchase.ts
  const shipping: string =
    calculatedPurchase?.addedShippingLines[0]?.priceSet?.presentmentMoney
      ?.amount || '';
  const taxes: string =
    calculatedPurchase?.addedTaxLines[0]?.priceSet?.presentmentMoney?.amount || '';
  const total: string = calculatedPurchase?.totalOutstandingSet.presentmentMoney.amount || '';
  // 本来下記のコードでcalculateChangesetで出してきた値引き前価格が出ると思われるが、出ないのでAPIから来ている値を使う
  const discountedPrice: string = calculatedPurchase?.updatedLineItems[0].totalPriceSet.presentmentMoney.amount || ''; //
  const originalPrice: string = calculatedPurchase?.updatedLineItems[0].priceSet.presentmentMoney.amount;

  const layoutSize = isDesktop ? [0.5, 0.5] : [0.33, 0.66, 1];

  const DescriptionBlock = () => (
    <Fragment>
      <View inlinePadding='base'>
        <BlockStack>
          <ProductInformation
            productTitle={productTitle}
            discountedPrice={discountedPrice}
            originalPrice={originalPrice}
            total={total}
            calculatedPurchase={calculatedPurchase}
            productDescription={productDescription}
          />
          {isDesktop &&
            <PriceSummary
              discountedPrice={discountedPrice}
              calculatedPurchase={calculatedPurchase}
              shipping={shipping}
              taxes={taxes}
              total={total}
            />
          }
        </BlockStack>
      </View>
      <View blockPadding='base' inlinePadding='base'>
        <ProceedButtons
          variantId={variantId}
          total={total}
        />
      </View>
    </Fragment>
  );

  return (
    <>
      <InlineStack>
        <Layout sizes={layoutSize}>
          <Layout sizes={[1]} >
            <Image description="product photo" source={productImageURL} />
          </Layout>
          {isDesktop ? (
            <View>
              <DescriptionBlock />
            </View>
          ) : (
            <DescriptionBlock />
          )}
        </Layout>
      </InlineStack>
    </>
  )
}


function ProductInformation({ productTitle, discountedPrice, originalPrice, calculatedPurchase, productDescription, total }: {
  productTitle: string;
  discountedPrice: string;
  originalPrice: string;
  total: string;
  calculatedPurchase: any;
  productDescription: string[];
}) {

  return (
    <Fragment>
      <Heading level={2}>{productTitle}</Heading>
      <PriceHeader
        discountedPrice={discountedPrice}
        originalPrice={originalPrice}
        total={total}
        loading={!calculatedPurchase}
      />
      <ProductDescription textLines={productDescription} />
    </Fragment>
  )
}

function PriceSummary({ discountedPrice, calculatedPurchase, shipping, taxes, total }: {
  discountedPrice: string;
  calculatedPurchase: any;
  shipping: string;
  taxes: string;
  total: string;
}) {

  return (
    <BlockStack spacing="tight">
      <Separator />
      <MoneyLine
        label="Subtotal"
        amount={discountedPrice}
        loading={!calculatedPurchase}
      />
      <MoneyLine
        label="Shipping"
        amount={shipping}
        loading={!calculatedPurchase}
      />
      <MoneyLine
        label="Taxes"
        amount={taxes}
        loading={!calculatedPurchase}
      />
      <Separator />
      <MoneySummary
        label="Total"
        amount={total}
      // loading={!calculatedPurchase}
      />
    </BlockStack>
  )
}

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>
  )
}

function PriceHeader({ discountedPrice, originalPrice, total, loading }: {
  discountedPrice: string;
  originalPrice: string;
  total: string;
  loading: boolean;
}) {
  const { isDesktop } = useContext(AppContext);
  const isMoblie = !isDesktop;
  const containerSpacing = isDesktop ? 'loose' : 'tight';
  const textSize = isDesktop ? 'large' : 'small';

  return (
    <TextContainer alignment="leading" spacing={containerSpacing}>
      <Text role="deletion" size={textSize}>
        {!loading && formatCurrency(originalPrice)}
      </Text>
      <Text emphasized size={textSize} appearance="critical">
        {' '}
        {!loading && formatCurrency(discountedPrice)}
      </Text>
      {isMoblie &&
        <Text emphasized size={textSize}>
          {!loading && " ( " +
            formatCurrency(total)
            + " with tax )"
          }
        </Text>
      }
    </TextContainer>
  );
}

function ProductDescription({ textLines }: {
  textLines: string[];
}): JSX.Element {
  return (
    <BlockStack spacing="xtight">
      {textLines.map((text, index) => {
        const _text = text.replace(/<[^>]*>?/gm, '');
        return (
          <TextBlock key={index} subdued>
            {_text}
          </TextBlock>
        )
      }
      )}
    </BlockStack>
  );
}

function MoneyLine({ label, amount, loading = false }: {
  label: string;
  amount: string;
  loading: boolean;
}): JSX.Element {
  return (
    <Tiles>
      <TextBlock size="small">{label}</TextBlock>
      <TextContainer alignment="trailing">
        <TextBlock emphasized size="small">
          {loading ? '-' : formatCurrency(amount)}
        </TextBlock>
      </TextContainer>
    </Tiles>
  );
}

function MoneySummary({ label, amount }: {
  label: string;
  amount: string;
}): JSX.Element {
  const { isDesktop } = useContext(AppContext);
  const textBlockSize = isDesktop ? 'medium' : 'small';

  return (
    <Tiles>
      <TextBlock size={textBlockSize} emphasized>
        {label}
      </TextBlock>
      <TextContainer alignment="trailing">
        <TextBlock emphasized size={textBlockSize}>
          {formatCurrency(amount)}
        </TextBlock>
      </TextContainer>
    </Tiles>
  );
}

function formatCurrency(amount: string): string {
  if (!amount || parseInt(amount, 10) === 0) {
    return 'Free';
  }
  return `¥ ${amount}`;
}

function generateRandomNumbers(quantity: number, max: number): number[] {
  const arr: number[] = [];
  while (arr.length < quantity) {
    var candidateInt = Math.floor(Math.random() * max) + 1;
    if (arr.indexOf(candidateInt) === -1) arr.push(candidateInt);
    if (arr.length === max) {
      console.warn(`All candidate numbers are already included.`);
      break;
    }
  }
  return arr;
}

/** パッケージからexportされていないためここで再定義。詳しくはmodule内
 *   post-purchase-ui-extensions/build/ts/extension-points/api/post-purchase
*/
type ExplicitDiscount = {
  value: number;
  valueType: "percentage" | "fixed_amount";
  title: string;
}

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

// APIからの商品情報
type UpsellVariant = {
  variantId: number;
  productTitle: string;
  productImageURL: string;
  productDescription: string[];
  originalPrice: string;
  discountedPrice: string;
}