Product Tagging Components

AmityProductTagSelectionComponent(
    pageId: .postComposerPage,
    selectedProductTags: selectedProducts,
    existingProducts: ["product-3", "product-4"], // Already tagged - shown disabled
    mode: .create,  // .create | .edit | .livestream
    onTagChanges: { tags in
        // Handle selection changes
    },
    onDone: {
        // Handle completion (create/edit modes)
    },
    onClose: {
        // Handle dismissal (livestream mode)
    }
)

AmityProductTagSelectionComponent(
    pageScope = pageScope,
    selectedProductTags = selectedProductTags,
    existingProducts = listOf("product-3", "product-4"),
    mode = SelectionMode.CREATE,  // CREATE | EDIT | LIVESTREAM
    maxCount = 15,
    canMultiSelect = true,
    onTagChanges = { tags ->
        // Handle selection changes
    },
    onDone = {
        // Handle completion (create/edit modes)
    },
    onClose = {
        // Handle dismissal
    }
)

<AmityProductTagSelectionComponent
  pageId="post_composer_page"
  selectedProductTags={selectedProducts}
  existingProducts={["product-3", "product-4"]}
  mode="create"  // "create" | "edit" | "livestream"
  displayMode="mobile"  // "desktop" | "mobile"
  onTagChanges={(tags) => {
    // Handle selection changes
  }}
  onDone={() => {
    // Handle completion (create/edit modes)
  }}
  onClose={() => {
    // Handle dismissal
  }}
/>

AmityProductTagListComponent(
    pageId: .postDetailPage,
    productTags: taggedProducts,
    renderMode: .post,  // .post | .livestream | .image | .video
    onProductClick: { productTag in
        // Handle product interaction
    }
)
.environmentObject(host)

AmityProductTagListComponent(
    productTags = taggedProducts,
    renderMode = RenderModeEnum.POST,  // POST | LIVESTREAM | IMAGE | VIDEO
    displayMode = "mobile",
    onDismiss = {
        // Handle dismissal
    },
    onProductClick = { product, analyticsLocation ->
        // Handle product click
    }
)

<AmityProductTagListComponent
  productTags={taggedProducts}
  renderMode="post"  // "post" | "livestream" | "image" | "video"
  displayMode="desktop"  // "desktop" | "mobile"
  onProductClick={(productTag) => {
    // Handle product interaction
  }}
/>

import AmityUIKit4

AmityManageProductTagListComponent(
    pageId: .livestreamPage,
    viewModel: manageProductTagViewModel,
    renderMode: .livestream,
    onClose: { products in
        // Update local tagged products state
        taggedProducts = products
    },
    onAddProducts: {
        // Present product selection sheet
    },
    onPinToggle: { productId, shouldPin in
        viewModel.pinProduct(productId: productId, pin: shouldPin)
    },
    onProductRemove: { productId in
        viewModel.removeProduct(productId: productId)
    }
)
.environmentObject(host)

import com.amity.socialcloud.uikit.community.compose.livestream.room.create.AmityManageProductTagListComponent

AmityManageProductTagListComponent(
    taggedProducts = taggedProducts,
    maxCount = 20,
    pinnedProductId = pinnedProductId,
    componentScope = componentScope,
    canManageProducts = true,
    isPostLive = true,
    onDismiss = {
        // Dismiss the bottom sheet
    },
    onRemoveProduct = { productId ->
        viewModel.removeProduct(productId)
    },
    onPinProduct = { productId ->
        viewModel.pinProduct(productId)
    },
    onAddProducts = {
        // Navigate to product selection screen
    },
    onProductClick = { product, location ->
        // Handle product tap (e.g. open product detail)
    },
    onProductViewed = { product, location ->
        // Fire analytics impression event
    }
)

import { AmityManageProductTagListComponent } from "@amityco/ui-kit-open-source";

<AmityManageProductTagListComponent
  pageId="livestream_page"
  productTags={productTags}
  pinnedProductId={pinnedProductId}
  maxCount={20}
  isHost={true}
  renderMode="livestream"
  sourceId={streamId}
  onProductTagsChange={(tags) => {
    setProductTags(tags);
  }}
  onUpdateProductTags={async (tags) => {
    return await updatePostProductTags(tags);
  }}
  onRemove={(productTag) => {
    removeProductTag(productTag);
  }}
  onPinnedProductIdChange={(newPinnedId) => {
    setPinnedProductId(newPinnedId);
  }}
  isPinning={isPinning}
  isUnpinning={isUnpinning}
  onClose={(tags, pinnedId) => {
    handleClose(tags, pinnedId);
  }}
/>